JavaScript 等待 forEach 完成

在 JavaScript 中，forEach 是一个常用的数组方法，它用于迭代数组的每个元素并执行提供的回调函数。然而，由于它是一个异步方法，所以在执行完 forEach 后不能直接确保所有的迭代都已经完成。

在某些情况下，我们可能需要在 forEach 完成后执行一些额外的操作或者等待所有的迭代完成后才继续进行其他操作。本文将介绍如何实现等待 forEach 完成的方法。

方法一：使用 for...of 循环和 async/await

async function forEachAsync(array, callback) {
  for (const element of array) {
    await callback(element);
  }
}

// 使用示例
async function main() {
  const array = [1, 2, 3];

  await forEachAsync(array, async (element) => {
    console.log(element);
    // 模拟异步操作
    await new Promise((resolve) => setTimeout(resolve, 1000));
  });

  console.log("所有迭代已完成");
}

await main();

使用 for...of 循环结合 async/await，我们可以创建一个自定义的异步 forEach 方法 forEachAsync。该方法会在每个元素上调用提供的异步回调函数，并通过 await 关键字等待每个回调函数完成后再继续进行下一个迭代。

需要注意的是，main 函数外部无法使用 await 关键字，因此我们需要将其包装在一个 async 函数内。

方法二：使用 Promise 和 Promise.all

function forEachAsync(array, callback) {
  return Promise.all(array.map(callback));
}

// 使用示例
const array = [1, 2, 3];

forEachAsync(array, async (element) => {
  console.log(element);
  // 模拟异步操作
  await new Promise((resolve) => setTimeout(resolve, 1000));
})
  .then(() => {
    console.log("所有迭代已完成");
  });

在这种方法中，我们使用了 Promise.all 方法和 array.map 方法来创建一个返回 Promise 的数组。每个回调函数都会返回一个 Promise 实例，并使用 map 方法将其放入数组中。

然后，我们使用 Promise.all 来等待所有的 Promise 实例都完成后再继续进行后续操作。

需要注意的是，这种方法并不能保证执行顺序与原始数组的顺序一致。

这是使用 JavaScript 实现等待 forEach 完成的两种常见方法。根据实际需求选择其中之一来处理等待 forEach 完成的情况。