Detaillierte Erläuterung des Generator_Grundkenntnisse in JavaScript ES6

Ich bin wirklich begeistert von der neuen Funktion, die wir heute besprechen, denn es ist die erstaunlichste Funktion in ES6.

Was bedeutet hier „magisch“? Für Anfänger unterscheidet sich diese Funktion völlig von früheren JS-Funktionen und ist sogar etwas undurchsichtig. Es ist „magisch“ in dem Sinne, dass es das normale Verhalten der Sprache völlig verändert.

Darüber hinaus kann diese Funktion den Programmcode vereinfachen und den komplexen „Callback-Stack“ in eine geradlinige Ausführungsform umwandeln.

Habe ich zu viel ausgegeben? Beginnen wir mit einer ausführlichen Einführung, und Sie können sich selbst ein Urteil bilden.
Einführung

Was ist ein Generator?

Sehen Sie sich den folgenden Code an:

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!";
}

Der obige Code ist Teil der Nachahmung von Sprechender Katze (einer derzeit sehr beliebten Anwendung). Klicken Sie hier, um es auszuprobieren. Wenn Sie sich über den Code nicht sicher sind, dann Kommen Sie hierher zurück. Siehe Erklärung unten.

Dies ähnelt stark einer Funktion, die als Generatorfunktion bezeichnet wird. Sie hat viele Gemeinsamkeiten mit unseren üblichen Funktionen, aber Sie können auch die folgenden zwei Unterschiede erkennen:

Normale Funktionen beginnen mit function, aber Generatorfunktionen beginnen mit function*.
Innerhalb der Generatorfunktion ist yield ein Schlüsselwort, ähnlich wie return. Der Unterschied besteht darin, dass alle Funktionen (einschließlich Generatorfunktionen) nur einmal zurückkehren können, während Sie bei Generatorfunktionen beliebig oft nachgeben können. Der Yield-Ausdruck unterbricht die Ausführung der Generator-Funktion und die Ausführung kann dann an der Stelle fortgesetzt werden, an der sie angehalten wurde.

Allgemeine Funktionen können die Ausführung nicht anhalten, Generatorfunktionen jedoch. Dies ist der größte Unterschied zwischen den beiden.
Prinzip

Was passiert, wenn quips() aufgerufen wird?

> 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 }

Wir sind mit dem Verhalten gewöhnlicher Funktionen bestens vertraut. Wenn eine Funktion aufgerufen wird, wird sie sofort ausgeführt, bis die Funktion zurückkehrt oder eine Ausnahme auslöst. Dies ist für alle JS-Programmierer eine Selbstverständlichkeit.

Die Aufrufmethode der Generator-Funktion ist die gleiche wie bei der normalen Funktion: quips("jorendorff"), aber beim Aufruf einer Generator-Funktion wird diese nicht sofort ausgeführt, sondern ein Generator-Objekt (iter im obigen Code). Zu diesem Zeitpunkt wird die Funktion sofort in der ersten Zeile des Funktionscodes angehalten.

Jedes Mal, wenn die .next()-Methode eines Generator-Objekts aufgerufen wird, beginnt die Funktion mit der Ausführung, bis der nächste Yield-Ausdruck gefunden wird.

Aus diesem Grund erhalten wir jedes Mal, wenn wir iter.next() aufrufen, eine andere Zeichenfolge. Dies sind die Werte, die durch den Yield-Ausdruck innerhalb der Funktion erzeugt werden.

Wenn das letzte iter.next() ausgeführt wird, ist das Ende der Generatorfunktion erreicht, sodass der .done-Eigenschaftswert des zurückgegebenen Ergebnisses wahr ist und der .value-Eigenschaftswert undefiniert ist.

Gehen Sie nun zurück zur Talking Cat-DEMO und versuchen Sie, dem Code einige Ertragsausdrücke hinzuzufügen, und sehen Sie, was passiert.

Technisch gesehen wird der Stapelrahmen der Funktion – lokale Variablen, Funktionsparameter, temporäre Werte und die aktuelle Ausführungsposition – immer dann aus dem Stapel entfernt, wenn die Ausführung der Generatorfunktion auf einen Yield-Ausdruck trifft, das Generatorobjekt bleibt jedoch erhalten Der Stapelrahmen wird entfernt, sodass Sie beim nächsten Aufruf der .next()-Methode die Ausführung fortsetzen und fortsetzen können.

Es sei daran erinnert, dass Generator kein Multithreading ist. In einer Sprache, die Multithreading unterstützt, können mehrere Codeteile gleichzeitig ausgeführt werden, was mit Konkurrenz um Ausführungsressourcen, Unsicherheit bei den Ausführungsergebnissen und besserer Leistung einhergeht. Dies ist bei Generatorfunktionen nicht der Fall. Wenn eine Generatorfunktion ausgeführt wird, werden sie und ihr Aufrufer im selben Thread ausgeführt. Die Ausführungsreihenfolge wird nicht geändert. Im Gegensatz zu Threads können Generatorfunktionen die Ausführung an internen Ertragsmarkierungen anhalten.

Durch die Einführung der Pause, Ausführung und Wiederaufnahme der Generatorfunktion wissen wir, was die Generatorfunktion ist, und stellen nun die Frage: Wozu dient die Generatorfunktion?
Iterator

Durch den vorherigen Artikel wissen wir, dass Iterator keine integrierte Klasse von ES6 ist, sondern nur ein Erweiterungspunkt der Sprache. Sie können einen definieren, indem Sie [Symbol.iterator]() und .next( implementieren. )-Iterator.

Die Implementierung einer Schnittstelle erfordert jedoch das Schreiben von Code. Schauen wir uns an, wie ein Iterator in der Praxis implementiert wird. Dieser Iterator akkumuliert einfach von einer Zahl zur anderen Zahl, ein bisschen wie die for (;;)-Schleife in der C-Sprache.

// 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);
}

Jetzt gibt es eine Lösung, nämlich die Verwendung von ES6-Klassen. (Wenn Sie mit der Klassensyntax noch nicht vertraut sind, machen Sie sich keine Sorgen, ich werde sie in einem zukünftigen Artikel behandeln.)

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();
 });
}

Der größte Unterschied besteht darin, dass Sie das Schlüsselwort yield vor jedem asynchronen Methodenaufruf hinzufügen müssen.

In Q.async reduziert das Hinzufügen einer if-Anweisung oder einer Try-Catch-Ausnahmebehandlung, genau wie bei synchronem Code, den Lernaufwand im Vergleich zu anderen Methoden zum Schreiben von asynchronem Code erheblich.

Generator stellt uns ein asynchrones Programmiermodell zur Verfügung, das besser für die Denkweise des menschlichen Gehirns geeignet ist. Eine bessere Syntax könnte jedoch hilfreicher sein. In ES7 ist eine asynchrone Verarbeitungsfunktion auf Basis von Promise und Generator geplant, die von ähnlichen Funktionen in C# inspiriert ist.
Kompatibilität

Auf der Serverseite können Sie Generator jetzt direkt in io.js verwenden (oder Node mit dem Startparameter --harmony in NodeJs starten).

Auf der Browserseite unterstützen derzeit nur Firefox 27 und Chrome 39 oder höher Generator. Wenn Sie ihn direkt im Web verwenden möchten, können Sie Babel oder Googles Traceur verwenden, um ES6-Code in webfreundlichen ES5-Code zu konvertieren.

Einige Abschweifungen: Die JS-Version von Generator wurde erstmals von Brendan Eich implementiert. Er stützte sich auf die Implementierung von Python Generator, die bereits 2006 von Icon Firefox 2.0 übernommen wurde. Der Weg zur Standardisierung ist jedoch holprig. Seine Syntax und sein Verhalten haben viele Änderungen erfahren. Der ES6-Generator in Firefox und Chrome wurde von Andy Wingo implementiert, und diese Arbeit wurde von Bloomberg gesponsert.
Ertrag;

Es gibt einige nicht erwähnte Teile des Generators. Wir haben die Verwendung der Methoden .throw() und .return(), die optionalen Parameter der Methode .next() und die Syntax yield* noch nicht behandelt. Aber ich denke, dieser Beitrag ist schon lang genug, und genau wie Generator sollten wir innehalten und den Rest zu einem anderen Zeitpunkt beenden.

Wir haben zwei sehr wichtige Funktionen in ES6 eingeführt, sodass wir jetzt mit Fug und Recht sagen können, dass ES6 unser Leben verändern wird. Diese scheinbar einfachen Funktionen sind von großem Nutzen.