Método JavaScript Array [Symbol.iterator]()

Array 对象参考手册Objeto JavaScript Array

Ejemplo

Obtener el objeto iterador del array y generar en bucle:

const fruits = ['apple', 'banana', 'orange']; //1. Obtener el objeto iterador del array const iterator = fruits[Symbol.iterator](); //2. Llamar manualmente al método next() del iterador console.log(iterator.next()); // { value: 'apple', done: false } console.log(iterator.next()); // { value: 'banana', done: false } console.log(iterator.next()); // { value: 'orange', done: false } console.log(iterator.next()); // { value: undefined, done: true } //3. Usar el bucle for...of (internamente llama automáticamente a [Symbol.iterator]()) for (const fruit of fruits) { console.log(fruit); } //Salida: // apple // banana // orange //4. Usar el operador de propagación (también depende del iterador) const fruitCopy = [...fruits]; console.log(fruitCopy); // ['apple', 'banana', 'orange']

Pruébalo »

Definición y uso

[Symbol.iterator]()Es un método integrado de los arrays de JavaScript; devuelve el iterador predeterminado del array. Este método hace que el array sea un objeto iterable, que puede serfor...ofutilizado por estructuras como bucles, etc.

¿Qué es un iterador?

Antes de comenzar a explicar el[Symbol.iterator]()método, necesitamos entender primero qué es un iterador.

El iterador es un protocolo en JavaScript que define cómo acceder secuencialmente a los elementos de una colección. Cualquier objeto que implemente el protocolo del iterador puede ser utilizadofor...ofpor bucles, el operador de propagación (...) y otras características de JavaScript.

Un objeto iterador debe implementar unnext()método, que devuelve un objeto con dos propiedades:

  • value: el valor de la iteración actual
  • done: un valor booleano que indica si la iteración ha terminado

Sintaxis básica

const iterator = array[Symbol.iterator]();

Código de ejemplo

Veamos un ejemplo sencillo:

Ejemplo

const fruits = ['apple', 'banana', 'orange'];

// Obtener el iterador del array
const iterator = fruits[Symbol.iterator]();

console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'orange', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

En este ejemplo, nosotros:

  1. Creamos un array que contiene tres frutas
  2. A través del[Symbol.iterator]()método obtenemos el iterador del array
  3. Llamamos varias veces alnext()método del iterador, obteniendo secuencialmente cada elemento del array.

Escenarios de aplicación práctica

1. Usar el bucle for...of

for...ofInternamente, el bucle llama automáticamente al[Symbol.iterator]()método del array:

Ejemplo

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Salida:
// red
// green
// blue

2. Usar el operador de propagación

El operador de propagación también depende del protocolo iterador:

Ejemplo

const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];

console.log(copiedNumbers); // [1, 2, 3]

3. Asignación por desestructuración

La desestructuración de arrays también utiliza el iterador:

Ejemplo

const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(second); // 'b'

Personalizar el comportamiento de iteración del array

Aunque rara vez se necesita, puedes sobrescribir el[Symbol.iterator]()método predeterminado del array para personalizar el comportamiento de iteración:

Ejemplo

const customArray = [1, 2, 3];

customArray[Symbol.iterator] = function() {
  let index = this.length;
 
  return {
    next: () => {
      index--;
      return {
        value: this[index],
        done: index < 0
      };
    }
  };
};

for (const num of customArray) {
  console.log(num);
}
// Salida:
// 3
// 2
// 1

En este ejemplo, modificamos el iterador para que el array itere de atrás hacia adelante.

Comparación con otros métodos de iteración

Diferencias con forEach()

  • forEach()Es un método de array, que ejecuta una función de devolución de llamada para cada elemento.
  • [Symbol.iterator]()Devuelve un objeto iterador, lo que permite controlar el proceso de iteración de manera más flexible.

Relación con keys()/values()/entries()

Estos métodos devuelven iteradores, pero tienen diferentes usos:

  • keys(): devuelve un iterador de los índices del array
  • values(): devuelve un iterador de los elementos del array (igual que[Symbol.iterator]()el método [Symbol.iterator]())
  • entries(): devuelve un iterador de pares índice/valor

Compatibilidad del navegador

Array [Symbol.iterator]()El método es compatible en los siguientes entornos:

  • Chrome 38+
  • Firefox 36+
  • Edge 12+
  • Safari 9+
  • Opera 25+
  • Node.js 0.12+

Resumen

Array [Symbol.iterator]()El método es la clave para que los arrays de JavaScript implementen el protocolo iterable. Entender cómo funciona este método puede ayudarte a:

  1. Entender más profundamente el mecanismo de iteración de JavaScript
  2. Escribir código de iteración más eficiente
  3. Personalizar el comportamiento de iteración cuando sea necesario

Recuerda que en la mayoría de los casos no necesitas llamar directamente a este método, porquefor...ofel bucle y otras características del lenguaje lo manejan automáticamente internamente. Pero entender cómo funciona te convertirá en un mejor desarrollador de JavaScript.

Array 对象参考手册Objeto JavaScript Array

Otras extensiones