Header Ads Widget

Ticker

6/recent/ticker-posts

Iteradores en ES6

 


Los iteradores son una característica nueva importante en ES6 y ya se utilizan ampliamente. Los iteradores se utilizan para evaluaciones perezosas o en casos en los que se necesita describir una secuencia infinita. Pronto veremos los generadores, y es útil tener una comprensión de los iteradores antes de hacerlo. De hecho, los iteradores son un requisito previo para los generadores, promesas, conjuntos y mapas. Veamos los conceptos básicos de los iteradores aquí y pongámonos al día con ellos.


Introducción a los iteradores

ES6 ahora tiene lo que se conoce como protocolo iterable. Es un protocolo que define el comportamiento de iteración de los objetos JavaScript. Un objeto iterable tiene un método iterador con la clave Symbol.iterator que devuelve un objeto iterador. Veamos cómo.

Aquí tenemos una matriz simple de números y esto se almacena en la variable numbersResulta que las matrices en ES6 ahora tienen una propiedad especial a la que se puede acceder con la notación de corchetes que vemos aquí. De hecho, el nombre de la propiedad es un símbolo, que también es otra característica nueva en ES6. Los símbolos son solo una forma de garantizar un valor único. Cuando desconectamos el tipo de esta propiedad, es una función. ¡Interesante! Vayamos un poco más lejos.

Así que échale un vistazo. Dado que Symbol.iterator es una función , eso significa que podemos llamarla . Eso es exactamente lo que hacemos en la línea 2 justo arriba. Asignamos este resultado a la itervariable, que es nuestro iterador. Ese iterador tiene algunas funciones especiales asociadas. En este ejemplo, llamamos .next()al iterador y nuestro resultado es un objeto especial que tiene dos propiedades de valuedoneVemos en este momento, el valor está 100está hechofalse . Esto hace que desde que estamos en el primer elemento de la matriz, y nuestro iterador no haya pasado por todos los valores. Veamos ahora varias llamadas al iterador.

Cada llamada a .next()produce el siguiente valor en la matriz. Curiosamente, la donepropiedad todavía está configurada a falsepesar de que estamos en el tercer y último valor. Hmmm. Hagamos otra llamada a .next().

En la N + 1ª vez que llamamos a la .next()función en función del tamaño de la matriz, alcanzaremos un doneestado de trueen el objeto iterador. En este punto value, se establecerá en undefinedEn otras palabras, si tiene una matriz con un tamaño de 3, necesitaría llamar .next()cuatro veces para agotar el iterador.


Creando su propio iterador

Los iteradores están integrados en matrices, pero podemos personalizar un iterador si lo deseamos. Crearemos un objeto literal llamado numberGeny le daremos una propiedad de [Symbol.iterator] similar a cómo las matrices tienen esa propiedad. Luego, tenemos una variable local nextNumestablecida en 500 y devolvemos una función llamada next () que devuelve un objeto iterador que tiene nuestras propiedades valuedoneCuando ejecutamos el código y hacemos un par de llamadas a .next(), podemos ver el valor inicial de 500 y el siguiente valor de 501. Cada llamada a .next()se incrementará en uno. ¡Muy genial!


Formato general del iterador de objetos

Un objeto iterable tiene un método iterador con la clave Symbol.iterator . Este método devuelve un objeto iterador y podemos ver la sintaxis general de este concepto aquí.


Usando un iterador con for of

Usando el objeto iterador que acabamos de crear, podemos implementar un for ofciclo para recorrer una lista de valores. Configuramos una variable valuedentro del for of, y en cada iteración tomaremos el siguiente valor del iterador. Configuramos una verificación y examinamos si el valor del iterador recuperado es mayor que 505 y, de ser así, cancelamos el ciclo. Ejecutar el código nos da el resultado que esperamos. Este iterador no tiene lógica para alcanzar un estado agotado como el iterador integrado en arreglos, pero transmite la idea. Si no configuramos algún tipo de condición de terminación, este iterador iteraría para siempre, y eso es mucho tiempo.


Arreglando nuestro iterador para soportar el agotamiento

Normalmente, no necesitaría poner manualmente una marca dentro del ciclo para evitar que vaya al infinito al trabajar con iteradores. Podemos agregar algo de lógica simple a nuestra iteración anterior (juego de palabras no intencionado), de modo que termine automáticamente una vez que finalice la colección. Veamos cómo hacerlo.


Usar el operador de propagación con iteradores

En nuestra lección anterior sobre parámetros de descanso y operadores de extensión, decimos cómo utilizar el operador de extensión para extender una matriz de valores para pasar a una función. El operador de propagación funciona con un iterador. En este ejemplo, numberses una matriz, pero también podría ser un objeto iterable. Por lo tanto, los números se repiten y los parámetros a procesar se asignarán a cada valor.


Varios iteradores en el mismo objeto iterable

Aquí crearemos un objeto de conteo, que simplemente cuenta de 0 a 3 usando iteradores.

Nuevamente, observe que el estado de la iteración se mantiene cada vez. En este ejemplo anterior, estamos adoptando un enfoque ligeramente diferente y estamos haciendo uso de Object.assignLo que hace esto es hacer una copia superficial del objeto iterador cada vez que se devuelve un iterador desde la función. Al utilizar este enfoque, puede tener varios iteradores en el mismo objeto iterable, cada uno con su propio estado interno. Si no lo usáramos Object.assign, solo habría varias referencias al mismo objeto iterador exacto.


Más discusión sobre el iterador

Symbol.iteratores lo que se conoce como un símbolo muy conocido . Los ejemplos que hemos visto hasta ahora han utilizado Symbol.iterator para describir un objeto iterable. Estamos adoptando este enfoque simplemente para comprender cómo funcionan los iteradores. Por lo general, no necesitará usar Symbol.iterator en su código. En su lugar, puede crear un ArrayIterator llamando al entries()método de una matriz. En el caso de los objetos, ArrayIterator produce una matriz de [key, value]durante cada iteración. Las cadenas también se pueden manejar como matrices utilizando el operador de extensión.


Iteradores con conjuntos y mapas

Hay un entries()método disponible para usar con conjuntos y mapas. La estructura de datos del mapa en ES6 le permite usar valores arbitrarios como claves y la estructura de datos del conjunto le permite almacenar valores únicos de cualquier tipo, ya sean valores primitivos o referencias a objetos. También puede usar el método keysvaluesen un conjunto o mapa para crear un iterador / iterable de las claves o valores. Eche un vistazo a este ejemplo aquí para ver cada uno de estos métodos en uso.

Los conjuntos y mapas son iterables por derecho propio, por lo que ni siquiera es necesario crear estos iteradores con el método de claves, valores o entradas. Dado que los conjuntos y los mapas son iterables, se pueden usar en for-ofbucles como se ve aquí.


Resumen de iteradores en ES6

Los iteradores en ES6 son una adición bienvenida a ES6. A menudo los encontrará en el contexto de generadores, promesas, mapas y conjuntos. Aquí hay un resumen de nuestro aprendizaje sobre Iterables en ES6.

  • Las matrices son iterables, a menudo se usan con for-ofloop
  • Las cadenas son iterables como matrices de caracteres de 2 a 4 bytes
  • Las estructuras de datos DOM son iterables
  • Los mapas y los conjuntos son iterables
  • El for-ofbucle y el operador Spread son consumidores de datos: consumen datos iterables
  • Las estructuras de datos iterables como matrices, cadenas, mapas, conjuntos y el dom son fuentes de datos
  • El protocolo iterable especifica cómo conectar a los consumidores de datos con las fuentes de datos.
  • Los objetos iterables se crean de acuerdo con el protocolo iterable. Los objetos iterables pueden crear objetos iteradores que faciliten la iteración en su fuente de datos y preparar el resultado para un consumidor de datos.



Publicar un comentario

0 Comentarios