在 JavaScript 的异步编程中，迭代器（Iterator）和生成器（Generator）是非常重要的概念。它们可以帮助我们更好地处理异步操作，使得代码更加简洁、易读和可维护。而在 ES8 中，又引入了一种新的概念：异步迭代器（Async Iterator）。本文将详细介绍异步迭代器的使用及实现。
什么是异步迭代器？
异步迭代器是一种支持异步操作的迭代器。在 ES6 中，我们已经学习过迭代器和生成器的基本使用方法，它们可以帮助我们遍历一个数据集合，例如数组、Set、Map 等。而异步迭代器则是在这个基础上，增加了异步操作的支持。
异步迭代器的基本用法和普通迭代器类似，都是通过 next() 方法来获取下一个值。不同的是，异步迭代器返回的是一个 Promise 对象，因为异步操作本身就是基于 Promise 实现的。
异步迭代器的使用
我们可以通过以下代码来创建一个异步迭代器：
async function* asyncGenerator() {
yield 1;
yield 2;
yield 3;
}这里的 async 表示这是一个异步函数，* 表示这是一个生成器函数，因此它返回的是一个异步迭代器。我们可以通过 for-await-of 循环来遍历这个异步迭代器：
async function main() {
for await (const value of asyncGenerator()) {
console.log(value);
}
}
main(); // 输出 1、2、3这里用到了 for-await-of 循环，它可以遍历异步迭代器返回的 Promise 对象，并在 Promise 对象 resolve 后获取其值。
除了使用生成器函数，我们还可以使用一个普通对象来创建异步迭代器：
// javascriptcn.com 代码示例
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 };
}
};
}
};
async function main() {
for await (const value of asyncIterable) {
console.log(value);
}
}
main(); // 输出 0、1、2这里需要注意的是，我们需要在对象上实现一个名为 [Symbol.asyncIterator] 的方法，它返回一个异步迭代器对象。异步迭代器对象需要实现一个 next() 方法，返回一个 Promise 对象，其中 value 表示当前值，done 表示是否已经遍历完。
异步迭代器的实现
我们来看一下异步迭代器的实现原理。其实它的实现和普通迭代器类似，都是通过一个循环来不断返回下一个值，只不过在异步迭代器中，我们需要使用 Promise 来实现异步操作。
下面是一个简单的实现示例：
async function* asyncGenerator() {
let i = 0;
while (true) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield i++;
}
}这里的 asyncGenerator 函数返回一个异步迭代器对象，它通过一个 while 循环来不断返回下一个值。在每次返回值前，我们使用了一个 Promise 来模拟异步操作，这里是一个简单的延时操作。
我们可以通过以下代码来测试这个异步迭代器：
async function main() {
for await (const value of asyncGenerator()) {
console.log(value);
}
}
main(); // 每隔 1 秒输出一个数字总结
异步迭代器是 ES8 中引入的一种新特性，它可以帮助我们更好地处理异步操作，使得代码更加简洁、易读和可维护。在使用异步迭代器时，我们需要注意其返回的是一个 Promise 对象，需要使用 for-await-of 循环来遍历。同时，我们也可以通过实现一个对象上的 [Symbol.asyncIterator] 方法来创建异步迭代器。最后，我们还给出了一个简单的异步迭代器实现示例。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587ec47eb4cecbf2dd1e337