理解 ES12 的 for await...of 循环

在 ES12 中，新增了一个非常有用的循环语句：for await...of。它可以帮助我们在异步操作中进行迭代，并处理异步迭代器返回的 Promise 对象。

异步迭代器

在介绍 for await...of 循环之前，我们需要先了解异步迭代器。异步迭代器是一种返回 Promise 对象的迭代器。它可以让我们在异步操作中进行迭代。

异步迭代器的实现需要满足以下两个条件：

1. 实现 Symbol.asyncIterator 方法，返回一个异步迭代器对象；
2. 异步迭代器对象实现 next 方法，返回一个 Promise 对象。

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

const asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      async next() {
        if (i < 3) {
          await new Promise(resolve => setTimeout(resolve, 1000));
          return { value: i++, done: false };
        }
        return { done: true };
      }
    };
  }
};

在上面的示例中，我们定义了一个异步迭代器对象 asyncIterable，它实现了 Symbol.asyncIterator 方法和 next 方法。next 方法返回一个 Promise 对象，它会在 1 秒后返回一个包含当前值和是否迭代完成的对象。

for await...of 循环

有了异步迭代器，我们就可以使用 for await...of 循环来进行异步迭代了。

for await...of 循环的语法和普通的 for...of 循环类似，只不过它可以处理异步迭代器返回的 Promise 对象。它的语法如下：

for await (const value of asyncIterable) {
  // 处理异步迭代器返回的值
}

下面是一个使用 for await...of 循环的示例：

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

在上面的示例中，我们使用 for await...of 循环来异步迭代 asyncIterable，并打印出每个迭代的值。

指导意义

for await...of 循环是一个非常有用的语法，它可以让我们在异步操作中进行迭代，并处理异步迭代器返回的 Promise 对象。在实际开发中，我们经常需要处理异步操作，比如读取文件、发送网络请求等。使用 for await...of 循环可以让我们更方便地处理这些异步操作。

同时，for await...of 循环也需要我们掌握异步迭代器的基本用法。只有理解了异步迭代器的实现，才能更好地使用 for await...of 循环。

总结

在本文中，我们介绍了 ES12 中的 for await...of 循环，它可以帮助我们在异步操作中进行迭代，并处理异步迭代器返回的 Promise 对象。我们还介绍了异步迭代器的基本用法。掌握了这些知识，我们就可以更方便地处理异步操作了。

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