推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」
この記事では、次の for... of ループについて学習します。 ES6。一定の参考値があるので、困っている友達が参考になれば幸いです。
以前は、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(const thing of things) {
/* ... */
}反復可能 (反復可能) を走査します。 ＃＃＃物体。 反復可能オブジェクトは、
@@ iteratorメソッドを定義するオブジェクトであり、@@iterator メソッドは、iterator プロトコル#を実装するオブジェクトを返します。 ## オブジェクト、またはメソッドがジェネレーター関数です。 この文では多くのことを理解する必要があります:
Iterable組み込み Iterable
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 オブジェクトを返します。次のようなプログラム: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const foo = {
&#39;apples&#39;:&#39;oranges&#39;,
&#39;pears&#39;:&#39;prunes&#39;
}
for(const [key, value] of Object.entries(foo)) {
console.log(key,&#39;:&#39;,value)
}</pre><div class="contentsignin">ログイン後にコピー</div></div> 期待する出力を取得するには: $ node test.js
apples : oranges
pears : prunes
メソッドを定義するオブジェクトであり、
@@iteratorメソッドは実装を返します。 of イテレータ プロトコル のオブジェクト、またはメソッドがジェネレータ関数です。 これらの内容を理解する最も簡単な方法は、反復可能なオブジェクトを段階的に作成することです。まず、@@iterator メソッドを実装するオブジェクトが必要です。@@
表記は少し誤解を招きます。実際にやりたいのは、事前定義された Symbol.iterator シンボルを使用してメソッドを定義することです。 イテレータ メソッドでオブジェクトを定義し、反復しようとすると: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const foo = {
[Symbol.iterator]: function() {
}
}
for(const [key, value] of foo) {
console.log(key, value)
}</pre><div class="contentsignin">ログイン後にコピー</div></div>新しいエラーが発生します:
for(const [key, value] of foo) {
^
TypeError: Result of the Symbol.iterator method is not an objectこれは、次のことを試みていることを示す JavaScript です。
Symbol.iteratorメソッドを呼び出しましたが、呼び出しの結果
は オブジェクトではありません。 このエラーを解決するには、iterator メソッドを使用して、iterator プロトコル を実装するオブジェクトを返す必要があります。これは、イテレータ メソッドが
キーを持つオブジェクトを返す必要があり、next キーが関数であることを意味します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードを実行すると、新しいエラーが発生します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">for(const [key, value] of foo) {
^
TypeError: Iterator result undefined is not an object</pre><div class="contentsignin">ログイン後にコピー</div></div><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<=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
译文地址：https://segmentfault.com/a/1190000023924865
更多编程相关知识，请访问：编程学习网站！！
以上がES6 の for...of ループと Iterable オブジェクトについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
