ES6 の for...of ループと反復可能オブジェクトの詳細な説明

この記事では、ES6 のfor ... ofループについて学習します。

古い方法

以前は、JavaScript をトラバースする方法が 2 つありました。

1 つ目は、古典的なfor iループです。これを使用すると、配列またはインデックス可能でlengthプロパティを持つ任意のオブジェクトを反復処理できます。

for(i=0;i
        

         ログイン後にコピー
        
       

これにfor ... inループが続き、オブジェクトのキーと値のペアをループするために使用されます。

for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }

for ... inこのループは、オブジェクトの列挙可能な各プロパティをループするため、余談として見られることがよくあります。これには、プロトタイプ チェーン内の親オブジェクトのプロパティと、メソッドに割り当てられたすべてのプロパティが含まれます。言い換えれば、人々が予期しないようなことを経験するということです。for ... inを使用すると、通常、不要な属性を避けるためにループ ブロック内に多くのガード句が含まれることになります。

初期の JavaScript は、ライブラリを通じてこの問題を解決しました。多くの JavaScript ライブラリ (例: Prototype.js、jQuery、lodash など) には、for i なしで実行できるeachやforeachなどのユーティリティ メソッドまたは関数があります。またはfor ... inオブジェクトと配列をループします。

for ... ofループは、サードパーティ ライブラリを使用せずにこれらの問題の一部を解決しようとする ES6 の方法です。

for … of

for ... ofLoop

for(const thing of things) { /* ... */ }

これはiterableオブジェクトを走査します。

反復可能オブジェクトは、@@ iteratorメソッドを定義するオブジェクトであり、@@iteratorメソッドは、iterator プロトコル#を実装するオブジェクトを返します。 ## オブジェクト、またはメソッドがジェネレーター関数です。

• Iterableobject
• @@iteratorメソッド (@@の意味は何ですか?)
• イテレータプロトコル (ここでのプロトコルの意味は何ですか?)
待機、反復 (反復可能)と iterator (反復子) は同じものではありませんか?
さらに、ジェネレーター関数とは一体何なのでしょうか？

for ... ofループで使用できます。

const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing) }

apples oranges pears

entriesメソッドもあります。この反復可能オブジェクトは、反復ごとにキーと値を返します。たとえば、次のコード:

const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing) }

[ 0, 'apples' ] [ 1, 'oranges' ] [ 2, 'pears' ]

entriesメソッドは、次の構文

const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value) }

ループ内で 2 つの変数が宣言されます。1 つは配列の最初の項目 (値のキーまたはインデックス) を返すためのもので、もう 1 つは 2 番目の項目 (インデックスが実際に対応する値) を返すためのものです。に）。

反復可能ではありません。次のコードを実行すると、

// 无法正常执行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo) { console.log(key,':',value) }

$ node test.js /path/to/test.js:6 for(const [key, value] of foo) { TypeError: foo is not iterable

globalObjectstaticentriesメソッドは通常のオブジェクトをパラメータとして受け取り、iterableオブジェクトを返します。次のようなプログラム:

const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo)) { console.log(key,':',value) }

$ node test.js apples : oranges pears : prunes

Create your own Iterable

独自の Iterable オブジェクトを作成したい場合は、より多くの時間。前に述べたことを覚えているでしょう:

反復可能オブジェクトは、

メソッドを定義するオブジェクトであり、 @@iteratorメソッドは実装を返します。 of イテレータ プロトコルのオブジェクト、またはメソッドがジェネレータ関数です。 これらの内容を理解する最も簡単な方法は、反復可能なオブジェクトを段階的に作成することです。まず、

メソッドを実装するオブジェクトが必要です。@@表記は少し誤解を招きます。実際にやりたいのは、事前定義されたSymbol.iteratorシンボルを使用してメソッドを定義することです。イテレータ メソッドでオブジェクトを定義し、反復しようとすると:

const foo = { [Symbol.iterator]: function() { } } for(const [key, value] of foo) { console.log(key, value) }

新しいエラーが発生します:

for(const [key, value] of foo) { ^ TypeError: Result of the Symbol.iterator method is not an object

これは、次のことを試みていることを示す JavaScript です。

メソッドを呼び出しましたが、呼び出しの結果はオブジェクトではありません。このエラーを解決するには、iterator メソッドを使用して、

を実装するオブジェクトを返す必要があります。これは、イテレータ メソッドがnextキーを持つオブジェクトを返す必要があり、nextキーが関数であることを意味します。

const foo = { [Symbol.iterator]: function() { return { next: function() { } } } } for(const [key, value] of foo) { console.log(key, value) }

for(const [key, value] of foo) { ^ TypeError: Iterator result undefined is not an object

今回は、JavaScript が

メソッドを呼び出そうとしていることと、オブジェクトが実際にオブジェクトであり、next# を実装していることを示しています。 ## メソッドですが、nextの戻り値は JavaScript が予期するオブジェクトではありません。

next函数需要返回有特定格式的对象——有value和done这两个键。

next: function() { //... return { done: false, value: 'next value' } }

done键是可选的。如果值为true（表示迭代器已完成迭代），则说明迭代已结束。

如果done为false或不存在，则需要value键。value键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true} } return { value:this.currentValue } }).bind(this) } } } const foo = new First20Evens; for(const value of foo) { console.log(value) }

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i } } }() } } const foo = new First20Evens; for(const item of foo) { console.log(item) }

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的Symbol.iterator方法返回一个生成器对象，并且该生成器对象能够在for ... of循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用next，直到生成器停止yield值为止。

$ node sample-program.js 2 4 6 8 10

英文原文地址：https://alanstorm.com/es6s-many-for-loops-and-iterable-objects/

作者：Alan Storm

更多编程相关知识，请访问：编程视频！！

以上がES6 の for...of ループと反復可能オブジェクトの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。