ES6 a introduit les fonctions génératrices, qui peuvent suspendre le flux d'exécution d'une fonction grâce au mot-clé `yield`, ce qui permet de modifier le flux d'exécution et fournit ainsi une solution pour la programmation asynchrone. Utilisation de base

Composition de fonctions génératrices

Un générateur possède deux parties qui le distinguent des fonctions ordinaires :

  • La première est qu'après `function` et avant le nom de la fonction, il y a un `*` ;

  • À l'intérieur de la fonction, il y a une expression `yield`.

Parmi eux, `*` sert à indiquer que la fonction est une fonction génératrice, et `yield` sert à définir l'état interne de la fonction.

function* func(){ console.log("one"); yield '1'; console.log("two"); yield '2'; console.log("three"); return '3'; }

Mécanisme d'exécution

Appeler une fonction génératrice revient au même que d'appeler une fonction ordinaire : il suffit d'ajouter des parenthèses après le nom de la fonction. Cependant, une fonction génératrice ne s'exécute pas immédiatement comme une fonction ordinaire ; au lieu de cela, elle renvoie un pointeur vers un objet d'état interne. Par conséquent, pour appeler la méthode `next` de l'objet itérateur, le pointeur commencera à s'exécuter depuis le début de la fonction ou depuis l'endroit où il s'est arrêté la dernière fois.

f.next(); // one // {value: "1", done: false} f.next(); // two // {value: "2", done: false} f.next(); // three // {value: "3", done: true} f.next(); // {value: undefined, done: true}

Lors du premier appel de la méthode `next`, l'exécution commence au début de la fonction génératrice. D'abord elle affiche `one`, puis s'arrête en atteignant `yield`, et utilise la valeur de l'expression après `yield`, `'1'`, comme propriété `value` de l'objet renvoyé. À ce stade, la fonction n'a pas terminé son exécution, donc la propriété `done` de l'objet renvoyé est `false`.

Lors du deuxième appel de la méthode `next`, c'est la même chose que l'étape précédente.

Lors du troisième appel de la méthode `next`, elle affiche d'abord `three`, puis effectue l'opération de retour de la fonction, et utilise la valeur de l'expression après `return` comme propriété `value` de l'objet renvoyé. À ce stade, la fonction est terminée, donc la valeur de la propriété `done` est `true`.

Lors du quatrième appel de la méthode `next`, la fonction a déjà fini de s'exécuter, donc elle renvoie `undefined` comme valeur de la propriété `value` et `true` comme valeur de la propriété `done`. S'il n'y avait pas d'instruction `return` lors de la troisième étape, elle renverrait directement `{value: undefined, done: true}`.

Méthodes de l'objet itérateur renvoyé par la fonction

méthode `next`

En général, lorsque la méthode `next` est appelée sans arguments, la valeur de retour de l'expression `yield` est `undefined`. Lorsqu'un argument est passé à `next`, cet argument sert de valeur de retour du `yield` précédent.

function* sendParameter(){ console.log("start"); var x = yield '2'; console.log("one:" + x); var y = yield '3'; console.log("two:" + y); console.log("total:" + (x + y)); }

Appel de `next` sans arguments

var sendp1 = sendParameter(); sendp1.next(); // start // {value: "2", done: false} sendp1.next(); // one:undefined // {value: "3", done: false} sendp1.next(); // two:undefined // total:NaN // {value: undefined, done: true} nextPassage d’argumentsvar sendp2 = sendParameter(); sendp2.next(10); // start // {value: "2", done: false} sendp2.next(20); // one:20 // {value: "3", done: false} sendp2.next(30); // two:30 // total:50 // {value: undefined, done: true}

En plus d’utiliser `next`, vous pouvez également utiliser une boucle `for...of` pour parcourir l’objet Iterator généré par une fonction génératrice.

méthode `return`

La méthode `return` renvoie la valeur donnée et met fin à l’itération de la fonction génératrice.

Lorsque la méthode `return` reçoit un argument, elle renvoie cet argument ; lorsqu’aucun argument n’est fourni, elle renvoie `undefined`.

function* foo(){ yield 1; yield 2; yield 3; } var f = foo(); f.next(); // {value: 1, done: false} f.return("foo"); // {value: "foo", done: true} f.next(); // {value: undefined, done: true} throwMéthodethrowLa méthode peutGeneratorlever une exception en dehors du corps de la fonction, et l'attraper à l'intérieur du corps de la fonction.var g = function* () { try { yield; } catch (e) { console.log('catch inner', e); } }; var i = g(); i.next(); try { i.throw('a'); i.throw('b'); } catch (e) { console.log('catch outside', e); } // catch inner a // catch outside b

L'objet itérateur lève deux erreurs. La première est interceptée à l'intérieur de la fonction Generator. La seconde, parce que le `catch` à l'intérieur du corps de la fonction a déjà été exécuté, ne sera pas interceptée à nouveau, donc cette erreur est levée en dehors du corps de la fonction Generator et interceptée par le `catch` à l'extérieur du corps de la fonction.

Expression `yield*`

L'expression `yield*` signifie que `yield` renvoie un objet itérateur, qui est utilisé pour appeler une autre fonction génératrice à l'intérieur d'une fonction génératrice.

function* callee() { console.log('callee: ' + (yield)); } function* caller() { while (true) { yield* callee(); } } const callerObj = caller(); callerObj.next(); // {value: undefined, done: false} callerObj.next("a"); // callee: a // {value: undefined, done: false} callerObj.next("b"); // callee: b // {value: undefined, done: false} //Équivalent à function* caller() { while (true) { for (var value of callee) { yield value; } } }

Cas d'utilisation

Implémentation d'un Iterator

Fournit une méthode de parcours pour les objets qui n'ont pas d'interface Iterator.

function* objectEntries(obj) { const propKeys = Reflect.ownKeys(obj); for (const propKey of propKeys) { yield [propKey, obj[propKey]]; } } const jane = { first: 'Jane', last: 'Doe' }; for (const [key,value] of objectEntries(jane)) { console.log(`${clé}: ${valeur}`); } // first: Jane // last: Doe

`Reflect.ownKeys()` renvoie toutes les propriétés d'un objet, que les propriétés soient énumérables ou non, y compris les Symboles.

`jane` ne possède pas nativement d'interface Iterator et ne peut pas être parcouru avec `for...of`. Ici, une fonction Generator est utilisée pour ajouter une interface Iterator, afin que l'objet `jane` puisse être parcouru.