ES10 中的 for-await-of 循环详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，新增了一个 for-await-of 循环，它可以方便地遍历异步迭代器中的元素。在本篇文章中，我们将详细介绍 for-await-of 循环的用法和特性。

异步迭代器

在介绍 for-await-of 循环之前，我们先来了解一下异步迭代器。异步迭代器是一个对象，它可以通过 Symbol.asyncIterator 属性来定义。异步迭代器的 next 方法返回一个 Promise，这个 Promise 的值是一个对象，包含两个属性：done 和 value。done 表示是否遍历完成，value 表示当前遍历到的值。

下面是一个简单的异步迭代器的示例代码：

// javascriptcn.com 代码示例
const asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      async next() {
        if (i < 3) {
          return { value: i++, done: false };
        }
        return { done: true };
      }
    };
  }
};

在这个示例代码中，我们定义了一个异步迭代器 asyncIterable，它可以遍历 0、1、2 三个数字。通过 Symbol.asyncIterator 属性定义了这个异步迭代器，next 方法返回一个 Promise，这个 Promise 的值是一个对象，包含两个属性：done 和 value。

for-await-of 循环

for-await-of 循环是一个新的循环语句，它可以遍历异步迭代器中的元素。它的语法结构和 for-of 循环类似，只是将 for 替换成了 for-await-of。

下面是一个简单的 for-await-of 循环的示例代码：

(async function() {
  for await (const value of asyncIterable) {
    console.log(value);
  }
})();

在这个示例代码中，我们使用 for-await-of 循环遍历了 asyncIterable 异步迭代器中的元素，并输出了每个元素的值。

值得注意的是，for-await-of 循环必须在 async 函数中使用。

for-await-of 和 Promise.all

for-await-of 循环可以和 Promise.all 方法一起使用，以并行执行异步操作。下面是一个示例代码：

// javascriptcn.com 代码示例
(async function() {
  const promises = [
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ];
  for await (const value of promises) {
    console.log(value);
  }
})();

在这个示例代码中，我们将 Promise 对象放在了数组中，并使用 for-await-of 循环遍历这个数组中的元素。由于 Promise.all 方法会并行执行异步操作，因此 for-await-of 循环也会并行执行遍历操作。

总结

在 ES10 中，新增了一个 for-await-of 循环，它可以方便地遍历异步迭代器中的元素。在使用 for-await-of 循环时，需要将其放在 async 函数中。for-await-of 循环可以和 Promise.all 方法一起使用，以并行执行异步操作。

通过掌握 for-await-of 循环的用法和特性，我们可以更加方便地处理异步操作，提高代码的可读性和可维护性。

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