ES9（ECMAScript 2018）是 JavaScript 语言的一个重要版本，其中引入了许多新特性，其中之一就是异步迭代器 Iterator。异步迭代器是一种能够处理异步数据的迭代器，可以使用 for-await-of 循环来遍历异步数据。本文将详细介绍 ES9 中的异步迭代器 Iterator。
异步迭代器 Iterator 的概念
在介绍异步迭代器之前，我们先来了解一下迭代器的概念。迭代器是一种对象，它提供了一种方法来访问容器对象（如数组、集合、映射等）中的元素，而不需要了解容器对象的内部实现。迭代器有两个基本方法：next() 和 done()。next() 方法用于返回容器中的下一个元素，done() 方法用于判断容器是否还有元素。
异步迭代器是一种能够处理异步数据的迭代器。它是一个对象，其中包含一个 async next() 方法，该方法返回一个 Promise 对象。当该 Promise 对象被解析时，它将返回一个包含 value 和 done 两个属性的对象，其中 value 是容器中的下一个元素，done 表示容器是否还有元素。
使用异步迭代器 Iterator
在 ES9 中，我们可以使用 for-await-of 循环来遍历异步数据。for-await-of 循环与 for-of 循环类似，但是它可以处理异步数据。for-await-of 循环会自动调用异步迭代器的 next() 方法，并等待 Promise 对象被解析后才会继续执行。
下面是一个使用异步迭代器遍历异步数据的示例：
// javascriptcn.com 代码示例
async function* getData() {
const data = await fetch('https://api.example.com/data');
const json = await data.json();
for (const item of json) {
yield item;
}
}
(async () => {
for await (const item of getData()) {
console.log(item);
}
})();在上面的示例中，我们定义了一个异步迭代器 getData()，它使用 fetch() 方法获取数据，并将其转换为 JSON 格式。然后，我们使用 for-of 循环来遍历 JSON 数组，并使用 yield 关键字将每个元素返回。最后，我们使用 for-await-of 循环来遍历异步迭代器，并使用 console.log() 方法打印每个元素。
实现异步迭代器 Iterator
要实现异步迭代器，我们需要创建一个对象，并将 async next() 方法添加到该对象中。在 next() 方法中，我们可以使用异步操作（如 fetch() 方法）来获取数据，并使用 Promise 对象返回数据。
下面是一个实现异步迭代器的示例：
// 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() {
for await (const num of asyncIterable) {
console.log(num);
}
})();在上面的示例中，我们创建了一个异步迭代器 asyncIterable，并在该对象中添加了 async next() 方法。在 next() 方法中，我们使用 setTimeout() 方法模拟异步操作，并在每次调用 next() 方法时返回一个 Promise 对象。在 Promise 对象被解析后，我们返回一个包含 value 和 done 两个属性的对象。
最后，我们使用 for-await-of 循环来遍历异步迭代器，并使用 console.log() 方法打印每个元素。
总结
在 ES9 中，我们可以使用异步迭代器 Iterator 来处理异步数据。异步迭代器是一种能够处理异步数据的迭代器，可以使用 for-await-of 循环来遍历异步数据。要实现异步迭代器，我们需要创建一个对象，并将 async next() 方法添加到该对象中。在 next() 方法中，我们可以使用异步操作来获取数据，并使用 Promise 对象返回数据。使用异步迭代器可以使我们更方便地处理异步数据，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d55ced2f5e1655d8261e8