Javascript의 Generator 생성기에 대한 자세한 설명

제너레이터란 무엇인가요?

제너레이터는 함수 내에서 실행되는 코드입니다.

• 값을 반환한 후 자체적으로 일시 중지됩니다. -

• 호출자는 일시 중지를 해제하고 다른 값을 반환하도록 요청할 수 있습니다.

이 "반환" 함수의 전통적인 return이 아닙니다. 그래서 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

생성기 구문은 언어마다 다릅니다. Javascript의 생성기 구문은 PHP의 구문과 유사하지만 동일한 작업을 수행할 것으로 예상하면 매우 혼란스러울 정도로 다릅니다.

자바스크립트에서 생성기를 사용하려면 다음을 수행해야 합니다.

특수 생성기 함수를 정의합니다

이 함수를 호출하여 생성기 개체를 만듭니다.

🎜🎜루프에서 생성기 개체를 사용합니다. 또는 next 메서드를 직접 호출하세요. 🎜🎜🎜🎜다음의 간단한 프로그램을 시작점으로 삼아 다음 각 단계를 수행합니다. 🎜rrreee🎜이 코드를 실행하면 다음과 같은 출력이 표시됩니다. :🎜rrreee🎜여기서 프로그램 작동 방식을 설명합니다. 🎜

🎜생성기 함수🎜🎜🎜우선 코드에 생성기 함수 정의가 있습니다: 🎜rrreee🎜function 다음에 * 이것이 생성기 함수임을 자바스크립트에 알립니다. 다음 글은 모두 생성기 함수의 유효한 정의입니다. 🎜rrreee🎜*는 🎜 함수 이름의 일부가 아닙니다. 대신 function* 기호가 생성기를 정의합니다. 🎜

🎜생성기 함수 호출 🎜🎜🎜생성기 함수를 정의한 후 다른 이름으로 함수 이름을 지정합니다. 🎜rrreee🎜하지만 기억하세요: createGenerator 함수에는 🎜반환 값이 없습니다. 이는 생성기 함수에 전통적인 반환 값이 없기 때문입니다. 반대로 생성기 함수를 직접 호출하면 🎜항상🎜인스턴스화된 Generator 개체가 반환됩니다. 🎜🎜이 생성기 개체에는 next 메서드가 있습니다. next를 호출하면 생성기 함수 내에서 코드가 실행됩니다. 🎜rrreee🎜이건 다시 불러야 할 만큼 중요합니다. 생성기 함수를 직접 호출하면 🎜 생성기 함수 내의 코드가 실행되지 않습니다. 대신 생성기 개체를 만듭니다. 생성기 개체에서 next를 호출하여 생성기 함수의 코드를 호출합니다. 🎜🎜생성기 개체에서 next가 처음 호출되면 yield 문이 나타날 때까지 내부 코드가 실행됩니다. 실행이 yield에 도달하면 javascript는 해당 코드의 실행을 🎜pause🎜하고 next는 객체를 반환(즉, 제공 또는 yield)합니다. yield 행의 값이 포함되어 있습니다. 🎜🎜next를 두 번째(또는 세 번째, 네 번째 또는 그 이상) 호출하면 코드가 일시 중지 해제되고 계속 실행됩니다(마지막 호출 시 중단된 위치). 변수(예: 이 예의 i)는 해당 값을 유지합니다. 코드가 다른 yield 문에 도달하면 함수가 다시 일시 중지되고 항복 값이 포함된 객체를 반환합니다. 🎜🎜이것이 next를 두 번 호출해야 하는 이유입니다. 🎜rrreee🎜는 다음과 같은 출력을 얻습니다. 🎜rrreee🎜생성기 함수의 코드가 실행된 후 향후 next를 호출합니다. code> 모든 호출은 <em>정의되지 않음</em> 및 <code>done 값이 true로 설정된 객체를 반환합니다. 🎜rrreee

🎜생성기 및 루프🎜🎜🎜생성기 개체에서 next를 수동으로 호출할 수 있지만 주로 루프에서 사용하려고 합니다. 약간 수정된 이 프로그램을 살펴보십시오. 🎜rrreee🎜for...of 루프에서 생성기 개체를 사용할 때 각 루프는 생성기 개체에서 next를 호출하고 결과 값으로 변수를 채웁니다(값

위). 이 프로그램을 실행하면 다음이 출력됩니다. 🎜rrreee🎜다음 기사에서는 for ... of 루프에 대해 자세히 살펴보고 Javascript가 Any를 루프하는 내장 방법을 제공하는 방법을 살펴보겠습니다. object in javascript🎜🎜🎜영어 원본 주소: https://alanstorm.com/javascript-generators/🎜🎜저자: Alan Storm🎜🎜번역 주소: https://segmentfault.com/a/1190000023924834🎜🎜🎜더 보기 프로그래밍 관련 지식이 있으면 🎜프로그래밍 입문🎜을 방문하세요! ! 🎜

위 내용은 Javascript의 Generator 생성기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!