JavaScript forEach 按数组顺序执行的三个维度分析

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

文章分析了JavaScript中forEach在同步和异步代码中的行为,指出它在异步情况下不会按顺序等待任务完成,这是常见的陷阱,文章还介绍了几种替代forEach处理异步任务的方法,推荐使用for...of和reduce,以及在需要并发时使用map和Promise.all,感兴趣的朋友跟随小编一起看看吧

1. 同步代码：严格顺序执行

如果你在 forEach 中执行的是纯同步逻辑，它会从头到尾依次执行：

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

2. 异步代码：顺序启动，但不顺序等待（最常见的坑）

当你把 async/await 放在 forEach 中时，forEach 不会等待上一个循环的任务完成才开始下一个。

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('结束');
}
test();
// 实际输出顺序：
// 开始
// 结束
// 3 (延时最短，先完成)
// 2
// 1 (延时最长，最后完成)

原因： forEach 内部的逻辑大致是这样的：for (let i = 0; i < len; i++) { callback(arr[i]); }。它只是简单地调用了回调函数，并没有 await 回调函数的返回值。

3. 特殊规则：跳过“稀疏”位置

forEach 会跳过数组中已删除或未赋值的项（空位），但不会跳过 undefined。

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

总结与最佳实践

如果你需要严格按顺序执行异步任务（即：任务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：如果你不需要顺序，只需要并发

如果你希望所有任务同时开始并等待全部结束，使用 map 配合 Promise.all：

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

结论： 在处理同步逻辑时，forEach 是顺序的；在处理 async/await 异步逻辑时，它会导致“并发”执行（实际上是顺序启动，乱序结束），这通常不是你想要的结果。

到此这篇关于JavaScript forEach 按数组顺序执行的三个维度分析的文章就介绍到这了,更多相关js foreach数组顺序执行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript Class类实例讲解
ES6提供了更接近面向对象(注意:javascript本质上是基于对象的语言)语言的写法,引入了Class(类)这个概念,作为对象的模板,下面这篇文章主要给大家介绍了关于JavaScript ES6中class定义类的相关资料,需要的朋友可以参考下
2022-11-11
浅析JavaScript中的平稳退化（graceful degradation）
所谓平稳退化，就是指可以让访问者在浏览器不支持javascript或者禁用了JavaScript的时候依旧可以顺利的浏览你的网页，下文给大家简单介绍了js中的平稳退化，感兴趣的朋友一起看看吧
2017-07-07
javascript 二分法(数组array)
扩展Array对象，为其添加二分法查找功能,提高查找效率。
2010-04-04
利用JS实现加减简易计算器
这篇文章主要为大家详细介绍了如何利用JavaScript制作一个简单的网页版加减计算器，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-05-05
微信小程序实现手写板
这篇文章主要为大家详细介绍了微信小程序实现手写板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript实现省市县三级级联特效
这篇文章主要为大家详细介绍了JavaScript实现省市县三级级联特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
jQuery与JavaScript节点创建方法的对比
本文主要介绍jQuery与JavaScript节点的创建方法，以及他们的具体代码实现方法，大家可以对比下他们之间的不同，希望对大家编写代码有所帮助
2016-11-11
用javascript作一个通用向导说明
向导可以让你的网站用户快速上手使用你的web应用，提高网站的吸引力。向导一般分为好几个步骤，每个步骤收集一些数据，并且支持退回功能，所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用，灵活且简单的向导框架。
2011-08-08
JS实现图片旋转动画效果封装与使用示例
这篇文章主要介绍了JS实现图片旋转动画效果封装与使用,结合实例形式分析了JavaScript实现图片元素旋转的相关功能代码的封装与使用操作技巧,需要的朋友可以参考下
2018-07-07
AjaxUpLoad.js实现文件上传
这篇文章主要为大家详细介绍了AjaxUpLoad.js实现文件上传的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03