Desmitificando iteradores e iteradores ES6

Programación

ES6 introduce una nueva forma de interactuar con las estructuras de datos de JavaScript: la iteración . Vamos a desmitificarlo.

Hay 2 conceptos básicos:

  • Iterable : descrito por una estructura de datos que proporciona una forma de exponer sus datos al público. Esto se hace implementando un método cuya clave es Symbol.iterator. Symbol.iteratores una fábrica de iteradores.
  • Iterador : descrito por una estructura que contiene un puntero al siguiente elemento de la iteración.

Protocolo

Tanto el iterable como el iterador siguen un protocolo que permite que los objetos sean iterables:

  • Un interable debe ser un objeto con un iterador de función cuya clave sea Symbol.iterator.
  • Un iterador debe ser un objeto con una función nombrada nextque devuelva un objeto con las claves: value- el elemento actual en la iteración; y done- verdadero si la iteración ha terminado, falso en caso contrario.

Iterabilidad

La iteración sigue la idea de fuentes de datos y consumidores de datos :

  • fuentes de datos : son el lugar de donde los consumidores de datos obtienen sus datos. Por ejemplo, Arraytal como [1,2,3]es una estructura de fuente de datos que contiene los datos a través de los cuales un consumidor de datos iterará (por ejemplo 1, 2, and 3). Más ejemplos son String, Mapsy Sets.
  • consumidores de datos : son los que consumen los datos de las fuentes de datos. Por ejemplo, el for-ofbucle es un consumidor de datos capaz de iterar sobre una Arrayfuente de datos. Más ejemplos son spread operatory Array.from.

Para que una estructura sea una fuente de datos , debe permitir y decir cómo se deben consumir sus datos. Esto se hace mediante iteradores . Por lo tanto, una fuente de datos debe seguir el protocolo de iterador descrito anteriormente.

Sin embargo, no es práctico para todos los consumidores de datos admitir todas las fuentes de datos , especialmente porque JavaScript nos permite crear nuestras propias fuentes de datos. Entonces ES6 presenta la interfaz Iterable .

Los consumidores de datos consumen los datos de fuentes de datos a través de iterables .

En la práctica

Veamos cómo funciona esto en una fuente de datos definida - Array.

Fuentes de datos iterables

Usaremos for-ofpara explorar algunas de las fuentes de datos que implementan el protocolo iterable .

Objetos simples

En esta etapa, debemos decir que los objetos simples no son iterables. Axel Rauschmayer hace un gran trabajo explicando por qué en Exploring ES6.

Una breve explicación es que podemos iterar sobre objetos JavaScript en dos niveles diferentes:

  • nivel de programa , lo que significa iterar sobre las propiedades de un objeto que representan su estructura. Por ejemplo, Array.prototype.lengthwhere lengthestá relacionado con la estructura del objeto y no con sus datos.
  • nivel de datos , es decir, iterar sobre una estructura de datos y extraer sus datos. Por ejemplo, para nuestro Arrayejemplo, eso significaría iterar sobre los datos de la matriz. Si array = [1,2,3,4], itera sobre los valores 1, 2, 3 and 4.
Sin embargo, llevar el concepto de iteración a objetos simples significa mezclar programas y estructuras de datos : Axel

El problema con los objetos simples es la capacidad de todos para crear sus propios objetos.

En el ejemplo de Hugo, ¿cómo distinguiría JavaScript entre el nivel de datos, es decir Hugo.fullName, y el nivel de programa, es decir Hugo.toString()?

Si bien es posible distinguir entre los dos niveles de iteración en estructuras bien definidas Arrays, es imposible hacerlo para cualquier objeto.

Es por esto que tenemos iteración de forma gratuita en Array(también en String, Mapy Set), pero no en los objetos lisos.

Sin embargo, podemos implementar nuestros propios iterables.

Implementar iterables

Podemos construir nuestros propios iterables, aunque usualmente usamos generadores para eso.

Para construir nuestro propio iterable, debemos seguir el protocolo de iteración, que dice:

  • Un objeto se convierte en iterable si implementa una función cuya clave es Symbol.iteratory devuelve un iterator.
  • El iteratormismo es un objeto con una función llamada nextdentro de él. nextdebe devolver un objeto con dos claves valuey done. valuecontiene el siguiente elemento de la iteración y doneuna bandera que dice si la iteración ha terminado.

Ejemplo

Nuestra implementación iterable es muy simple. Hemos seguido el protocolo iterable y en cada iteración el for-ofbucle pedirá al iterador el nextelemento.

Nuestro iterador devolverá nextun objeto que contenga lo siguiente por iteración:

Tenga en cuenta que cambiamos el orden de nuestras propiedades nexty donepor conveniencia. Tener nextprimero, rompería la implementación ya que primero sacaremos un elemento y luego contaremos los elementos.

Es útil saber que doneestá falsepor defecto, lo que significa que podemos ignorarlo cuando ese sea el caso. Lo mismo es cierto para valuecuando donees true.

Eso lo veremos en un minuto.

Iterador como iterable

Podríamos construir nuestro iterador como iterable.

Tenga en cuenta que este es el patrón seguido por los iteradores integrados de ES6.

¿Por qué es esto útil?

Aunque for-ofsolo funciona con iterables, no con iteradores, ser lo mismo significa que podemos pausar la ejecución for-ofy continuar con las posteriores.

Regresar y lanzar

Hay dos métodos de iterador opcionales que aún no hemos explorado:

Regreso

returnle da al iterador la oportunidad de limpiar la casa cuando se rompe inesperadamente. Cuando llamamos returna un iterador, estamos especificando que no planeamos llamar nextmás.

Lanzar

throwsolo se aplica a generadores. Veremos eso cuando juguemos con generadores.

Conclusión

ES6 trae la iteración como una nueva forma de iterar sobre estructuras de datos JavaScript.

Para que la iteración sea posible, hay productores de datos , que contienen los datos, y consumidores de datos, que toman esos datos.

Para que esta combinación funcione sin problemas, la iteración se define mediante un protocolo, que dice:

  • An iterablees un objeto que implementa una función cuya clave es Symbol.iteratory devuelve un iterator.
  • An iteratores un objeto con una función llamada nextdentro de él. nextes un objeto con dos llaves valuey done. valuecontiene el siguiente elemento de la iteración y doneuna bandera que dice si la iteración ha terminado.

Los objetos simples no lo son, iterableya que no hay una manera fácil de distinguir entre el programa y la iteración a nivel de datos.

Es por eso que ES6 ofrece una forma de construir nuestros propios iteradores siguiendo el iteratorprotocolo.

Gracias a ?

  • Axel Rauschmayer por su Exploring ES6 - Iteration
  • Nicolás Bevacqua por su PonyFoo - Iteradores ES6 en profundidad
  • A todos los fans de Los Simpson

Asegúrese de revisar mis otros artículos sobre ES6

Exploremos los generadores ES6

Los generadores son una implementación de iterables. medium.freecodecamp.com