Async Iterators 是 ECMAScript 2018 新增的特性，它允许我们异步地遍历一组数据。在前端开发中，我们通常需要处理异步数据，比如从 API 中获取数据、客户端的事件等，Async Iterators 就可以帮助我们更方便地处理这些数据。
本文将详细介绍 Async Iterators 的用法，并提供一些示例代码供参考。
Async Iterators 简介
Async Iterators 可以看作是普通 Iterators 的扩展，它们的作用类似于 for 循环或 Array.forEach() 方法，但是支持异步操作。与传统的 Iterators 相似，Async Iterators 可以使用 for-await-of 循环进行遍历。
Async Iterators 引入了一个新的接口 AsyncIterable ，它和 Iterable 接口非常相似，只是方法名不同。AsyncIterable 接口中定义了一个方法 Symbol.asyncIterator() ，该方法用于返回一个 Async Iterator 对象。
Async Iterator 对象实现了 next() 方法，该方法返回一个 Promise 对象，Promise 对象的值为一个包含 value 和 done 两个属性的对象，其中 value 表示当前处理的元素，done 表示是否遍历结束。如果 done 为 true ，表示遍历结束，否则表示还有未遍历的元素。
下面是一个异步数组的例子，该数组实现了 AsyncIterable 和 Async Iterator 接口，用于异步地遍历数组：
const asyncArray = {
array: ['a', 'b', 'c'],
async *[Symbol.asyncIterator]() {
for (let i = 0; i < this.array.length; i++) {
yield new Promise((resolve) => setTimeout(resolve, 1000, this.array[i]));
}
}
};上面的代码中，使用了 async 和 yield* 关键字，其中 async 用于定义异步的 Generator 函数，yield* 用于遍历异步操作返回的结果。
现在我们可以使用 for-await-of 循环遍历该数组：
(async () => {
for await (const item of asyncArray) {
console.log(item);
}
})();执行结果会依次输出 'a'、'b'、'c'，每隔一秒输出一个字符。
Async Iterators 的应用
异步遍历是 Async Iterators 最重要的应用，它可以帮助我们异步地遍历一组数据，包括数组、对象、Map、Set 等。
异步遍历数组
我们可以使用 Async Iterators 异步遍历一个数组，例如从 API 中获取数据，然后遍历这些数据：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
----- --------- - -
-----
----- ------------------------- -
--- ---- - - -- - - ----------------- ---- -
----- --- ----------------- -- -----------------------
-
-
--
--- ----- ------ ---- -- ---------- -
------------------
-
--
------------上面的代码中先异步获取数据，然后使用 AsyncIterable 和 Async Iterator 接口异步遍历数据。使用 Promise 包装数组元素可以使每个元素具有异步特性。
异步遍历对象
我们也可以使用 Async Iterators 遍历一个对象：
-- -------------------- ---- -------
----- ------------- - ----- -- -- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
----- --------- - -
-----
----- ------------------------- -
----- ---- - -----------------------
--- ---- - - -- - - ------------ ---- -
----- --- ----------------- -- ----------------- ----------------------
-
-
--
--- ----- ------ ----- ------ -- ---------- -
-------------------- -----------
-
--
----------------上面的代码中，我们先异步获取数据，然后使用 Async Iterable 和 Async Iterator 接口异步遍历数据。使用 Promise 包装一个包含 key 和 value 的元素可以使每个元素具有异步特性。
异步遍历 Map 和 Set
我们也可以使用 Async Iterators 遍历 Map 和 Set：
-- -------------------- ---- -------
----- ---------- - ----- -- -- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
----- --------- - -
----- --- ----------
----- ------------------------- -
--- ------ ---- -- ---------- -
----- --- ----------------- -- ---------------
-
-
--
--- ----- ------ ---- -- ---------- -
------------------
-
--
-------------上面的代码中，我们先异步获取数据，然后使用 Async Iterable 和 Async Iterator 接口异步遍历数据。使用 Promise 包装 Set 中的每个元素可以使每个元素具有异步特性。
总结
本文介绍了 Async Iterators 的用法和应用场景，并提供了一些示例代码供参考。使用 Async Iterators 异步遍历数据可以大大简化代码实现，并提高代码的可读性和可维护性。在前端开发中，异步遍历操作非常常见，掌握 Async Iterators 对于我们提高前端开发效率十分重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a9e5b48841e989478acc4