Une introduction aux itérateurs et générateurs en JavaScript

Depuis 2015, EcmaScript6 (ES6) a apporté de nombreuses avancées dans les pratiques de codage JavaScript. De nombreux concepts modernes ont été introduits dans JavaScript, améliorant considérablement l'expérience de codage. Dans cet article, vous découvrirez les itérateurs et les générateurs en JavaScript.

Les itérateurs et les générateurs sont deux concepts différents, mais ils sont utilisés de manière similaire. Ils sont utilisés pour parcourir des tableaux et des objets en JavaScript.

Itérateurs

Les itérateurs sont comme des boucles avancées qui peuvent être mises en pause. Les itérateurs sont constitués de la fonction next() , qui renvoie la valeur et l'état terminé. Le champ value est la valeur du tableau à un index donné. done est la valeur booléenne qui renvoie l'état d'achèvement de l'itération dans la boucle.

Voici un exemple qui montre comment les itérateurs :

 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);

Sortie :

 Mangue

Lorsque vous passez le tableau fruitsArray dans la méthode fruitIter() , il renvoie un itérateur qui est stocké dans la variable fruits . La variable d' index de la méthode fruitIter() est initialisée à 0. Cette méthode renvoie la fonction next() qui permet de parcourir le tableau en boucle . La fonction next() vérifie si l'index est inférieur à la longueur fruitsArray . Si c'est le cas, il renvoie deux variables : le nom du fruit à cet index et l'état terminé . Lors du renvoi de ces valeurs, il incrémente également la valeur de l'index.

Pour vérifier le fonctionnement de cette méthode et imprimer le nom du fruit, vous devez appeler la fonction next() sur l'itérateur de fruits et accéder à sa valeur.

Connexe : Qu'est-ce qu'une fonction dans la programmation ?

Générateurs

Les générateurs sont similaires aux itérateurs mais ils renvoient plusieurs valeurs. Ces valeurs sont appelées valeurs de rendement. Les fonctions génératrices sont écrites à l'aide de la syntaxe function* . * indique que ce n'est pas une fonction normale, mais un générateur. Voici un exemple de générateurs :

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

Sortie :

 {valeur : 'Mango', done : false}

Dans cet exemple, yield est l'itérateur. Lorsque vous appelez la fonction printFruits() et print fruit.next() , cela vous donne un objet dont vous obtenez la valeur. L'état terminé indique si toutes les valeurs ont été itérées.

Apprendre les structures de données à l'aide des classes ES6 en JavaScript

JavaScript ES6 a apporté beaucoup de progrès dans les pratiques de codage. Le moindre n'est pas la construction de structures de données à l'aide des classes ES6. Pousser. pop, et empile ton chemin jusqu'au sommet et deviens un pro de JavaScript !