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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ES6 のジェネレーターの詳細な説明
  • JS が async/await をジェネレータの構文糖と呼ぶ理由
  • js のジェネレーター関数の詳細な説明
  • jsはジェネレータ関数を使用してAjaxタスクを同期的に実行します
  • JavaScript でジェネレータを使用する方法
  • jsジェネレータのデータ型の詳細な理解
  • JavaScript における ES6 ジェネレーター データ型の詳細な説明
  • JavaScript におけるジェネレータとイテレータの使用に関する簡単な説明
  • JavaScript 矢印関数ジェネレーターの簡単な分析 Date JSON
  • Node.js での JavaScript ジェネレーターの使用

<<:  Linux の検索ツールの代替となるフレンドリーなツール

>>:  PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

推薦する

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

デュアル VIP を使用した高可用性 MySQL クラスタの構築

目次1. プロジェクトの説明: 2. プロジェクト環境: 2. プロジェクトの手順: 3. プロジェ...

HTMLでカメラを読み込む方法

効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

目次序文1. 概要2. 読み取りと書き込みの分離3. MySQL マスタースレーブレプリケーションの...

Linux で Grafana をインストールし、InfluxDB モニタリングを追加する方法

Grafana をインストールします。公式 Web サイトでは、直接インストールできる Ubuntu...

JavaScript オブジェクトを作成する 3 つの方法

目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

Vue は水の波紋効果のクリックフィードバック指示を実装します

目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...

Vue の vue.$set() メソッドのソースコード例の詳細な説明

Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

vue 動的コンポーネント

目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....

iframe を使用して Web ページに天気の影響を表示します

CS: ...コードをコピーコードは次のとおりです。 *{マージン:0;パディング:0;リストスタイ...

OCSP を有効にすると、https 証明書の検証効率が向上し、Let's Encrypt SSL 証明書へのアクセスが遅くなる問題が解決されます。

ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...