JavaScript forEach 按數(shù)組順序執(zhí)行的三個維度分析

更新時間：2026年01月10日 09:35:05 作者：亮子AI

文章分析了JavaScript中forEach在同步和異步代碼中的行為,指出它在異步情況下不會按順序等待任務完成,這是常見的陷阱,文章還介紹了幾種替代forEach處理異步任務的方法,推薦使用for...of和reduce,以及在需要并發(fā)時使用map和Promise.all,感興趣的朋友跟隨小編一起看看吧

1. 同步代碼：嚴格順序執(zhí)行

如果你在 forEach 中執(zhí)行的是純同步邏輯，它會從頭到尾依次執(zhí)行：

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});
// 輸出順序永遠是: 1, 2, 3

2. 異步代碼：順序啟動，但不順序等待（最常見的坑）

當你把 async/await 放在 forEach 中時，forEach 不會等待上一個循環(huán)的任務完成才開始下一個。

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const arr = [1, 2, 3];
async function test() {
  console.log('開始');
  arr.forEach(async (num) => {
    await delay(1000 / num); // 不同的延遲時間
    console.log(num);
  });
  console.log('結(jié)束');
}
test();
// 實際輸出順序：
// 開始
// 結(jié)束
// 3 (延時最短，先完成)
// 2
// 1 (延時最長，最后完成)

原因： forEach 內(nèi)部的邏輯大致是這樣的：for (let i = 0; i < len; i++) { callback(arr[i]); }。它只是簡單地調(diào)用了回調(diào)函數(shù)，并沒有 await 回調(diào)函數(shù)的返回值。

3. 特殊規(guī)則：跳過“稀疏”位置

forEach 會跳過數(shù)組中已刪除或未賦值的項（空位），但不會跳過 undefined。

const arr = [1, , 3]; // 索引 1 是空位
arr.forEach((num, i) => console.log(i, num));
// 輸出:
// 0 1
// 2 3
// (跳過了索引 1)

總結(jié)與最佳實踐

如果你需要嚴格按順序執(zhí)行異步任務（即：任務1完成 -> 任務2開始），請不要使用 forEach，改用以下方式：

方法 A：使用for...of（推薦）

for...of 能夠正確處理 await。

for (const num of arr) {
  await doSomethingAsync(num); // 這里會嚴格等待
}

方法 B：使用reduce

arr.reduce(async (promise, num) => {
  await promise;
  await doSomethingAsync(num);
}, Promise.resolve());

方法 C：如果你不需要順序，只需要并發(fā)

如果你希望所有任務同時開始并等待全部結(jié)束，使用 map 配合 Promise.all：

await Promise.all(arr.map(async (num) => {
  await doSomethingAsync(num);
}));

結(jié)論： 在處理同步邏輯時，forEach 是順序的；在處理 async/await 異步邏輯時，它會導致“并發(fā)”執(zhí)行（實際上是順序啟動，亂序結(jié)束），這通常不是你想要的結(jié)果。

到此這篇關(guān)于JavaScript forEach 按數(shù)組順序執(zhí)行的三個維度分析的文章就介紹到這了,更多相關(guān)js foreach數(shù)組順序執(zhí)行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: