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

在 JavaScript 中，我们经常会使用 for 循环来遍历数组或对象。但在 ES9 中，新增了一个 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 Promise.resolve({ value: i++, done: false });
        }
        return Promise.resolve({ done: true });
      }
    };
  }
};

for-await-of 循环语法

for-await-of 循环的语法与 for-of 循环非常相似，只是将关键字中的 of 替换为 await of。下面是 for-await-of 循环的语法示例：

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

for-await-of 循环的用途

for-await-of 循环的主要用途是在异步环境中遍历异步迭代器对象。它可以帮助我们更方便地处理异步操作，避免回调地狱的问题。

下面是一个使用 for-await-of 循环遍历异步迭代器对象的示例：

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

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

asyncFunc();

for-await-of 循环的注意事项

使用 for-await-of 循环时，需要注意以下几点：

只能用于异步迭代器对象。
在循环中，每个元素都是一个 Promise 对象，需要使用 await 关键字来等待 Promise 对象的解析。
如果异步迭代器对象中的某个 Promise 对象被拒绝了，for-await-of 循环会抛出一个异常并停止迭代。

总结

for-await-of 循环是 ES9 中新增的一个语法，它可以帮助我们更方便地处理异步操作。在使用 for-await-of 循环时，需要注意异步迭代器对象的特点以及每个元素都是一个 Promise 对象的事实。如果你正在处理异步操作，建议尝试使用 for-await-of 循环来遍历异步迭代器对象。

示例代码

下面是一个完整的示例代码，用于演示如何使用 for-await-of 循环遍历异步迭代器对象：

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

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

asyncFunc();

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