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

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

古い方法

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

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

for(i=0;i<things.length;i++) {
    var thing = things[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 ... of Loop

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

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

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

この文では多くのことを理解する必要があります:

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

以下では、これらの質問に 1 つずつ答えていきます。

組み込み Iterable

まず第一に、JavaScript オブジェクトの一部の組み込みオブジェクトは自然に反復可能です。たとえば、最も簡単に考えられるのは配列オブジェクトです。次のコードのように、配列は

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)
}

を使用する場合にさらに便利です。 in for

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

通常の JavaScript オブジェクトは

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

// 无法正常执行
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

ただし

globalObject staticentriesメソッドは通常のオブジェクトをパラメータとして受け取り、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

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

@@iterator

メソッドを実装するオブジェクトが必要です。 @@ 表記は少し誤解を招きます。実際にやりたいのは、事前定義された 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 です。

Symbol.iterator

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

iterator プロトコル

を実装するオブジェクトを返す必要があります。これは、イテレータ メソッドが next キーを持つオブジェクトを返す必要があり、next キーが関数であることを意味します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">const foo = { [Symbol.iterator]: function() { return { next: function() { } } } } for(const [key, value] of foo) { console.log(key, value) }</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードを実行すると、新しいエラーが発生します。

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

今回は、JavaScript が

Symbol.iterator

メソッドを呼び出そうとしていることと、オブジェクト が実際に オブジェクトであり、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 サイトの他の関連記事を参照してください。