Detaillierte Erklärung des Generatorgenerators in Javascript

Was ist ein Generator?

Ein Generator ist ein Code, der innerhalb einer Funktion ausgeführt wird

• Nach der Rückgabe eines Werts hält er sich selbst an und -

• Der Aufrufer kann darum bitten, die Pause aufzuheben und einen anderen Wert zurückzugeben

Diese „Rückgabe“ ist kein herkömmlicher return von einer Funktion. Deshalb erhielt es einen besonderen Namen – yield. return。所以它被赋予了一个特殊的名称——yield。

生成器语法因语言而异。 Javascript 的生成器语法类似于 PHP，但是区别也很大，如果你希望它们的作用相同，那么最终你会感到非常困惑。

在 javascript 中，如果想要使用生成器，则需要：

• 定义特殊的生成器函数

• 调用该函数创建一个生成器对象

• 在循环中使用该生成器对象，或直接调用其 next 方法

我们以下面这个简单的程序做为起点，并执行以下每个步骤：

// 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())

如果运行这段代码，则会得到以下输出：

$ node sample-program.js

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

下面我来解释该程序是如何工作的。

生成器函数

首先，代码中存在生成器函数的定义：

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

function 后面的 * 告诉 javascript 这是一个生成器函数。以下写法都是生成器函数的有效定义。

function*createGenerator
function* createGenerator
function *createGenerator

*  并不是函数名的一部分。而是 function* 符号定义了生成器。

调用生成器函数

定义了生成器函数后，我们将其命名为其他名称的函数。

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

但是要记住：createGenerator 函数没有返回值。这是因为生成器函数没有传统的返回值。相反，当你直接调用生成器函数时，它总是返回实例化的 Generator 对象。

这个生成器对象具有一个 next 方法。调用 next 将在生成器函数内部运行代码。

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

这很重要，足以再次调用它。直接调用生成器函数不会在生成器函数中运行任何代码。而是创建一个生成器对象。它在生成器对象上调用 next，从而调用生成器函数中的代码。

首次在生成器对象上调用 next 时，内部代码将会一直运行，直到出现 yield 语句。一旦执行到 yield，javascript 将会暂停该代码的执行，而 next 将返回（即给你，或yield）一个对象，该对象包含 yield 行中的值。

当你第二次（或第三次、第四次甚至更多次）再调用 next 时，代码将会取消暂停并继续运行（在上次调用时中断的地方）。变量（例如本例中的 i ）将会保持它的值。当代码到达另一个 yield 语句时，该函数会再次暂停，并返回一个包含 yield 值的对象。

这就是为什么我们要调用两次  next

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

会得到以下输出：

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

生成器函数中的代码执行完毕后，将来对 next 的任何调用都会返回一个对象，该对象的值为 undefined 且done 设置为 true。

{ value: undefined, done: true }

生成器和循环

虽然可以在生成器对象上手动调用 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)
}

当在 for...of 循环中使用生成器对象时，每次循环都会在生成器对象上调用 next，并用产生的值填充变量（上面的 value）。运行该程序将会输出以下内容:

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

在下一篇文章中，我们将更深入地探讨 for ... of

Die Generatorsyntax variiert von Sprache zu Sprache. Die Generatorsyntax von Javascript ähnelt der von PHP, ist jedoch so unterschiedlich, dass Sie am Ende sehr verwirrt werden, wenn Sie erwarten, dass sie dasselbe tun.

Wenn Sie in Javascript einen Generator verwenden möchten, müssen Sie:

Eine spezielle Generatorfunktion definieren

Diese Funktion aufrufen, um ein Generatorobjekt zu erstellen

🎜🎜Das Generatorobjekt in einer Schleife verwenden, oder rufen Sie die Methode next direkt auf. 🎜🎜🎜🎜Wir nehmen das folgende einfache Programm als Ausgangspunkt und führen jeden der folgenden Schritte aus: 🎜rrreee🎜Wenn Sie diesen Code ausführen, erhalten Sie die folgende Ausgabe :🎜rrreee🎜Hier erkläre ich, wie das Programm funktioniert. 🎜

🎜Generatorfunktion🎜🎜🎜Zuerst gibt es die Definition der Generatorfunktion im Code: 🎜rrreee🎜function gefolgt von * Teilt Javascript mit, dass es sich um eine Generatorfunktion handelt. Die folgenden Schriften sind alle gültige Definitionen von Generatorfunktionen. 🎜rrreee🎜* ist 🎜 nicht Teil des 🎜 Funktionsnamens. Stattdessen definieren die function*-Symbole Generatoren. 🎜

🎜Generatorfunktion aufrufen 🎜🎜🎜Nachdem wir die Generatorfunktion definiert haben, benennen wir sie als Funktion mit einem anderen Namen. 🎜rrreee🎜Aber denken Sie daran: Die Funktion createGenerator 🎜hat keinen 🎜Rückgabewert. Dies liegt daran, dass Generatorfunktionen keine herkömmlichen Rückgabewerte haben. Wenn Sie dagegen eine Generatorfunktion direkt aufrufen, gibt sie „immer“ ein instanziiertes Generator-Objekt zurück. 🎜🎜Dieses Generatorobjekt verfügt über eine next-Methode. Durch den Aufruf von next wird der Code innerhalb der Generatorfunktion ausgeführt. 🎜rrreee🎜Das ist wichtig genug, um es noch einmal anzurufen. Durch den direkten Aufruf einer Generatorfunktion 🎜 wird kein Code innerhalb der Generatorfunktion ausgeführt. Erstellen Sie stattdessen ein Generatorobjekt. Es ruft next für das Generatorobjekt auf und ruft dadurch den Code in der Generatorfunktion auf. 🎜🎜Wenn next zum ersten Mal für ein Generatorobjekt aufgerufen wird, wird der interne Code ausgeführt, bis die yield-Anweisung erscheint. Sobald die Ausführung yield erreicht, pausiert Javascript die Ausführung dieses Codes und next gibt ein Objekt zurück (d. h. gibt Ihnen oder yield). das den Wert in der Zeile yield enthält. 🎜🎜Wenn Sie next ein zweites Mal (oder ein drittes, viertes oder noch mehr Mal) aufrufen, wird der Code nicht mehr angehalten und weiter ausgeführt (dort, wo er beim letzten Aufruf aufgehört hat). Die Variable (wie in diesem Beispiel i) behält ihren Wert. Wenn der Code eine weitere yield-Anweisung erreicht, pausiert die Funktion erneut und gibt ein Objekt zurück, das den Yield-Wert enthält. 🎜🎜Aus diesem Grund müssen wir next zweimal aufrufen. 🎜rrreee🎜 erhalten die folgende Ausgabe: 🎜rrreee🎜Nachdem der Code in der Generatorfunktion ausgeführt wurde, werden zukünftige Aufrufe von next ausgeführt. code> Jeder Aufruf gibt ein Objekt mit dem Wert <em>undefiniert</em> und <code>done zurück, der auf true gesetzt ist. 🎜rrreee

🎜Generatoren und Schleifen🎜🎜🎜Obwohl es möglich ist, next manuell für das Generatorobjekt aufzurufen, möchten wir es hauptsächlich in einer Schleife verwenden. Schauen Sie sich dieses leicht modifizierte Programm an. 🎜rrreee🎜Bei Verwendung eines Generatorobjekts in einer for...of-Schleife ruft jede Schleife next für das Generatorobjekt auf und füllt die Variable mit dem resultierenden Wert (Wert

oben). Beim Ausführen dieses Programms wird Folgendes ausgegeben: 🎜rrreee🎜Im nächsten Artikel werfen wir einen genaueren Blick auf die for ... of-Schleife und untersuchen, wie Javascript eine integrierte Möglichkeit bietet, Any zu schleifen Objekt in Javascript🎜🎜🎜Englische Originaladresse: https://alanstorm.com/javascript-generators/🎜🎜Autor: Alan Storm🎜🎜Übersetzungsadresse: https://segmentfault.com/a/1190000023924834🎜🎜🎜Mehr Für mehr Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Generatorgenerators in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!