Introducción a los iteradores y generadores en JavaScript

Desde 2015, EcmaScript6 (ES6) ha traído muchos avances en las prácticas de codificación de JavaScript. Se introdujeron numerosos conceptos modernos en JavaScript, lo que mejoró enormemente la experiencia de codificación. En este artículo, aprenderá sobre iteradores y generadores en JavaScript.

Los iteradores y los generadores son dos conceptos diferentes, pero se usan de manera similar. Se utilizan para iterar a través de matrices y objetos en JavaScript.

Iteradores

Los iteradores son como bucles avanzados que se pueden pausar. Los iteradores consisten en la función next () , que devuelve el valor y el estado de hecho. El campo de valor es el valor de la matriz en un índice determinado. done es el valor booleano que devuelve el estado de finalización de la iteración a través del ciclo.

Aquí hay un ejemplo que demuestra cómo los iteradores:

 function fruitIter(fruits){
 let index = 0;
 return {
 next: function(){
 return index < fruits.length ? { value: fruits[index++], done: false } : {done: true}
 }
 }
 }
 const fruitsArray = ["Mango", "Banana", "Grapes"];
 const fruits = fruitIter(fruitsArray);
 console.log(fruits.next().value);

Salida :

 Mango

Cuando pasa la matriz fruitsArray en el método fruitIter () , devuelve un iterador que se almacena en la variable frutas . La variable de índice en el método fruitIter () se inicializa a 0. Este método devuelve la función next () que ayuda a recorrer la matriz . La función next () comprueba si el índice es menor que la longitud de fruitsArray . Si es así, devuelve dos variables: el nombre de la fruta en ese índice y el estado de hecho . Al devolver estos valores, también incrementa el valor del índice.

Para comprobar cómo funciona este método e imprimir el nombre de la fruta, debe llamar a la función next () en el iterador de frutas y obtener acceso a su valor.

Relacionado: ¿Qué es una función en la programación?

Generadores

Los generadores son similares a los iteradores pero devuelven varios valores. Estos valores se denominan valores de rendimiento. Las funciones generadoras se escriben utilizando la sintaxis de función * . * denota que no es una función normal, sino un generador. Aquí hay un ejemplo de generadores:

 function* printFruits(){
 yield "Mango";
 yield "Banana";
 yield "Grapes";
 }
 const fruit = printFruits();
 console.log(fruit.next());

Salida :

 {valor: 'Mango', hecho: falso}

En este ejemplo, el rendimiento es el iterador. Cuando llamas a la función printFruits () e imprimes fruit.next () , te da un objeto donde obtienes el valor. El estado hecho indica si se han iterado todos los valores.

Aprenda estructuras de datos usando clases de ES6 en JavaScript

JavaScript ES6 trajo muchos avances en las prácticas de codificación. No menos importante es la construcción de estructuras de datos utilizando clases ES6. Empujar. pop, y apile su camino hacia la cima y conviértase en un profesional de JavaScript!