掌握 JS 异步遍历的利器，畅游代码世界

2023-10-01 05:08:22

在当今快速发展的网络世界中，JavaScript（JS）已成为构建交互式和动态网站的必备语言。其强大的异步特性使开发者能够处理耗时的任务，而不会阻塞用户交互。而掌握 JS 异步遍历技术，则能进一步提升代码效率和用户体验。

异步遍历允许开发者以非阻塞方式逐个处理数据集合中的元素，即使这些元素需要等待外部资源或事件的响应。在 JS 中，实现异步遍历有多种方法，每种方法都适用于不同的场景和需求。

Promise 串行遍历

Promise 提供了一种优雅的方式来处理异步操作。串行遍历使用 Promise.then() 方法，逐个处理数据中的元素，等待每个元素的 Promise 完成再继续处理下一个元素。

const data = [1, 2, 3, 4, 5];

data.forEach((item) => {
  Promise.resolve(item)
    .then((result) => {
      // 处理结果
      console.log(result);
    });
});

forEach 并行遍历

如果需要同时处理多个元素，可以使用 Promise.all() 方法实现并行遍历。Promise.all() 接收一个 Promise 数组作为参数，并返回一个 Promise，该 Promise 在所有输入 Promise 完成后完成。

const data = [1, 2, 3, 4, 5];

Promise.all(data.map((item) => Promise.resolve(item)))
  .then((results) => {
    // 处理所有结果
    console.log(results);
  });

map 并行遍历

map() 方法可用于将数据集合中的每个元素转换为一个新的值。在异步场景中，map() 可以与 Promise 结合使用，以并行处理元素的转换。

const data = [1, 2, 3, 4, 5];

data.map((item) => Promise.resolve(item))
  .then((results) => {
    // 处理转换后的结果
    console.log(results);
  });

for 循环串行遍历

for 循环是一种经典的遍历方法，也可以用于异步遍历。与 Promise.then() 方法类似，for 循环可以逐个处理元素，等待每个元素的异步操作完成再继续处理下一个元素。

const data = [1, 2, 3, 4, 5];

for (let i = 0; i < data.length; i++) {
  Promise.resolve(data[i])
    .then((result) => {
      // 处理结果
      console.log(result);
    });
}

for-of 循环串行遍历

for-of 循环是 ES6 中引入的一种新的循环语法。它可以用于遍历可迭代对象，例如数组。for-of 循环可以与 Promise.then() 方法结合使用，以串行处理元素。

const data = [1, 2, 3, 4, 5];

for (let item of data) {
  Promise.resolve(item)
    .then((result) => {
      // 处理结果
      console.log(result);
    });
}

for-await-of 循环串行遍历

for-await-of 循环是 ES8 中引入的一种异步循环语法。它可以用于遍历可迭代对象，例如数组。与 Promise.then() 方法类似，for-await-of 循环可以逐个处理元素，等待每个元素的异步操作完成再继续处理下一个元素。

const data = [1, 2, 3, 4, 5];

async function asyncForEach(data) {
  for await (let item of data) {
    // 处理结果
    console.log(item);
  }
}

asyncForEach(data);