ES6イテラブルプロトコルとイテレータプロトコルの詳細説明-jsチュートリアル-php.cn

この記事では主に ES6 構文の iterable プロトコルと iterator プロトコルを詳しく紹介していますが、編集者が非常に優れていると思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ECMAScript 2015 へのいくつかの追加は、新しい組み込みや構文ではなく、プロトコルです。これらのプロトコルは、特定の規則に従う任意のオブジェクトによって実装できます。
反復可能プロトコルと反復子プロトコルの 2 つのプロトコルがあります。

反復可能プロトコル

反復可能プロトコルを使用すると、for..of 構造でどのような値を反復 (取得) できるかなど、JavaScript オブジェクトの反復動作を定義またはカスタマイズできます。 Array や Map など、一部の組み込み型は組み込みの反復可能オブジェクトであり、デフォルトの反復動作を持ちますが、そうでない型 (Object など) もあります。

Iterator インターフェースの目的は、すべてのデータ構造に対する統合アクセスメカニズム、つまり for...of ループを提供することです (詳細は以下を参照)。 for...of ループを使用して特定のデータ構造を走査すると、ループは自動的に Iterator インターフェイスを探し、Symbol.iterator メソッドを呼び出し、オブジェクトのデフォルトのイテレータを返します。

ES6 では、デフォルトの Iterator インターフェイスがデータ構造の Symbol.iterator プロパティにデプロイされることが規定されています。つまり、データ構造が Symbol.iterator プロパティを持つ限り、それは「反復可能」であると見なされます。 Symbol.iterator プロパティ自体は関数であり、現在のデータ構造の既定の反復子生成関数です。この関数を実行すると、トラバーサーが返されます。

反復可能なオブジェクトになるためには、オブジェクト (またはそのプロトタイプチェーン内のオブジェクト) は Symbol.iterator という名前のプロパティを実装する必要があります:

イテレータープロトコル

イテレータープロトコルは、有限または無限の値のシーケンス。

「セット」を表すJavaScript本来のデータ構造は主に配列(Array)とオブジェクト(Object)ですが、ES6ではMapとSetが追加されています。このように、4 つのデータコレクションがあり、ユーザーはそれらを組み合わせて独自のデータ構造を定義することもできます。たとえば、配列のメンバーはマップであり、マップのメンバーはオブジェクトです。これには、すべての異なるデータ構造を処理するための統一されたインターフェイスメカニズムが必要です。

Iterator(イテレーター)はそんな仕組みです。これは、さまざまなデータ構造に統一されたアクセスメカニズムを提供するインターフェイスです。データ構造が Iterator インターフェイスをデプロイしている限り、トラバーサル操作を完了できます (つまり、データ構造のすべてのメンバーを順番に処理します)。

Iterator には 3 つの機能があります。1 つ目は、さまざまなデータ構造に統合されたシンプルなアクセスインターフェイスを提供します。2 つ目は、データ構造のメンバーを特定の順序で配置できるようにします。3 つ目は、ES6 が新しいトラバーサルコマンドを作成します。 ...of ループ、Iterator インターフェイスは主に for...of による消費に使用されます。

Iteratorのトラバース処理はこんな感じです。

現在のデータ構造の開始位置を指すポインターオブジェクトを作成します。言い換えれば、トラバーサーオブジェクトは本質的にはポインターオブジェクトです。
初めてポインターオブジェクトの next メソッドを呼び出すときに、ポインターをデータ構造の最初のメンバーに指すことができます。
ポインターオブジェクトの next メソッドが 2 回目に呼び出されるとき、ポインターはデータ構造の 2 番目のメンバーを指します。
データ構造の終わりを指すまで、ポインターオブジェクトの次のメソッドを継続的に呼び出します。

次のメソッドが呼び出されるたびに、データ構造の現在のメンバーの情報が返されます。具体的には、value と Done の 2 つのプロパティを含むオブジェクトを返します。このうち、value 属性は現在のメンバーの値であり、done 属性はトラバーサルが終了したかどうかを示すブール値です。

var someString = "hi";
typeof someString[Symbol.iterator]; // "function"
var iterator = someString[Symbol.iterator]();
iterator + "";  // "[object String Iterator]"
iterator.next()    // { value: "h", done: false }
iterator.next();   // { value: "i", done: false }
iterator.next();   // { value: undefined, done: true }

ログイン後にコピー

Iteratorインターフェースを備えたネイティブデータ構造は次のとおりです。

Array
Map
Set
String
TypedArray
関数引数オブジェクト
NodeList オブジェクト

オブジェクトにはIterator インターフェイスはい、オブジェクトが for...of ループで呼び出すことができる Iterator インターフェイスを持ちたい場合は、Symbol.iterator のプロパティにトラバーサー生成メソッドをデプロイする必要があります (プロトタイプチェーン上のオブジェクトは、この方法）。

Iterator インターフェイスを呼び出す場合

以下で紹介する for...of ループに加えて、Iterator インターフェイス (つまり、Symbol.iterator メソッド) がデフォルトで呼び出される場合があります。また、スプレッド演算子は、デフォルトの Iterator インターフェイスとも呼ばれます。

実際、これは、Iterator インターフェイスでデプロイされたデータ構造を配列に変換する簡単なメカニズムを提供します。つまり、データ構造が Iterator インターフェイスをデプロイしている限り、スプレッド演算子を使用して配列に変換できます。

配列トラバーサルはトラバーサーインターフェイスを呼び出すため、配列をパラメーターとして受け入れる場合は実際にトラバーサーインターフェイスを呼び出します。ここではいくつかの例を示します。

for...of
Array.from()
Map()、Set()、WeakMap()、WeakSet() (new Map([['a',1など) ] ,['b',2]]))
Promise.all()
Promise.race()

for...of

for...of 循环是最新添加到 JavaScript 循环系列中的循环。

它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代。

在研究 for...of 循环之前，先快速了解下其他 for 循环，看看它们有哪些不足之处。

for 循环

for 循环的最大缺点是需要跟踪计数器和退出条件。我们使用变量 i 作为计数器来跟踪循环并访问数组中的值。我们还使用 Array.length 来判断循环的退出条件。

虽然 for 循环在循环数组时的确具有优势，但是某些数据结构不是数组，因此并非始终适合使用 loop 循环。

for...in 循环

for...in 循环改善了 for 循环的不足之处，它消除了计数器逻辑和退出条件。但是依然需要使用 index 来访问数组的值.

此外，当你需要向数组中添加额外的方法（或另一个对象）时，for...in 循环会带来很大的麻烦。因为 for...in 循环循环访问所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。这就是为何在循环访问数组时，不建议使用 for...in 循环。

注意： forEach 循环是另一种形式的 JavaScript 循环。但是，forEach() 实际上是数组方法，因此只能用在数组中。也无法停止或退出 forEach 循环。如果希望你的循环中出现这种行为，则需要使用基本的 for 循环。

for...of 循环

for...of 循环用于循环访问任何可迭代的数据类型。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 console.log(digit);
}

ログイン後にコピー

可以随时停止或退出 for...of 循环。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 if (digit % 2 === 0) {
  continue;
 }
 console.log(digit); //1,3,5,7,9
}

ログイン後にコピー

不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。