JavaScript ES6 for...of 迴圈

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

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

像是 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"

IE 最新版瀏覽器 IE11 還不支援 for...of。