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サーバーのパフォーマンス監視の詳細な説明

推薦する

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...

ユニアプリプロジェクトでのウォーターフォールレイアウトの実装

GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアル1. プ...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

vue+px2rem(rem適応)を使用してPCで大画面適応を実装するためのサンプルコード

構成の序文プロジェクト構築: vue-cli3 をベースに構築、rem 適応には postcss-p...

ゲームの Node.JS バージョンを作成する方法

目次概要ビルドプロセス関連APIリードライン基本的な使い方チョーククリア手順に関する追加情報完全なコ...

WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...

CSS における重要なカスケード概念の詳細な説明

最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...

Flexboxレイアウトの最もシンプルなフォーム実装

フレキシブル レイアウト (Flexbox) はますます人気が高まっており、CSS レイアウトの記述...

mysql8 共通テーブル式 CTE 使用例の分析

この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...

ブログデザイン ウェブデザイン デビュー

私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...

MySQL Null は 5 つの問題を引き起こす可能性があります (すべて致命的)

目次1. カウントデータが失われる解決2. 明確なデータ損失3.データ損失を選択解決4. Nullポ...

Angularコンポーネントのライフサイクルの詳しい説明(パート2)

目次1. ビューフック1. ngAfterViewInit および ngAfterViewCheck...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

Tomcatサーバーのセキュリティ設定方法

Tomcat は、Java Community Process を通じて Sun が開発した、広く使...