Iteradores e iterables de JavaScript

En este tutorial, aprenderá sobre iteradores e iterables de JavaScript con la ayuda de ejemplos.

Iterables e iteradores de JavaScript

JavaScript proporciona un protocolo para iterar sobre estructuras de datos. Este protocolo define cómo se repiten estas estructuras de datos utilizando el for… ofbucle.

El concepto de protocolo se puede dividir en:

  • iterable
  • iterador

El protocolo iterable menciona que un iterable debería tener la Symbol.iteratorclave.

Iterables de JavaScript

Las estructuras de datos que tiene el Symbol.iterator()método se denominan iterables. Por ejemplo, matrices, cadenas, conjuntos, etc.

Iteradores de JavaScript

Un iterador es un objeto devuelto por el Symbol.iterator()método.

El protocolo iterador proporciona el next()método para acceder a cada elemento del iterable (estructura de datos) uno a la vez.

Veamos un ejemplo de iterables que tienen Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Salida

 Iterador de matriz () StringIterator ()

Aquí, llamar al Symbol.iterator()método tanto de la matriz como de la cadena devuelve sus respectivos iteradores.

Iterar a través de iterables

Puede utilizar el for… ofbucle para iterar a través de estos objetos iterables. Puede iterar a través del Symbol.iterator()método de esta manera:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Salida

 1 2 3

O simplemente puede iterar a través de la matriz de esta manera:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Aquí, el iterador permite que el for… ofbucle itere sobre una matriz y devuelva cada valor.

Método JavaScript next ()

El objeto iterador tiene un next()método que devuelve el siguiente elemento de la secuencia.

El next()método contiene dos propiedades: valuey done.

  • valor
    La valuepropiedad puede ser de cualquier tipo de datos y representa el valor actual en la secuencia.
  • done
    La donepropiedad es un valor booleano que indica si la iteración está completa o no. Si la iteración está incompleta, la donepropiedad se establece en false, de lo contrario, se establece en true.

Veamos un ejemplo de iterables de matriz:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Puede llamar next()repetidamente para iterar sobre un arrIteratorobjeto.

  • El next()método devuelve un objeto con dos propiedades: valuey done.
  • Cuando el next()método llega al final de la secuencia, la donepropiedad se establece en false.

Veamos cómo for… ofloop ejecuta el programa anterior. Por ejemplo,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Salida

 Hola

El for… ofciclo hace exactamente lo mismo que el programa anterior.

El for… ofbucle sigue llamando al next()método en el iterador. Una vez que llega done:true, el for… ofciclo termina.

Iterador definido por el usuario

También puede crear su propio iterador y llamar next()para acceder al siguiente elemento. Por ejemplo,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Salida

 (valor: "h", hecho: falso) (valor: "e", hecho: falso) (valor: "l", hecho: falso) (valor: "l", hecho: falso) (valor: "o" , hecho: falso) (valor: indefinido, hecho: verdadero)

En el programa anterior, hemos creado nuestro propio iterador. Los displayElements()retornos de función valuey donepropiedad.

  • Cada vez next()que se llama al método, la función se ejecuta una vez y muestra el valor de una matriz.
  • Finalmente, cuando se agotan todos los elementos de una matriz, la donepropiedad se establece en true, con valueas undefined.

Articulos interesantes...