JavascriptでのGeneratorジェネレーターの詳しい説明

ジェネレーターとは何ですか?

#ジェネレーターは、関数内で実行されるコードです。

• 値を返した後、ジェネレーター自体が一時停止し、-

#呼び出し側プログラムは、一時停止を解除して別の値を返すように要求できます
この「戻り」は従来のスレーブ関数ではありません

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 に伝えます。以下の記述はすべて、ジェネレーター関数の有効な定義です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function*createGenerator function* createGenerator function *createGenerator</pre><div class="contentsignin">ログイン後にコピー</div></div>#*

と

は 関数名の一部ではありません。代わりに、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 を 2 回目 (または 3 回目、4 回目、またはそれ以上) に呼び出すと、コードは一時停止が解除され、(最後の呼び出しと同様に) 中断された場所で実行を継続します。変数 (この例の

i

など) はその値を保持します。コードが別の yield ステートメントに到達すると、関数は再び一時停止し、yield 値を含むオブジェクトを返します。 これが、2 回呼び出す必要がある理由です。 next

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

は次の出力を取得します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">{ value: 0, done: false } { value: 1, done: false }</pre><div class="contentsignin">ログイン後にコピー</div></div>ジェネレーター関数のコードが実行された後, 今後

next

を呼び出すと、値

unknown

と done が true に設定されたオブジェクトが返されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">{ value: undefined, done: true }</pre><div class="contentsignin">ログイン後にコピー</div></div>ジェネレーターとループ

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) を設定します。このプログラムを実行すると、次の出力が表示されます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">$ node sample-program.js 0 1 2 3 4</pre><div class="contentsignin">ログイン後にコピー</div></div>次の記事では、<code>for ... of ループを詳しく見て、組み込みメソッドを提供する方法を検討します。 JavaScript の任意のオブジェクトをループします。

英語の元のアドレス: https://alanstorm.com/javascript-generators/

著者: Alan Storm

翻訳アドレス: https://segmentfault.com/a/1190000023924834

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がJavascriptでのGeneratorジェネレーターの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。