来看 2017 年 ECMAScript 中的异步迭代器和 for-await-of 循环

在 ES2017 标准中，ECMAScript 引入了异步迭代器和 for-await-of 循环，这是一个重大的里程碑，因为它增强了 JavaScript 的功能性能，并且为 JavaScript 开发者提供了更多的工具，让他们更容易地处理异步操作。

异步迭代器

在 ES2015 中，JavaScript 引入了迭代器（iterator），它提供了对集合对象的访问，并提供了一种标准的方法来遍历数组、字符串、集合等。在 ES2017 标准中，异步迭代器增强了这个功能，它提供了一种用于遍历异步集合对象的标准方法。

异步迭代器是一个对象，它可以同时处理异步数据和异步控制流。当异步迭代器处理元素时，它会返回一个 Promise 对象，该 Promise 对象将在异步操作完成后解决，并提供下一个元素的值。这种方式允许异步迭代器在处理异步数据时，以一种与同步迭代器相同的方式进行遍历。

让我们看一个例子：

// javascriptcn.com 代码示例
const asyncIterable = {
    async *[Symbol.asyncIterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
(async function() {
    for await (const x of asyncIterable) {
        console.log(x);
    }
})();

上述代码中，我们定义了一个异步迭代器 asyncIterable，它由一个 Symbol.asyncIterator 属性指定。在迭代器函数中使用了 async 关键字，这允许我们使用异步方式生成数据。然后我们通过 for await (const x of asyncIterable) 对 asyncIterable 进行遍历，使用 await 关键字等待异步操作，以获取 x 的值。

for-await-of 循环

在 ES2017 标准中，for-await-of 循环用于循环异步集合对象，并将每个元素的值进行处理。这个循环与 for-of 循环类似，但是它可以在不阻塞事件循环的同时，等待异步操作完成。

让我们看一个例子：

// javascriptcn.com 代码示例
async function* asyncGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

(async function() {
    for await (const x of asyncGenerator()) {
        console.log(x);
    }
})();

上述代码中，我们定义了一个异步生成器函数 asyncGenerator，它生成一个异步迭代器，返回逐一产生值的 yield 语句。然后我们使用 for await (const x of asyncGenerator()) 遍历该异步迭代器并在控制台输出值。

总结

在 ES2017 标准中，异步迭代器和 for-await-of 循环是两个非常有用的功能，它们为 JavaScript 开发者提供了一个新的工具来处理异步操作。异步迭代器允许处理异步数据并且与同步迭代器相似地进行遍历，而 for-await-of 循环则提供了一种更好、更紧凑的方法来处理异步集合对象。这些功能使开发者更容易地编写出高效且可维护的异步代码。

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