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 を応援してくれることを願っています。