Javascriptジェネレータの紹介と使用

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

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

• 値を返した後、一時停止し、
• 呼び出し側は一時停止をキャンセルして別の値を返すように要求できる
  

この「戻り値」は関数からの従来の戻り値ではありません。そのため、特別な名前「yield」が付けられています。

ジェネレータの構文は言語によって異なります。 Javascript のジェネレータ構文は PHP のものと似ていますが、大きく異なるため、同じように動作すると期待すると、非常に混乱することになります。

JavaScript でジェネレーターを使用する場合は、次の操作を行う必要があります。

• 特別なジェネレータ関数の定義
• ジェネレータオブジェクトを作成するにはこの関数を呼び出します
• ジェネレーター オブジェクトをループ内で使用するか、その next メソッドを直接呼び出します。
  

このシンプルなプログラムから始めて、以下の各手順に従います。

// ファイル: sample-program.js
関数 *createGenerator() {
 (i=0;i<20;i++) の場合 {
 利回り i
 }
}

定数ジェネレータ = createGenerator()

コンソールログ(ジェネレーター.next())
コンソールログ(ジェネレーター.next())

このコードを実行すると、次の出力が得られます。

$ ノードサンプルプログラム.js

{ 値: 0、完了: false }
{ 値: 1、完了: false }

プログラムがどのように動作するか説明しましょう。

ジェネレータ関数

まず、コード内にジェネレータ関数の定義があります。

関数* createGenerator() {
 (i=0;i<20;i++) の場合 {
 利回り i
 }
}

関数の後の * は、これがジェネレーター関数であることを JavaScript に伝えます。以下はすべてジェネレータ関数の有効な定義です。

関数*createGenerator
関数* createGenerator
関数 *createGenerator

* は関数名の一部ではありません。代わりに、function* 表記法はジェネレーターを定義します。

ジェネレータ関数の呼び出し

ジェネレータ関数を定義した後、それを別の名前の関数と呼びます。

// 注意: 呼び出される場合、* はありません。 * は関数名の一部ではありません // `function *` はジェネレータ関数を定義するために使用されるシンボルです const generator = createGenerator()

ただし、createGenerator 関数には戻り値がないことに注意してください。これは、ジェネレータ関数には従来の戻り値がないからです。対照的に、ジェネレーター関数を直接呼び出すと、常にインスタンス化された Generator オブジェクトが返されます。

このジェネレーター オブジェクトには next メソッドがあります。 next を呼び出すと、ジェネレーター関数内のコードが実行されます。

関数* createGenerator() {
 (i=0;i<20;i++) の場合 {
  利回り i
 }
}

これはもう一度呼び出すほど重要です。ジェネレータ関数を直接呼び出しても、ジェネレータ関数内のコードは実行されません。代わりに、ジェネレーター オブジェクトが作成されます。ジェネレーター オブジェクトで next を呼び出し、ジェネレーター関数内のコードを呼び出します。

ジェネレーター オブジェクトで next が初めて呼び出されると、内部のコードは yield ステートメントに遭遇するまで実行されます。 yield に到達すると、JavaScript はそのコードの実行を一時停止し、次に yield 行の値を含むオブジェクトを返します (ユーザーに提供するか、生成します)。

next を 2 回目 (または 3 回目、4 回目、またはそれ以上) 呼び出すと、コードは一時停止解除され、(最後の呼び出しで中断したところから) 実行を続行します。変数 (この場合は i) はその値を保持します。コードが別の yield ステートメントに到達すると、関数は再び一時停止し、生成された値を含むオブジェクトを返します。

そのため、next を 2 回呼び出します。

コンソールログ(ジェネレーター.next())
コンソールログ(ジェネレーター.next())

次のような出力が得られます。

{ 値: 0、完了: false }
{ 値: 1、完了: false }

ジェネレータ関数内のコードの実行が終了すると、それ以降の next の呼び出しでは、値が undefined で done が true に設定されたオブジェクトが返されます。

{ 値: 未定義、完了: true }

ジェネレータとループ

ジェネレーター オブジェクトで next を手動で呼び出すことも可能ですが、主にループ内で使用します。少し変更したこのプログラムをご覧ください。

// ファイル: sample-program.js
@ハイライト構文@jscript
関数 *createGenerator() {
 (i=0;i<5;i++) の場合 {
 利回り i
 }
}

定数ジェネレータ = createGenerator()
for(ジェネレータのconst値) {
 console.log(値)
}

ジェネレータ オブジェクトが for...of ループ内で使用される場合、ループが実行されるたびにジェネレータ オブジェクトで next が呼び出され、変数 (上記の値) に生成された値が設定されます。プログラムを実行すると、次のように出力されます。

$ ノードサンプルプログラム.js
0
1
2
3
4

次の記事では、 for ... of ループを詳しく見ていき、JavaScript で任意のオブジェクトをループする組み込みの方法を説明します。

要約する

Javascript ジェネレーターに関するこの記事はこれで終わりです。Javascript ジェネレーターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。