Explication détaillée du générateur Generator en Javascript

Qu'est-ce qu'un générateur ?

Un générateur est un code qui s'exécute à l'intérieur d'une fonction

• Après avoir renvoyé une valeur, il se met en pause et -

• L'appelant peut demander de reprendre la pause et de renvoyer une autre valeur

Ce "retour" n'est pas une fonction esclave traditionnellereturn. On lui a donc donné un nom spécial - yield.

La syntaxe du générateur varie d'une langue à l'autre. La syntaxe du générateur Javascript est similaire à celle de PHP, mais elle est suffisamment différente pour que si vous vous attendez à ce qu'ils fassent la même chose, vous finirez par être très confus.

En javascript, si vous souhaitez utiliser un générateur, vous devez :

• Définir une fonction spéciale générateur

• Appeler cette fonction pour créer un objet générateur

• Utiliser cet objet générateur en boucle, ou appeler directement sa méthode next

nous Take le programme simple suivant comme point de départ et effectuez chacune des étapes suivantes :

// File: sample-program.js
function *createGenerator() {
  for(let i=0;i<20;i++) {
    yield i
  }
}

const generator = createGenerator()

console.log(generator.next())
console.log(generator.next())

Si vous exécutez ce code, vous obtiendrez le résultat suivant :

$ node sample-program.js

{ value: 0, done: false }
{ value: 1, done: false }

Laissez-moi vous expliquer le programme ci-dessous. Comment Ça marche.

Fonction générateur

Tout d'abord, il y a une définition de la fonction générateur dans le code :

function* createGenerator() {
  for(let i=0;i<20;i++) {
    yield i
  }
}

function Ce qui suit * indique javascript c'est une fonction génératrice. Les écrits suivants sont tous des définitions valides des fonctions génératrices.

function*createGenerator
function* createGenerator
function *createGenerator

* et ne font pas partie du nom de la fonction . Au lieu de cela, le symbole function* définit le générateur.

Appelez la fonction génératrice

Après avoir défini la fonction génératrice, nous la nommons une fonction avec un autre nom.

// 注意：当调用时，没有 *。 * 不是函数名称的一部分
// `function *` 是用于定义生成器函数的符号
const generator = createGenerator()

Mais rappelez-vous : createGenerator la fonction n'a pas de valeur de retour. En effet, les fonctions génératrices n'ont pas de valeurs de retour traditionnelles. En revanche, lorsque vous appelez directement une fonction génératrice, elle toujours renvoie un Generator objet instancié.

Cet objet générateur a une méthode next. L’appel de next exécutera le code dans la fonction génératrice.

function* createGenerator() {
    for(let i=0;i<20;i++) {
        yield i
    }
}

C'est suffisamment important pour le rappeler. L’appel direct d’une fonction génératrice n’exécute aucun code dans la fonction génératrice. Créez plutôt un objet générateur. Il appelle next sur l'objet générateur, qui appelle le code dans la fonction générateur.

La première fois que next est appelé sur un objet générateur, le code interne s'exécutera jusqu'à ce que l'instruction yield apparaisse. Une fois que l'exécution atteint yield, javascript mettra en pause l'exécution de ce code, et next renverra (c'est-à-dire, vous donnera, ou yield) un objet contenant le code dans la ligne yield valeur.

Lorsque vous appelez next une deuxième fois (ou une troisième, quatrième fois ou même plus), le code reprendra la pause et continuera à fonctionner (là où il s'était arrêté lors du dernier appel). La variable (telle que i dans cet exemple) conservera sa valeur. Lorsque le code atteint une autre instruction yield, la fonction s'arrête à nouveau et renvoie un objet contenant la valeur de rendement.

C'est pourquoi nous devons appeler next

console.log(generator.next())
console.log(generator.next())

deux fois et nous obtiendrons le résultat suivant :

{ value: 0, done: false }
{ value: 1, done: false }

Une fois le code dans la fonction génératrice exécuté, le futur renvoie un objet avec la valeur nextundefined et défini sur done. true

{ value: undefined, done: true }

Générateurs et boucles

Bien qu'il soit possible d'appeler

manuellement sur un objet générateur, nous allons principalement l'utiliser en boucle. Jetez un œil à ce programme légèrement modifié. next

// File: sample-program.js
@highlightsyntax@jscript
function *createGenerator() {
  for(let i=0;i<5;i++) {
    yield i
  }
}

const generator = createGenerator()
for(const value of generator) {
  console.log(value)
}

Lors de l'utilisation d'un objet générateur à l'intérieur d'une boucle

, chaque boucle appellera for...of sur l'objet générateur et remplira la variable (next ci-dessus) avec la valeur résultante. L'exécution de ce programme affichera ce qui suit : value

$ node sample-program.js
0
1
2
3
4

Dans le prochain article, nous examinerons de plus près les boucles

et explorerons comment javascript peut être fourni avec un moyen intégré de boucler sur n'importe quel objet dans javascript for ... of

Adresse originale en anglais : https://alanstorm.com/javascript-generators/

Auteur : Alan Storm

Adresse de traduction : https://segmentfault .com/a/1190000023924834

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!