ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。
この「戻り値」は関数からの従来の戻り値ではありません。そのため、特別な名前「yield」が付けられています。 ジェネレータの構文は言語によって異なります。 Javascript のジェネレータ構文は PHP のものと似ていますが、大きく異なるため、同じように動作すると期待すると、非常に混乱することになります。 JavaScript でジェネレーターを使用する場合は、次の操作を行う必要があります。
このシンプルなプログラムから始めて、以下の各手順に従います。 // ファイル: sample-program.js 関数 *createGenerator() { (i=0;i<20;i++) の場合 { 利回り i } } 定数ジェネレータ = createGenerator() コンソールログ(ジェネレーター.next()) コンソールログ(ジェネレーター.next()) このコードを実行すると、次の出力が得られます。
プログラムがどのように動作するか説明しましょう。 ジェネレータ関数まず、コード内にジェネレータ関数の定義があります。 関数* 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()) 次のような出力が得られます。
ジェネレータ関数内のコードの実行が終了すると、それ以降の 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 が呼び出され、変数 (上記の値) に生成された値が設定されます。プログラムを実行すると、次のように出力されます。
次の記事では、 for ... of ループを詳しく見ていき、JavaScript で任意のオブジェクトをループする組み込みの方法を説明します。 要約するJavascript ジェネレーターに関するこの記事はこれで終わりです。Javascript ジェネレーターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux の検索ツールの代替となるフレンドリーなツール
>>: PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明
今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...
目次1. プロジェクトの説明: 2. プロジェクト環境: 2. プロジェクトの手順: 3. プロジェ...
効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...
目次序文1. 概要2. 読み取りと書き込みの分離3. MySQL マスタースレーブレプリケーションの...
Grafana をインストールします。公式 Web サイトでは、直接インストールできる Ubuntu...
目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...
多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...
目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...
目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...
Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...
Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...
HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...
目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....
CS: ...コードをコピーコードは次のとおりです。 *{マージン:0;パディング:0;リストスタイ...
ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...