ECMAScript のイテレータの詳細な説明

ECMAScript のイテレータの詳細な説明

序文

多くの初級フロントエンド開発者が中級レベルに近づくにつれ、面接でよく聞かれることの 1 つがイテレータとジェネレータです。実際、彼らは開発でそれらを使用してはいますが、それが何なのかを知らなかったり、ある程度理解していても深く理解していなかったりします。この記事はこれらの開発者にとって役立ち、イテレータをわかりやすく説明します。

以前のバージョン

反復処理について知っておく必要があります。反復処理は単純にループとして理解できます。JavaScript では、カウントされたループが最も単純です。例:

for(i = 0; i < 9; ++i){
	console.log("[ i ]", i);
}

反復の基礎はループであり、これにはいくつかの必要な条件が含まれます。

  • 反復回数は指定できる
  • 各反復で実行する操作を指定できます
  • 各反復は、次の反復が始まる前に完了します
  • 順序は事前に定義されています。

配列をループする必要がある場合、反復は順序付けられたコレクションに対して実行されます。「順序付けられた」とは、配列内のすべての要素を最初の項目から最後の項目まで順番に走査できることを意味します。配列の長さは固定されており、各項目はインデックスの添え字によって取得できるため、配列全体をインデックスで走査できます。例:

定数 arr = ["a", "b", "c"];

for(let i = 0; i < arr.length; ++i){
	コンソールにログ出力します。
}

ただし、このモードでは、配列などの使用されるデータ構造を事前に知っておく必要があります。別のデータ型や暗黙的な順序を持つデータ構造に置き換えられると、トラバースの順序を決定できなくなります。

そこで、ES5 では forEach() メソッドが追加されました。例:

定数 arr = ["a", "b", "c"];

arr.forEach(item=>{
	console.log(アイテム);
});

このメソッドは、単一の項目の値をトラバースして取得するために同じ配列インデックスを使用する必要はありませんが、反復処理の終了をマークできないため、配列のトラバースにのみ適用できます。これらの問題を解決するために、ES6 以降、JavaScript はイテレータ モードをサポートしています。

イテレータパターン

イテレータ パターンは非常に抽象的な用語です。これは、要素が限定され、独立しており、明確な配列やコレクションなどのオブジェクトとして理解できます。 Little Red Book からの説明を引用すると、次のようになります。

Iterator パターン (特に ECMAScript のコンテキスト) は、正式な Iterable インターフェイスを実装し、Iterator によって使用できるため、一部の構造を「反復可能」と呼ぶことができるスキームを表します。

イテレータファクトリ関数

反復子ファクトリ関数 Symbol.iterator() は、ほとんどの組み込み型のデフォルト プロパティです。Iterable インターフェイス (反復可能プロトコル) を公開します。つまり、データ型が反復をサポートする場合、その型は反復可能プロトコルをサポートする必要があります。

ECMAScript では、公開されるデフォルトのイテレータはキーとして「Symbol.iterator」を使用し、新しいイテレータを返す必要があると規定されています。デフォルトのイテレータ プロパティが存在するかどうかを確認する方法も簡単です。例:

定数obj = {};
定数 arr = ["a", "b", "c"];

console.log(obj[Symbol.iterator]); // 未定義
console.log(arr[Symbol.iterator]); // f values() { [ネイティブコード] }

console.log(arr[Symbol.iterator]()); // 配列イテレータ {}

もちろん、実際の開発ではイテレータ ファクトリ関数を明示的に呼び出す必要はありません。反復可能プロトコルをサポートするデータ型は、反復可能オブジェクトを受け入れるすべての言語機能と自動的に互換性があります。たとえば、ループ、for-of、分解、拡張演算子を使用すると、提供された反復可能オブジェクトのイテレータ ファクトリ関数がバックグラウンドで自動的に呼び出され、反復子が作成されます。

イテレータプロトコル

イテレータ プロトコルでは、イテレータは 1 回限りのオブジェクトであると規定されています。イテレータ ファクトリ関数が呼び出されると、 next() メソッドが返されます。このメソッドは、成功した反復ごとに呼び出され、次の反復の値を取得します。呼び出されない場合、反復の現在の位置は不確定です。

next() メソッドは、done と value の属性を含むオブジェクトを返します。done は、next() メソッドを呼び出して次の値を取得できるかどうか、つまり「使い果たされた」かどうかを示します。ブール値を返します。value は、反復可能なオブジェクトの次の値を示します。 done が true の場合、値は不足しています。 done が false の場合、次の反復を呼び出し続けます。例:

// 反復可能なオブジェクト let arr = ['foo', 'bar']; // 反復子ファクトリー関数 console.log(arr[Symbol.iterator]); // f values() { [ネイティブコード] }

// イテレータ let iter = arr[Symbol.iterator]();
console.log(iter); // 配列イテレータ{}

// 反復処理を実行する console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { 完了: false、値: 'bar' }
console.log(iter.next()); // { 完了: true、値: undefined }

最後に

イテレータ プロトコルを使用すると、イテレータを反復処理できる回数を指定したり、反復処理を早期に終了したりするなど、カスタム イテレータを実装できます。

ECMAScript のイテレータに関するこの記事はこれで終わりです。ECMAScript イテレータに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

<<:  nginx を介して方向プロキシを実装するプロセスの図

>>:  MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

推薦する

JSブラウザストレージの詳しい説明

目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル

インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

クラウドサーバーパゴダパネルの詳細なインストール手順

目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...

MySQLのユーザーアカウント管理と権限管理の詳細な説明

序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...

CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル

Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Zabbix の psk 暗号化と zabbix_get 値の組み合わせ

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...

Docker Toolboxを完全にアンインストールする方法

Docker Toolbox は、Windows 10 Professional より前のバージョン...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

Sqoop エクスポート マップ 100% 削減 0% さまざまな理由と解決策でスタック

私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...