ES9 中的异步迭代器和 for-await-of 循环

随着 JavaScript 的发展，异步编程已经成为了前端开发中不可避免的一部分。ES9 中引入了异步迭代器和 for-await-of 循环，让异步编程变得更加简单和优雅。

异步迭代器

在 ES6 中，我们已经熟悉了迭代器和生成器。迭代器是一种对象，可以通过 next() 方法来逐个访问集合中的元素。生成器则是一种特殊的函数，可以在需要时生成一系列值。

ES9 中，异步迭代器则是一种特殊的迭代器，可以在异步场景下使用。异步迭代器中的 next() 方法返回的是一个 Promise 对象，可以通过 then() 方法来获取异步操作的结果。

下面是一个简单的示例代码，演示了如何使用异步迭代器来遍历一个异步集合：

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

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

在上面的示例代码中，我们定义了一个异步迭代器 asyncIterable，它可以通过 Symbol.asyncIterator 方法来获取一个异步迭代器对象。异步迭代器对象中的 next() 方法返回一个 Promise 对象，我们可以通过 await 来获取异步操作的结果。

在 for-await-of 循环中，我们可以直接使用 await 来获取异步迭代器中的值。这样，我们就可以在异步场景下方便地遍历一系列值了。

for-await-of 循环

for-await-of 循环是 ES9 中新增的一种循环语法，可以用来遍历异步迭代器中的值。for-await-of 循环和普通的 for-of 循环类似，但是可以处理异步操作。

下面是一个简单的示例代码，演示了如何使用 for-await-of 循环来遍历一个异步集合：

// javascriptcn.com 代码示例
async function asyncFunc() {
  const arr = [1, 2, 3];
  for (const num of arr) {
    console.log(num);
  }
}

(async function() {
  const asyncIterable = {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        async next() {
          if (i < 3) {
            return { value: i++, done: false };
          }
          return { done: true };
        }
      };
    }
  };

  for await (const num of asyncIterable) {
    console.log(num);
  }
})();

在上面的示例代码中，我们定义了一个异步函数 asyncFunc，其中使用了普通的 for-of 循环来遍历一个数组。然后，我们又定义了一个异步迭代器 asyncIterable，其中使用了 for-await-of 循环来遍历一个异步集合。

通过比较这两个循环，我们可以发现 for-await-of 循环的语法和普通的 for-of 循环非常类似，但是可以处理异步操作。在异步场景下，for-await-of 循环可以让我们更加方便地遍历异步集合中的值。

总结

在 ES9 中，异步迭代器和 for-await-of 循环为我们带来了更加优雅和简单的异步编程方式。通过使用异步迭代器和 for-await-of 循环，我们可以方便地遍历异步集合中的值，让异步编程变得更加高效和易于维护。

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