Array迴圈for、for in、for of、forEach各間優劣
JavaScript中有多種迴圈Array的方式,你是否常常分不清他們的細微差別,和適用場景。本文將詳細梳理各間的優缺點,整理成表以便對比。
迴圈 | 可訪問element | 可訪問index | 可迭代property | 支援中斷 | 支援await | 支援任意位置開始 |
---|---|---|---|---|---|---|
for | √ | √ | × | √ | √ | √ |
for in | √ | × | √ | √ | √ | × |
forEach | √ | √ | × | × | × | × |
for of | √ | √ | × | √ | √ | × |
for (ES1)
這個迴圈方式歷史悠久,從ECMAScript 1就被支援。
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (let index=0; index < arr.length; index++) {
const elem = arr[index];
console.log(index, elem);
}
// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'
for迴圈方式通用,迭代過程可以訪問元素和當前元素下標索引,但是語法上略顯冗長。
for in (ES1)
for in的歷史同for一樣悠久。
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (const key in arr) {
console.log(key);
}
// Output:
// '0'
// '1'
// '2'
// 'prop'
for in用來迴圈陣列不是一個合適的選擇。
- 迭代的是屬性key,不是值
- 由於屬性key是字串,迭代出的元素索引是string,不是number.
- 迭代的是陣列例項上所有可列舉的屬性key,而不是陣列內元素。
如果你想獲取一個物件所有的可列舉屬性(包含原型鏈上的),那麼for in倒是可以勝任,若僅僅是物件自身宣告的屬性,那Object.keys更合適。
forEach (ES5)
鑑於for和for-in都不特別適合在Arrays上迴圈,因此在ECMAScript 5中引入了輔助方法:Array.prototype.forEach.
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
arr.forEach((elem, index) => {
console.log(elem, index);
});
// Output:
// 'a', 0
// 'b', 1
// 'c', 2
這個方法很方便,它讓我們可以訪問陣列元素和陣列元素下標,而不需要做太多的事情。箭頭函式(在ES6中引入)使該方法在語法上更加優雅。
forEach主要確定是:
- 迴圈內部不支援await操作。
- 即使找到你想要的元素,也無法中斷迴圈。
要實現中斷迴圈,可以使用同期引入的Array.prototype.same方法。some迴圈遍歷所有Array元素,並在其回撥返回一個真值時停止。
const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
if (index >= 2) {
return true; //結束迴圈
}
console.log(elem);
// 隱式返回假值 undefined,繼續迴圈
});
// Output:
// 'red'
// 'green'
for of (ES6)
for of是 ECMAScript 6 新引入的語法。
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (const elem of arr) {
console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'
for of很適合遍歷陣列:
- 迭代所有陣列元素
- 內部支援await,甚至是ES2018中引入的for-await-of語法
- 可以使用 break 和 continue 跳出迴圈
for-of的另一個好處是,我們不僅可以遍歷陣列,還可以遍歷任何可迭代物件(例如map)
const myMap = new Map()
.set(false, 'no')
.set(true, 'yes')
;
for (const [key, value] of myMap) {
console.log(key, value);
}
// Output:
// false, 'no'
// true, 'yes'
遍歷myMap會生成[key, value]對,對其進行解構方便直接訪問。
如果你在迴圈中需要感知當前元素索引,可以通過Array方法entries返回可迭代的 [index,value]對。 和map一樣的解構直接訪問index、value:
const arr = ['chocolate', 'vanilla', 'strawberry'];
for (const [index, value] of arr.entries()) {
console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'
https://www.houdianzi.com/ logo設計公司
迴圈體內 await 測試
準備如下程式碼用於測試迴圈體內await,getFruit模擬遠端服務延遲返回。
const fruits = ["apple", "grape", "pear"];
const sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
const getFruit = (fruit) => {
return sleep(2000).then((v) => fruit);
};
先看for of, 元素之間會按預期間隔輸出。
(async function(){
console.log('start');
for (fruit of fruits) {
const element = await getFruit(fruit);
console.log(element);
}
console.log('start');
})();
//3個元素 間隔2s輸出
"start"
"apple"
"grape"
"pear"
"end"
再看forEach, 注意forEach呼叫後直接返回輸出 loop end, 間隔2s 後同時輸出了後面結果,並沒有按預期各個間隔輸出。
(async function () {
console.log("foreach loop start ....");
fruits.forEach(async value => {
const element = await getFruit(value);
console.log(element);
});
console.log("foreach loop end ....");
})();
//同時輸出
foreach loop start ....
foreach loop end ....
//間隔2s 後同時輸出下面3個
apple
grape
pear