ES6 の for...of ループと Iterable オブジェクトについて-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ES6 の for...of ループと Iterable オブジェクトについて

青灯夜游

Nov 12, 2020 pm 06:12 PM

es6javascript

ES6 の for...of ループと Iterable オブジェクトについて

推奨チュートリアル: 「JavaScript ビデオチュートリアル」

この記事では、次の for... of ループについて学習します。 ES6。一定の参考値があるので、困っている友達が参考になれば幸いです。

古い方法

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

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

for(i=0;i<things.length><p>これに <code>for ... in</code> ループが続き、オブジェクトのキーと値のペアをループするために使用されます。 </p>
<pre class="brush:php;toolbar:false">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 ループ

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

反復可能 (反復可能) を走査します。＃＃＃物体。反復可能オブジェクトは、

@@ iterator

メソッドを定義するオブジェクトであり、@@iterator メソッドは、iterator プロトコル#を実装するオブジェクトを返します。 ## オブジェクト、またはメソッドがジェネレーター関数です。 この文では多くのことを理解する必要があります:

Iterable

@@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

ただし

global

Object

staticentriesメソッドは通常のオブジェクトをパラメータとして受け取り、iterable オブジェクトを返します。次のようなプログラム: <pre class="brush:php;toolbar:false">const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo)) { console.log(key,':',value) }</pre> 期待する出力を取得するには:

$ node test.js
apples : oranges
pears : prunes

Create your own Iterable

独自の Iterable を作成したい場合オブジェクトの反復にはさらに時間がかかります。前に述べたことを覚えているでしょう: 反復可能オブジェクトは、

@@ iterator

メソッドを定義するオブジェクトであり、

@@iterator

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

表記は少し誤解を招きます。実際にやりたいのは、事前定義された Symbol.iterator シンボルを使用してメソッドを定義することです。イテレータメソッドでオブジェクトを定義し、反復しようとすると: <pre class="brush:php;toolbar:false">const foo = { [Symbol.iterator]: function() { } } for(const [key, value] of foo) { console.log(key, value) }</pre>新しいエラーが発生します:

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

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

Symbol.iterator

メソッドを呼び出しましたが、呼び出しの結果

は

オブジェクトではありません。このエラーを解決するには、iterator メソッドを使用して、iterator プロトコル を実装するオブジェクトを返す必要があります。これは、イテレータメソッドが

キーを持つオブジェクトを返す必要があり、next キーが関数であることを意味します。 <pre class="brush:php;toolbar:false">const foo = { [Symbol.iterator]: function() { return { next: function() { } } } } for(const [key, value] of foo) { console.log(key, value) }</pre> 上記のコードを実行すると、新しいエラーが発生します。 <pre class="brush:php;toolbar:false">for(const [key, value] of foo) { ^ TypeError: Iterator result undefined is not an object</pre> <p>这次 javascript 告诉我们它试图调用 <code>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<p>本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 <code>Symbol.iterator</code> 方法返回一个生成器对象，并且该生成器对象能够在 <code>for ... of</code> 循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 <code>next</code>，直到生成器停止 <code>yield</code> 值为止。</p><pre class="brush:php;toolbar:false">$ node sample-program.js
2
4
6
8
10