JavaScript ES6 for...of 迴圈

在 ES6 之前，有幾種迴圈的寫法可以遍歷一個陣列：

• for 迴圈
• for...in 迴圈
• forEach 方法

這些舊有的方式各有一些缺點。

像是 for 迴圈的語法有點冗長：

for (var index = 0; index < myArray.length; index++) {
    console.log(myArray[index]);
}

ES5 的 forEach 讓語法變得更簡潔：

myArray.forEach(function (value) {
    console.log(value);
});

但有個缺點是你不能使用 break 來中斷迴圈，或用 return 直接返回迴圈最外層。

至於使用 for..in 迴圈，則有很多隱藏陷阱：

for (var index in myArray) {
    console.log(myArray[index]);
}

陷阱像是：

1. 給的 index 型態不是 number (0, 1, 2) 而是 string ("0", "1", "2")
2. for...in 會遍歷到自定義的屬性名稱，像是如果你有定義一個 myArray.name 屬性，你會得到一個 index 叫做 "name"
3. for...in 比較是要讓你用來遍歷一般的 object 屬性

ES6 新的 for...of 語法有什麼好處：

1. 更簡潔直觀的語法
2. 沒有 for...in 的缺點
3. 跟 forEach 不同的是 for...of 可以搭配 break, continue, return 語句
4. for...of 支持遍歷更多的集合類型，像是 string, Map, Set...

for...of 語法：

for (variable of iterable) {
    statement
}

其中 variable 直接是值，而不是索引。

遍歷陣列：

let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}

// 依序輸出
// 11
// 21
// 31

遍歷字串：

let iterable = 'boo';

for (let value of iterable) {
    console.log(value);
}

// 依序輸出
// "b"
// "o"
// "o"