推薦教學：《JavaScript影片教學》
#本文將研究 ES6 的 for ... of 迴圈。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
在過去，有兩種方法可以遍歷 javascript。
首先是經典的 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 等）都有類似each 或foreach 這樣的工具方法或函數，可讓你不需要for i 或for ... in 迴圈去遍歷物件和陣列。
for ... of 迴圈是 ES6 試圖不用第三方函式庫去解決其中一些問題的方式。
for ... of 迴圈
for(const thing of things) {
/* ... */
}它將遍歷一個 可迭代（ iterable）物件。
可迭代對像是定義了@@ iterator 方法的對象，而且@@iterator 方法傳回一個實作了迭代器協定的對象，或該方法是生成器函數。
在這句話中你需要理解很多東西：
@@是什麼意思？）下面逐一解決這些疑問。
首先，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)
}在for循環中宣告了兩個變數：一個用於傳回數組的第一項（值的鍵或索引），另一個用於第二項（該索引實際對應的值）。
一個普通的 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#然而全域Object 物件的靜態entries 方法接受一個普通物件作為參數，並傳回一個可迭代物件。就像這樣的程式：
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
@@ iterator 方法的對象，而且@@iterator 方法回傳一個實作了迭代器協定的對象，或者該方法是生成器函數。搞懂這些內容的最簡單方法就是一步一步去建立可迭代的物件。首先，我們需要一個實作
@@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 objectSymbol. 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 告诉我们它试图调用 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中文網其他相關文章！
