Explication détaillée des connaissances Generator_Basic dans JavaScript ES6

Je suis vraiment enthousiasmé par la nouvelle fonctionnalité dont nous discutons aujourd’hui car c’est la fonctionnalité la plus étonnante d’ES6.

Que signifie « magique » ici ? Pour les débutants, cette fonctionnalité est complètement différente des précédents JS, et même un peu obscure. C'est « magique » dans le sens où cela change complètement le comportement normal de la langue.

Non seulement cela, cette fonctionnalité peut également simplifier le code du programme et transformer la « pile de rappel » complexe en une forme d'exécution en ligne droite.

Est-ce que j'en ai trop exposé ? Commençons par une introduction approfondie, et vous pourrez juger par vous-même.
Présentation

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

Regardez le code ci-dessous :

function* quips(name) {
 yield "hello " + name + "!";
 yield "i hope you are enjoying the blog posts";
 if (name.startsWith("X")) {
  yield "it's cool how your name starts with X, " + name;
 }
 yield "see you later!";
}
 
function* quips(name) {
 yield "hello " + name + "!";
 yield "i hope you are enjoying the blog posts";
 if (name.startsWith("X")) {
  yield "it's cool how your name starts with X, " + name;
 }
 yield "see you later!";
}

Le code ci-dessus fait partie de l'imitation de Talking cat (une application très populaire en ce moment), Cliquez ici pour l'essayer, si vous n'êtes pas sûr du code, alors revenez ici Voir explication ci-dessous.

Cela ressemble beaucoup à une fonction, appelée fonction Générateur. Elle a beaucoup en commun avec nos fonctions communes, mais vous pouvez également voir les deux différences suivantes :

Les fonctions normales commencent par function, mais les fonctions Generator commencent par function*.
Dans la fonction Generator, rendement est un mot-clé, quelque peu similaire à return. La différence est que toutes les fonctions (y compris les fonctions Générateur) ne peuvent retourner qu'une seule fois, alors que dans les fonctions Générateur, vous pouvez produire un nombre illimité de fois. L'expression de rendement met en pause l'exécution de la fonction Générateur, et l'exécution peut ensuite reprendre là où elle a été interrompue.

Les fonctions communes ne peuvent pas suspendre l'exécution, mais les fonctions du générateur le peuvent.
Principe

Que se passe-t-il lorsque quips() est appelé ?

> var iter = quips("jorendorff");
 [object Generator]
> iter.next()
 { value: "hello jorendorff!", done: false }
> iter.next()
 { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
 { value: "see you later!", done: false }
> iter.next()
 { value: undefined, done: true }

 
> var iter = quips("jorendorff");
 [object Generator]
> iter.next()
 { value: "hello jorendorff!", done: false }
> iter.next()
 { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
 { value: "see you later!", done: false }
> iter.next()
 { value: undefined, done: true }

Nous connaissons très bien le comportement des fonctions ordinaires. Lorsqu'une fonction est appelée, elle s'exécute immédiatement jusqu'à ce qu'elle renvoie ou lève une exception. C'est une seconde nature pour tous les programmeurs JS.

La méthode d'appel de la fonction Générateur est la même que la fonction ordinaire : quips("jorendorff"), mais lors de l'appel d'une fonction Générateur, elle n'est pas exécutée immédiatement, mais un objet Générateur (iter dans le code ci-dessus) est retourné. À ce moment, la fonction Pause immédiatement sur la première ligne du code de fonction.

Chaque fois que la méthode .next() d'un objet Generator est appelée, la fonction commence à s'exécuter jusqu'à ce que la prochaine expression de rendement soit rencontrée.

C'est pourquoi nous obtenons une chaîne différente à chaque fois que nous appelons iter.next(), ce sont les valeurs produites par l'expression de rendement à l'intérieur de la fonction.

Lorsque le dernier iter.next() est exécuté, la fin de la fonction Generator est atteinte, donc la valeur de la propriété .done du résultat renvoyé est vraie et la valeur de la propriété .value n'est pas définie.

Maintenant, revenez à la DÉMO Talking cat et essayez d'ajouter des expressions de rendement au code et voyez ce qui se passe.

Techniquement parlant, chaque fois que l'exécution de la fonction Générateur rencontre une expression de rendement, le cadre de pile de la fonction : les variables locales, les paramètres de fonction, les valeurs temporaires et la position d'exécution actuelle sont supprimés de la pile, mais l'objet Générateur reste La référence à l'objet Générateur. le cadre de pile est supprimé, donc la prochaine fois que la méthode .next() sera appelée, vous pourrez reprendre et continuer l'exécution.

Il convient de rappeler que Generator n'est pas multithread. Dans un langage prenant en charge le multithreading, plusieurs morceaux de code peuvent être exécutés en même temps, ce qui s'accompagne d'une concurrence pour les ressources d'exécution, d'une incertitude dans les résultats d'exécution et de meilleures performances. Ce n'est pas le cas des fonctions Generator. Lorsqu'une fonction Generator est exécutée, elle et son appelant sont exécutés dans le même thread. Chaque séquence d'exécution est déterminée et ordonnée, et la séquence d'exécution ne changera pas. Contrairement aux threads, les fonctions Generator peuvent suspendre l’exécution au niveau des marqueurs de rendement internes.

En introduisant la pause, l'exécution et la reprise de la fonction Générateur, nous savons ce qu'est la fonction Générateur, nous posons donc maintenant une question : A quoi sert la fonction Générateur ?
Itérateur

Grâce à l'article précédent, nous savons que l'itérateur n'est pas une classe intégrée d'ES6, mais juste un point d'extension du langage. Vous pouvez en définir un en implémentant [Symbol.iterator]() et .next(. ) méthodes.

Cependant, l'implémentation d'une interface nécessite encore d'écrire du code. Voyons comment implémenter un itérateur en pratique. Prenons l'exemple de l'implémentation d'un itérateur de plage. Cet itérateur s'accumule simplement d'un nombre à un autre. nombre, un peu comme la boucle for (;;) en langage C.

// This should "ding" three times
for (var value of range(0, 3)) {
 alert("Ding! at floor #" + value);
}
 
// This should "ding" three times
for (var value of range(0, 3)) {
 alert("Ding! at floor #" + value);
}

Il existe désormais une solution, qui consiste à utiliser les classes ES6. (Si vous n'êtes pas encore familier avec la syntaxe des classes, ne vous inquiétez pas, j'en parlerai dans un prochain article.)

class RangeIterator {
 constructor(start, stop) {
  this.value = start;
  this.stop = stop;
 }

 [Symbol.iterator]() { return this; }

 next() {
  var value = this.value;
  if (value < this.stop) {
   this.value++;
   return {done: false, value: value};
  } else {
   return {done: true, value: undefined};
  }
 }
}

// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
 return new RangeIterator(start, stop);
}
 
class RangeIterator {
 constructor(start, stop) {
  this.value = start;
  this.stop = stop;
 }
 
 [Symbol.iterator]() { return this; }
 
 next() {
  var value = this.value;
  if (value < this.stop) {
   this.value++;
   return {done: false, value: value};
  } else {
   return {done: true, value: undefined};
  }
 }
}
 
// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
 return new RangeIterator(start, stop);
}

查看该 DEMO。

这种实现方式与 Java 和 Swift 的实现方式类似，看上去还不错，但还不能说上面代码就完全正确，代码没有任何 Bug？这很难说。我们看不到任何传统的 for (;;) 循环代码：迭代器的协议迫使我们将循环拆散了。

在这一点上，你也许会对迭代器不那么热衷了，它们使用起来很方便，但是实现起来似乎很难。

我们可以引入一种新的实现方式，以使得实现迭代器更加容易。上面介绍的 Generator 可以用在这里吗？我们来试试：

function* range(start, stop) {
 for (var i = start; i < stop; i++)
  yield i;
}
 
function* range(start, stop) {
 for (var i = start; i < stop; i++)
  yield i;
}

查看该 DEMO。

上面这 4 行代码就可以完全替代之前的那个 23 行的实现，替换掉整个 RangeIterator 类，这是因为 Generator 天生就是迭代器，所有的 Generator 都原生实现了 .next() 和 [Symbol.iterator]() 方法。你只需要实现其中的循环逻辑就够了。

不使用 Generator 去实现一个迭代器就像被迫写一个很长很长的邮件一样，本来简单的表达出你的意思就可以了，RangeIterator 的实现是冗长和令人费解的，因为它没有使用循环语法去实现一个循环功能。使用 Generator 才是我们需要掌握的实现方式。

我们可以使用作为迭代器的 Generator 的哪些功能呢？

    使任何对象可遍历 — 编写一个 Genetator 函数去遍历 this，每遍历到一个值就 yield 一下，然后将该 Generator 函数作为要遍历的对象上的 [Symbol.iterator] 方法的实现。
    简化返回数组的函数 — 假如有一个每次调用时都返回一个数组的函数，比如：

// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
 var rows = [];
 for (var i = 0; i < icons.length; i += rowLength) {
  rows.push(icons.slice(i, i + rowLength));
 }
 return rows;
}

 
// Divide the one-dimensional array 'icons'
// into arrays of length 'rowLength'.
function splitIntoRows(icons, rowLength) {
 var rows = [];
 for (var i = 0; i < icons.length; i += rowLength) {
  rows.push(icons.slice(i, i + rowLength));
 }
 return rows;
}

使用 Generator 可以简化这类函数：

function* splitIntoRows(icons, rowLength) {
 for (var i = 0; i < icons.length; i += rowLength) {
  yield icons.slice(i, i + rowLength);
 }
}
 
function* splitIntoRows(icons, rowLength) {
 for (var i = 0; i < icons.length; i += rowLength) {
  yield icons.slice(i, i + rowLength);
 }
}

这两者唯一的区别在于，前者在调用时计算出了所有结果并用一个数组返回，后者返回的是一个迭代器，结果是在需要的时候才进行计算，然后一个一个地返回。

    无穷大的结果集 — 我们不能构建一个无穷大的数组，但是我们可以返回一个生成无尽序列的 Generator，并且每个调用者都可以从中获取到任意多个需要的值。
    重构复杂的循环 — 你是否想将一个复杂冗长的函数重构为两个简单的函数？Generator 是你重构工具箱中一把新的瑞士军刀。对于一个复杂的循环，我们可以将生成数据集那部分代码重构为一个 Generator 函数，然后用 for-of 遍历：for (var data of myNewGenerator(args))。
    构建迭代器的工具 — ES6 并没有提供一个可扩展的库，来对数据集进行 filter 和 map等操作，但 Generator 可以用几行代码就实现这类功能。

例如，假设你需要在 Nodelist 上实现与 Array.prototype.filter 同样的功能的方法。小菜一碟的事：

function* filter(test, iterable) {
 for (var item of iterable) {
  if (test(item))
   yield item;
 }
}

 
function* filter(test, iterable) {
 for (var item of iterable) {
  if (test(item))
   yield item;
 }
}

所以，Generator 很实用吧？当然，这是实现自定义迭代器最简单直接的方式，并且，在 ES6 中，迭代器是数据集和循环的新标准。

但，这还不是 Generator 的全部功能。
异步代码

异步 API 通常都需要一个回调函数，这意味着每次你都需要编写一个匿名函数来处理异步结果。如果同时处理三个异步事务，我们看到的是三个缩进层次的代码，而不仅仅是三行代码。

看下面代码：

}).on('close', function () {
 done(undefined, undefined);
}).on('error', function (error) {
 done(error);
});
 
}).on('close', function () {
 done(undefined, undefined);
}).on('error', function (error) {
 done(error);
});

异步 API 通常都有错误处理的约定，不同的 API 有不同的约定。大多数情况下，错误是默认丢弃的，甚至有些将成功也默认丢弃了。

直到现在，这些问题仍是我们处理异步编程必须付出的代价，而且我们也已经接受了异步代码只是看不来不像同步代码那样简单和友好。

Generator 给我们带来了希望，我们可以不再采用上面的方式。

Q.async()是一个将 Generator 和 Promise 结合起来处理异步代码的实验性尝试，让我们的异步代码类似于相应的同步代码。

例如：

// Synchronous code to make some noise.
function makeNoise() {
 shake();
 rattle();
 roll();
}

// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
 return Q.async(function* () {
  yield shake_async();
  yield rattle_async();
  yield roll_async();
 });
}
 
// Synchronous code to make some noise.
function makeNoise() {
 shake();
 rattle();
 roll();
}
 
// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
 return Q.async(function* () {
  yield shake_async();
  yield rattle_async();
  yield roll_async();
 });
}

La plus grande différence est que vous devez ajouter le mot-clé rendement devant chaque appel de méthode asynchrone.

Dans Q.async, l'ajout d'une instruction if ou la gestion des exceptions try-catch, tout comme dans le code synchrone, réduit considérablement les coûts d'apprentissage par rapport à d'autres méthodes d'écriture de code asynchrone.

Generator nous offre un modèle de programmation asynchrone plus adapté à la façon de penser du cerveau humain. Mais une meilleure syntaxe pourrait être plus utile. Dans ES7, une fonction de traitement asynchrone basée sur Promise et Generator est en cours de planification, inspirée de fonctionnalités similaires en C#.
Compatibilité

Côté serveur, vous pouvez désormais utiliser Generator directement dans io.js (ou démarrer Node avec le paramètre de démarrage --harmony dans NodeJs).

Côté navigateur, actuellement seuls Firefox 27 et Chrome 39 ou supérieur prennent en charge Generator. Si vous souhaitez l'utiliser directement sur le Web, vous pouvez utiliser Babel ou le Traceur de Google pour convertir le code ES6 en code ES5 adapté au Web.

Quelques digressions : La version JS de Generator a été implémentée pour la première fois par Brendan Eich. Il s'est inspiré de l'implémentation de Python Generator, qui a été inspiré par Icon Firefox 2.0 absorbé par Generator dès 2006. Mais le chemin vers la standardisation est semé d'embûches. En cours de route, sa syntaxe et son comportement ont subi de nombreux changements. Le générateur ES6 dans Firefox et Chrome a été implémenté par Andy Wingo, et ce travail a été sponsorisé par Bloomberg.
rendement ;

Il y a quelques parties non mentionnées à propos de Generator. Nous n'avons pas encore abordé l'utilisation des méthodes .throw() et .return(), les paramètres facultatifs de la méthode .next() et la syntaxe rendement*. Mais je pense que cet article est déjà assez long, et tout comme Generator, faisons une pause et terminons le reste à un autre moment.

Nous avons introduit deux fonctionnalités très importantes dans ES6, nous pouvons donc désormais affirmer avec audace que ES6 va changer nos vies. Ces fonctionnalités apparemment simples sont d'une grande utilité.