快捷導(dǎo)航

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

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

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

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

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

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

2. 異步代碼：順序啟動(dòng)，但不順序等待（最常見(jiàn)的坑）

當(dāng)你把 async/await 放在 forEach 中時(shí)，forEach 不會(huì)等待上一個(gè)循環(huán)的任務(wù)完成才開(kāi)始下一個(gè)。

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

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

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

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

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

總結(jié)與最佳實(shí)踐

如果你需要嚴(yán)格按順序執(zhí)行異步任務(wù)（即：任務(wù)1完成 -> 任務(wù)2開(kāi)始），請(qǐng)不要使用 forEach，改用以下方式：

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

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

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

方法 B：使用reduce

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

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

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

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

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

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

您可能感興趣的文章: