为何嵌套forEach中使用await不符合预期？移除await则正常

你的猜测完全正确，问题的根源就在于await的行为和Array.prototype.forEach的设计逻辑不匹配，具体拆解如下：

1. forEach根本不支持异步等待 #

forEach的设计初衷是同步遍历数组：它会依次调用每个元素的回调函数，但不会等待回调中的异步操作完成，更不会返回Promise。哪怕你给回调加上async关键字，或者在forEach前面加await，都没用——因为forEach的返回值是undefined，await undefined会立即被解析，不会有任何等待效果。

2. 加await时的执行流程（不符合预期的原因） #

看你的代码：

const firstArray = ['toto', 'toto']; 
const secondArray = ['titi', 'titi']; 

firstArray.forEach(async (toto, i) => { 
  await secondArray.forEach(async titi => { 
    // 假设这里有真实的异步操作，比如 await new Promise(resolve => setTimeout(resolve, 100))
    console.log(titi, i); 
  }); 
  console.log(toto, i); 
});

执行时的顺序是这样的：

• firstArray的forEach同步遍历第一个元素（toto，i=0），调用async回调函数
• 回调里执行await secondArray.forEach(...)：forEach同步遍历secondArray的两个元素，分别调用async回调，但不会等待这些回调里的异步操作完成，直接返回undefined
• await undefined立即完成，所以马上执行console.log(toto, 0)
• 紧接着firstArray的forEach遍历第二个元素（toto，i=1），重复上述步骤，执行console.log(toto, 1)
• 等当前同步任务全部执行完后，事件队列里的异步回调才开始执行，输出所有的console.log(titi, i)

最终输出顺序会是：

toto 0
toto 1
titi 0
titi 0
titi 1
titi 1

这显然和你预期的「先处理完当前toto对应的所有titi，再输出toto」不符。

3. 移除await时的「符合预期」是假象？ #

你说移除await后输出符合预期，其实本质上forEach还是没有等待异步操作，只是可能你的异步逻辑比较简单（比如没有实际的await耗时操作），导致同步代码的执行顺序刚好符合你的预期。如果异步操作有明显延迟，移除await后的输出顺序依然会混乱。

正确的解决方式：用for...of替代forEach #

如果想要真正等待异步操作完成，按顺序执行，应该使用for...of循环，它天然支持await：

const firstArray = ['toto', 'toto']; 
const secondArray = ['titi', 'titi']; 

async function processArrays() {
  for (let [i, toto] of firstArray.entries()) {
    for (let titi of secondArray) {
      // 这里的异步操作会被等待
      // await new Promise(resolve => setTimeout(resolve, 100))
      console.log(titi, i);
    }
    console.log(toto, i);
  }
}

processArrays();

这样就能得到符合预期的输出顺序：

titi 0
titi 0
toto 0
titi 1
titi 1
toto 1

内容的提问来源于stack exchange，提问作者mjarraya