ES9 中的 for-await-of 循环：理解和应用

前言

在 JavaScript 语言中，for 循环是非常常见的一种语法结构。在 ES6 中，引入了 for-of 循环，可以方便地遍历数组和类数组对象。但是在处理异步任务时，for-of 循环并不能直接处理异步迭代器返回的 Promise 对象。ES9 中引入了 for-await-of 循环，可以方便地遍历异步迭代器返回的 Promise 对象。

理解 for-await-of 循环

for-await-of 循环是 for-of 循环的异步版本。for-await-of 循环可以遍历异步迭代器返回的 Promise 对象。在遍历时，如果 Promise 对象是 pending 状态，for-await-of 循环会暂停遍历，直到 Promise 对象变为 resolved 状态。for-await-of 循环遍历的是异步迭代器的值，而不是 Promise 对象本身。

for-await-of 循环的语法结构如下：

for await (let value of asyncIterable) {
  // 处理异步任务
}

其中，asyncIterable 是一个异步迭代器，value 是异步迭代器返回的 Promise 对象的 resolved 值。

应用 for-await-of 循环

for-await-of 循环可以方便地处理异步任务。下面是一个使用 for-await-of 循环遍历异步迭代器的示例代码：

// javascriptcn.com 代码示例
async function asyncTask() {
  const asyncIterable = {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        async next() {
          await new Promise(resolve => setTimeout(resolve, 1000));
          if (i < 3) {
            return { value: i++, done: false };
          }
          return { value: undefined, done: true };
        },
      };
    },
  };

  for await (let value of asyncIterable) {
    console.log(value);
  }
}

asyncTask();

在上面的示例代码中，asyncIterable 是一个异步迭代器，它返回一个 Promise 对象。for-await-of 循环遍历 asyncIterable 返回的 Promise 对象的 resolved 值。在每次遍历时，会等待 1 秒钟，然后输出迭代器的值。

总结

for-await-of 循环是 ES9 中新增的语法结构，可以方便地处理异步任务。for-await-of 循环可以遍历异步迭代器返回的 Promise 对象。在遍历时，如果 Promise 对象是 pending 状态，for-await-of 循环会暂停遍历，直到 Promise 对象变为 resolved 状态。for-await-of 循环遍历的是异步迭代器的值，而不是 Promise 对象本身。

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