JavaScript 中 foreach 的回调函数并行执行探究

最新推荐文章于 2025-04-21 00:00:00 发布

Louis_lan

最新推荐文章于 2025-04-21 00:00:00 发布

阅读量2.4k

点赞数 1

分类专栏：前端web

本文链接：https://blog.youkuaiyun.com/liu14lang/article/details/106396160

版权

前端web 专栏收录该内容

14 篇文章

订阅专栏

博客探讨了JavaScript中foreach和for循环在处理同步任务时的串行执行特性，并指出在面对异步任务时，尽管for循环保持串行，但foreach配合async/await能实现并行执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们正常的表里数组操作中有两大类方式：一种是通过for/while的方式进行遍历，另一种就是通过Array内置的方法，比如 foreach，map，every，some，reduce等。

这些操作处理同步的回调函数都是串行执行的，以下选取 for 和 foreach 做示例：

// 定义数组
const arr = [1,'a',2,'b',3,'c']
// 定义同步回调函数
const foo = i => {
  if(typeof i === 'number'){
    for(let i =0;i<1000000000;i++){
    }
    console.log(i)
  }else{
    console.log(i)
  }
  return true;
}

for 函数执行结果：

// 定义for函数遍历
function a() {
  for (var i = 0; i < arr.length; i++) {
    foo(arr[i])
  }
}
a() // 输出：1 a 2 b 3 c

foreach 执行结果：

// map,some,every,reduce 执行结果都一样,请自行验证
function e() {
  arr.map((a) => foo(a))
}
e()  // 输出：1 a 2 b 3 c

结论：对于同步任务两者的表现都是串行执行

js 对于异步任务都是交给浏览器并行执行的，但是最新的 ES 语法中有 async/await 语法糖，它可以将异步任务当作同步任务的形式来执行。

那对于 async/await 这种的异步任务，这两种遍历方式是如何执行的呢？请看以下示例：

// 定义数组
const arr = [1,'a',2,'b',3,'c']
// 定义异步任务
const foo = i => {
  return new Promise((resolve, reject) => {
    if(typeof i === 'number'){
      setTimeout(() => {
        console.log(i)
        resolve(i)
      }, 500)
    }else{
      setTimeout(() => {
        console.log(i)
        resolve(i)
      }, 1000)
    }
  })
}

for 函数执行结果：

async function a() {
  for (var i = 0; i < arr.length; i++) {
    await foo(arr[i])
  }
}
a() // 输出：1 a 2 b 3 c

foreach 执行结果：

// map,some,every,reduce 执行结果都一样,请自行验证
function e() {
  arr.forEach(async (a) => await foo(a))
}
e() // 输出：1 2 3 a b c

结论：由此可见 for 这类遍历对于 async/await 任务依然是串行执行，但是 forEach 这类遍历对于 async/await 是并行执行的