Générateurs JavaScript

Dans ce didacticiel, vous découvrirez les générateurs JavaScript à l'aide d'exemples.

En JavaScript, les générateurs offrent une nouvelle façon de travailler avec les fonctions et les itérateurs.

À l'aide d'un générateur,

  • vous pouvez arrêter l'exécution d'une fonction de n'importe où à l'intérieur de la fonction
  • et continuer à exécuter le code à partir d'une position arrêtée

Créer des générateurs JavaScript

Pour créer un générateur, vous devez d'abord définir une fonction de générateur avec un function*symbole. Les objets des fonctions génératrices sont appelés générateurs.

 // define a generator function function* generator_function() (… ) // creating a generator const generator_obj = generator_function();

Remarque : La fonction de générateur est désignée par *. Vous pouvez les utiliser function* generatorFunc() (… )ou function *generatorFunc()(… )les créer.

Utilisation de yield pour suspendre l'exécution

Comme mentionné ci-dessus, vous pouvez suspendre l'exécution d'une fonction de générateur sans exécuter l'ensemble du corps de la fonction. Pour cela, nous utilisons le yieldmot - clé. Par exemple,

 // generator function function* generatorFunc() ( console.log("1. code before the first yield"); yield 100; console.log("2. code before the second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next());

Production

 1. code avant le premier rendement (valeur: 100, terminé: faux)

Ici,

  • Un objet générateur nommé generatorest créé.
  • Lorsqu'il generator.next()est appelé, le code jusqu'au premier yieldest exécuté. Quand yieldest rencontré, le programme renvoie la valeur et met en pause la fonction de générateur.

Remarque : vous devez affecter des objets générateurs à une variable avant de l'utiliser.

Fonctionnement de plusieurs déclarations de rendement

L' yieldexpression renvoie une valeur. Cependant, contrairement à l' returninstruction, elle ne met pas fin au programme. C'est pourquoi vous pouvez continuer à exécuter du code à partir de la dernière position cédée. Par exemple,

 function* generatorFunc() ( console.log("1. code before first yield"); yield 100; console.log("2. code before the second yield"); yield 200; console.log("3. code after the second yield"); ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());

Production

 1. code avant le premier rendement (valeur: 100, terminé: faux) 2. code avant le deuxième rendement (valeur: 200, terminé: faux) (valeur: non défini, terminé: vrai)

Voici comment fonctionne ce programme.

  • La première generator.next()instruction exécute le code jusqu'à la première instruction yield et met en pause l'exécution du programme.
  • Le second generator.next()démarre le programme à partir de la position de pause.
  • Lorsque tous les éléments sont accédés, il retourne (valeur: undefined, done: true).
Fonctionnement de la fonction générateur en JavaScript

Passer des arguments aux fonctions du générateur

Vous pouvez également passer des arguments à une fonction de générateur. Par exemple,

 // generator function function* generatorFunc() ( // returns 'hello' at first next() let x = yield 'hello'; // returns passed argument on the second next() console.log(x); console.log('some code'); // returns 5 on second next() yield 5; ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next(6)); console.log(generator.next());

Production

 (valeur: "bonjour", fait: faux) 6 du code (valeur: 5, fait: faux) (valeur: undefined, done: true)

Dans le programme ci-dessus,

  • Le premier generator.next()renvoie la valeur de yield(dans ce cas, «bonjour»). Cependant, la valeur n'est pas affectée à la variable x danslet x = yield 'hello'; 
     (valeur: "bonjour", terminé: faux)
  • Quand generator.next(6)est rencontré, le code recommence à let x = yield 'hello';et l'argument 6 est affecté à x. De plus, le code restant est exécuté jusqu'à la seconde yield. 
     6 du code (valeur: 5, terminé: faux)
  • Lorsque le troisième next()est exécuté, le programme renvoie (valeur: indéfini, terminé: vrai). C'est parce qu'il n'y a pas d'autres instructions de rendement. 
     (valeur: undefined, done: true)

Les générateurs sont utilisés pour mettre en œuvre des itérables

Les générateurs fournissent un moyen plus simple d'implémenter des itérateurs.

Si vous souhaitez implémenter un itérateur manuellement, vous devez créer un itérateur avec la next()méthode et enregistrer l'état. Par exemple,

 // creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) for (const i of iterableObj) ( console.log(i); )

Production

 1 2 3

Étant donné que les générateurs sont itérables, vous pouvez implémenter un itérateur de manière plus simple. Ensuite, vous pouvez parcourir les générateurs en utilisant la for… ofboucle. Par exemple,

 // generator function function* generatorFunc() ( yield 1; yield 2; yield 3; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )

Méthodes du générateur

Méthode La description
next() Renvoie une valeur de yield
return() Renvoie une valeur et termine le générateur
throw() Lève une erreur et met fin au générateur

JavaScript return Vs yield Keyword

retourner le mot-clé Mot clé de rendement
Renvoie la valeur et met fin à la fonction. Renvoie la valeur et interrompt la fonction mais ne termine pas la fonction.
Disponible dans les fonctions normales et les fonctions du générateur. Disponible uniquement dans les fonctions du générateur.

Fonction de générateur JavaScript avec retour

You can use the return statement in a generator function. The return statement returns a value and terminates the function (similar to regular functions). For example,

 // generator function function* generatorFunc() ( yield 100; return 123; console.log("2. some code before second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());

Output

 (value: 100, done: false) (value: 123, done: true) (value: undefined, done: true)

In the above program, when the return statement is encountered, it returns the value and done property becomes true, and the function terminates. Hence, the next() method after the return statement does not return anything.

Note: You can also use the return() method instead of the return statement like generator.return(123); in the above code.

JavaScript Generator Throw Method

Vous pouvez explicitement lancer une erreur sur la fonction de générateur en utilisant la méthode throw (). L'utilisation de la throw()méthode génère une erreur et met fin à la fonction. Par exemple,

 // generator function function* generatorFunc() ( yield 100; yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); // throws an error // terminates the generator console.log(generator.throw(new Error('Error occurred.'))); console.log(generator.next());

Production

 (valeur: 1, terminé: faux) Erreur: une erreur s'est produite.

Utilisations des générateurs

  • Les générateurs nous permettent d'écrire du code plus propre tout en écrivant des tâches asynchrones.
  • Les générateurs fournissent un moyen plus simple d'implémenter des itérateurs.
  • Les générateurs n'exécutent son code que lorsque cela est nécessaire.
  • Les générateurs sont efficaces en mémoire.

Les générateurs ont été introduits dans ES6 . Certains navigateurs peuvent ne pas prendre en charge l'utilisation de générateurs. Pour en savoir plus, visitez le support des générateurs JavaScript.

Articles intéressants...