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

在我们正常的表里数组操作中有两大类方式：一种是通过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 是并行执行的