ES9 中的 for await...of 语句

在 ES9 中，新增了一个 for await...of 语句，用于遍历异步迭代器中的值。这个语句的出现，使得我们可以更加方便地处理异步任务，让代码更加简洁易懂。

异步迭代器

在介绍 for await...of 语句之前，我们需要了解异步迭代器的概念。异步迭代器是一个对象，它通过 Symbol.asyncIterator 方法来定义一个异步迭代器的接口。异步迭代器的接口中包含一个 next 方法，用于返回一个 Promise 对象，这个 Promise 对象的值是一个包含 value 和 done 两个属性的对象。

下面是一个简单的异步迭代器实现：

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

for await...of 语句

for await...of 语句用于遍历异步迭代器中的值，它的语法和 for...of 语句类似，只不过它是异步的。使用 for await...of 语句，可以避免使用回调函数或 Promise 链来处理异步任务。

下面是一个使用 for await...of 语句遍历异步迭代器的例子：

// javascriptcn.com 代码示例
async function f() {
  for await (const x of asyncIterable) {
    console.log(x);
  }
}

f();
// 0
// 1
// 2

在上面的例子中，我们使用 async function 声明一个异步函数 f，然后使用 for await...of 语句遍历 asyncIterable 异步迭代器中的值。在每次遍历时，我们使用 const x 来声明一个变量 x，它的值是异步迭代器中的值。在遍历过程中，我们使用 console.log 打印出每个值。

指导意义

for await...of 语句的出现，使得我们可以更加方便地处理异步任务，让代码更加简洁易懂。在使用异步函数时，我们可以使用 for await...of 语句来遍历异步迭代器中的值，而不用使用回调函数或 Promise 链来处理异步任务。

总结

ES9 中的 for await...of 语句是一个用于遍历异步迭代器中的值的语句，它的语法和 for...of 语句类似，只不过它是异步的。使用 for await...of 语句，可以避免使用回调函数或 Promise 链来处理异步任务，使得代码更加简洁易懂。

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