ES7 中如何使用 forEach 和 async/await 循环数组-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数组进行循环操作，进行一些数据处理和业务逻辑的处理。ES7 中提供了 forEach 和 async/await 两种方式来循环数组，这篇文章将详细介绍它们的使用和区别。

forEach 循环数组

在 ES5 中，我们通常使用 for 循环来遍历数组中的元素。在 ES6 中，我们可以使用 for/of 循环来进行数组的遍历。而在 ES7 中，forEach 成为了新的可选项，用来遍历数组。它的语法如下：

array.forEach((element, index) => {
  // 处理每个元素的逻辑
});

其中，element 是数组中的每个元素，而 index 则是元素的索引值。

示例代码：

const numbers = [1,2,3,4,5];
numbers.forEach((number, index) => {
  console.log(`第 ${index+1} 个数字是 ${number}`);
});

在 forEach 中，我们可以做任何循环操作，并且可以直接修改数组元素的值。但是它有一个局限性，就是它是同步执行的，它并不关心每个元素的处理时间和顺序。这就导致它不能够用于需要异步处理的情况。

为了解决 forEach 的局限性，ES7 引入了 async/await，这是一种异步处理方式，可以用于处理需要异步操作的情况。它的语法如下：

async function processArray(array) {
  for (const element of array) {
    await processArrayElement(element);
  }
}

在 async/await 循环数组中，我们使用 for/of 循环数组中的每个元素。在循环内部调用异步操作 processArrayElement，使用 await 关键字保证它的异步执行。这样，就可以保证每个元素的处理顺序和时间，同时避免了阻塞线程。

示例代码：

async function processNumbers(numbers) {
  for (const number of numbers) {
    await processNumber(number);
  }
}

在上面的代码中，我们定义了一个异步操作 processNumber，它可以用于对每个数字进行异步处理。在调用 processNumbers 的时候，会对每个数字进行异步处理，并且按顺序输出数字。

在日常开发中，我们经常需要循环遍历数组，进行数据处理，其中 forEach 是用于同步处理的，适用于简单的循环操作。而 async/await 则是用于异步处理的，适用于复杂的异步场景，它可以保证每个元素的处理时间和顺序。虽然它们有不同的使用场景，但它们在处理数组上都能很好地工作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654eee7f7d4982a6eb7fd342