Générateurs en JavaScript | Expliqué avec des exemples
JavaScript propose souvent des solutions pour divers problèmes, en particulier avec l'arrivée de la version ES6 de JavaScript. L'une des caractéristiques clés introduites dans ES6 était les générateurs, les générateurs en JavaScript sont utilisés avec des itérateurs pour créer un flux de données ou un flux de données. Les générateurs nous aident à éviter les problèmes de fonction de rappel.
Ce qui sont réellement des générateurs
En termes simples, les générateurs sont des fonctions spéciales; Contrairement aux fonctions normales qui n'ont qu'une seule instruction de retour, les générateurs renvoient plusieurs valeurs, mais à des moments différents.
Pour être plus descriptif, les générateurs sont des fonctions qui renvoient la valeur qui donne une valeur et une pause.
Pendant cette pause, le programme peut fonctionner sur d'autres fonctionnalités, puis lorsque nous sommes nécessaires, le générateur est invité à renvoyer la valeur suivante, mais plutôt que de redémarrer toute la fonction, le générateur s'étend à partir du point où il s'est arrêté et donne le Valeur suivante. Ainsi, créant un flux constant de données. C'est pourquoi ces fonctions sont appelées «générateurs» car ils sont utilisés pour générer le flux de données.
Nous pouvons examiner les diagrammes de travail suivants pour mieux comprendre la différence entre les fonctions normales et générateurs:
Et la fonction du générateur fonctionne comme ceci:
Comment définir une fonction de générateur?
Étant donné que les fonctions du générateur sont des fonctions spéciales, c'est pourquoi nous utilisons un mot-clé spécial tout en les définissant "fonction*" - astérisque après le mot clé de la fonction. La syntaxe est comme:
fonction * functionname (params)// corps de la fonction
valeur de rendement;
'
Note:
- Fonction *: mot-clé pour définir les fonctions du générateur
- FonctionName: l'identifiant de cette fonction
- Paramètres: paramètres facultatifs que vous souhaitez utiliser
- Rendement: renvoie la valeur et arrête l'exécution de la fonction
Valeur de retour: Objet [générateur] - un objet générateur OU non défini si le générateur est vide
Nous connaissons maintenant ce qu'est une fonction de générateur, mais nous ne connaissons toujours pas son type de retour qui est «l'objet générateur».
Qu'est-ce qu'un objet générateur?
Lorsqu'une fonction de générateur est créée, il renvoie un objet que nous devons initialiser dans une variable, cette variable est alors connue sous le nom d'objet générateur. Cet objet générateur est utilisé pour obtenir la valeur suivante de la fonction.
Syntaxe d'initialiser un objet générateur
variable = générateur de nom (arguments);Après avoir créé l'objet générateur, vous pouvez utiliser la fonction "objet.suivant()"
Le objet.suivant() Renvoie un objet JSON avec deux propriétés, l'une est la «valeur» et l'autre est la «fait" propriété.
Obtenir des valeurs d'une fonction de générateur
Créons une fonction de générateur simple qui nous renverra une nouvelle valeur à chaque fois qu'elle est appelée, avec les lignes de code suivantes:
fonction * générateur ()rendement 1;
rendement "trouvé";
rendement 3;
Maintenant que nous avons un générateur, nous devons l'initialiser avec un objet générateur, nous le faisons avec l'instruction suivante:
const GenObject = Generator ();Maintenant, nous avons également l'objet générateur. Tout ce que nous avons à faire maintenant est d'appeler le suivant() fonction de l'objet générateur et imprimez l'objet JSON avec le console.enregistrer() fonction.
console.log (GenObject.suivant());console.log (GenObject.suivant());
console.log (GenObject.suivant());
L'extrait de code complet ressemble à ceci:
fonction * générateur ()rendement 1;
rendement "trouvé";
rendement 3;
const GenObject = Generator ();
console.log (GenObject.suivant());
console.log (GenObject.suivant());
console.log (GenObject.suivant());
Nous obtenons la sortie suivante:
Comme vous pouvez le voir, nous avons imprimé 3 objets JSON différents avec 3 appels différents vers la même fonction de générateur. Mais, parfois, nous voulons utiliser la valeur, pas l'objet JSON. Nous pouvons le faire en accédant au valeur propriété de l'objet JSON avec la ligne de code suivante:
console.log (GenObject.suivant().valeur);console.log (GenObject.suivant().valeur);
console.log (GenObject.suivant().valeur);
Avec ces lignes, nous obtenons la sortie suivante:
Comme vous pouvez le voir, le objet.suivant().valeur nous renvoie une valeur que nous pouvons même transmettre à une autre fonction.
Fonctionnement de la fonction du générateur dans l'exécution de code simultanée
Pour ce tutoriel, créons une fonction de générateur simple qui donnera des nombres de 1 à 5 et après chaque numéro que nous récupérons à partir du générateur, notre programme nous alertera qu'il fait des calculs sur ce nombre et a quitté la fonction du générateur.
La première étape consiste à créer une fonction de générateur qui donnera 5 nombres différents sur 5 appels différents avec les lignes de code suivantes:
fonction * générateur ()console.log ("fonction du générateur initialisé");
pour (soit i = 1; i <= 5; i++)
console.Log ("Générateur intérieur pour le nouveau rendement");
rendement i;
Comme vous pouvez le voir, nous avons créé une boucle qui renverra 1 nouvel entier sur chaque appel de rendement du générateur et nous invitera chaque fois que le programme se trouve à l'intérieur de la fonction du générateur.
Maintenant, nous devons initialiser cette fonction de générateur avec l'objet générateur avec la ligne de code suivante.
const GenObject = Generator ();Maintenant, nous avons besoin d'une fonction qui fera un travail sur les valeurs cédées, créez la fonction à l'aide des lignes suivantes:
fonction TablePprinter (num)console.log ('imprimant actuellement le tableau de:' + num);
Nous avons une fonction de générateur, un objet générateur et une fonction qui fonctionnera sur certaines valeurs qui sont passées à l'intérieur. Maintenant, tout ce dont nous avons besoin est un itérateur qui iratera à travers l'objet générateur et transmettra les valeurs à la fonction. Nous le faisons en utilisant les lignes de code suivantes:
donné de valeur = GenObject.suivant().valeur;tandis que (cédévalue)
TABLEPRINTER (RendedValue);
donné de valeur = GenObject.suivant().valeur;
Ce que ce code fera, c'est qu'il prendra la valeur suivante du générateur et la stockera dans une variable. Ensuite, dans la boucle while, il vérifiera si la variable n'est pas définie ou non, et s'il n'est pas non défini, il passera cette valeur à la fonction "TablePrinter ” et passez à la valeur suivante.
L'extrait de code complet est comme:
fonction * générateur ()console.log ("fonction du générateur initialisé");
pour (soit i = 1; i <= 5; i++)
console.Log ("Générateur intérieur pour le nouveau rendement");
rendement i;
const GenObject = Generator ();
fonction TablePprinter (num)
console.log ('imprimant actuellement le tableau de:' + num);
donné de valeur = GenObject.suivant().valeur;
tandis que (cédévalue)
TABLEPRINTER (RendedValue);
donné de valeur = GenObject.suivant().valeur;
La sortie du code suivant est:
Comme vous pouvez le voir, le programme entre dans la fonction du générateur et donne une nouvelle valeur, enregistre les états, pause l'exécution de la fonction, entre à l'intérieur du «TablePrinter ” fonction, et effectue l'exécution là-bas. Une fois terminé, il revient à l'intérieur de la fonction du générateur pour un nouveau rendement. Tout ce processus est répété jusqu'à ce que le générateur continue de produire de nouveaux rendements. Ainsi, ce qui en fait un flux de données.
C'est tout pour les générateurs en javascript.
Conclusion
Les générateurs sont des fonctions spéciales qui peuvent arrêter leur exécution à mi-chemin pour donner une valeur, sauver leur état et permettre au programme d'effectuer d'autres tâches. En cas de besoin, la fonction du générateur "CV » leur exécution de l'État dans lequel ils s'arrêtaient. Les générateurs sont utilisés pour générer un flux constant de données. Ils sont utilisés en collaboration avec les promesses et les itérateurs pour créer un flux infini de données et pour éviter les problèmes de fonction de rappel.