在 JavaScript 中，for-of 循环是我们经常使用的语句之一。它可以迭代一个可迭代对象（Iterable Object），例如 Array、Map、Set、TypedArray、String 等等。然而，在处理大量数据或者数据来源是异步请求的情况下，for-of 循环的效率可能会较低。这时我们可以使用 ES9 中新增的异步迭代器（Async Iterator）来提高 for-of 循环的效率。
异步迭代器是什么？
异步迭代器是一个包含 next() 方法并且返回一个 Promise 的对象。它用来在异步情况下处理大量数据，每次迭代时都会返回一个表示异步操作的 Promise 对象。
异步迭代器的结构可以看作下面这样：
-- -------------------- ---- -------
-- -----
----- ------------- - -
------------------------ -
------ -
-- --
------ -
----- ----- - ------------------ -- ----
----- ---- - - -- -----------
------ ----------------------- -------
-
--
-
--在上面的例子中，我们使用了一个数组 arr 作为数据来源，然后每次调用 next() 方法都会执行一个异步操作 asyncOperation。当数据迭代结束时，返回的 Promise 对象将会带着 {done: true}。
在 for-of 循环中使用异步迭代器
使用异步迭代器，我们可以改进 for-of 循环的效率。下面是一个简单的示例：
async function iterate() {
const asyncIterable = createAsyncIterable(['a', 'b']);
for await (const x of asyncIterable) {
console.log(x);
}
}在上面的例子中，iterate() 函数的执行过程如下：
- 调用
createAsyncIterable()，创建一个包含两个字符的数组的异步迭代器。 - 在
for-await-of循环中，每次迭代都会由asyncIterable对象返回一个Promise对象，表示异步操作的值和状态。 - 当异步操作执行完毕后，
Promise对象的值会返回给for-await-of循环的变量x。
示例代码
下面是一段更完整的示例代码，它用一个异步迭代器来从服务器获取数据：
-- -------------------- ---- -------
----- -------- - -------------------------------
----- -------- ------------------- -
----- ---- - ---
----- -------- - ----- ----------------
----- ------ - --------------------------
----- ------ -
----- ------ ------ - ----- --------------
-- ------ ------
-----------------
-
------ --- ------------------------
-
-- ---------
----- -------- ------------------------- -
----- ---- - ----- --------------------
----- -------- - --- ---------------
--- ---------- - --
------ -
----- ------ -
-- ----------- -- ---------------- ------ ------ ------
----- ----- - ------------------------------
---------- -- --
------ ------- ----- -------
-
--
-
-- -----------
----- -------- ------------- -
----- ----------------- - ----- --------------------------
--- ----- ------ ---- -- ------------------ -
------------------
-
-在上面的代码中，我们通过异步请求从服务器获取了一些二进制数据。在 createAsyncDataIterable() 函数中，我们将这些数据包装成了一个异步迭代器。然后我们使用 for-await-of 循环来迭代数据，并将读取到的每一项输出到控制台中。
结论
ES9 中新增的异步迭代器可以提高 for-of 循环处理大量数据或者异步请求的效率。我们可以根据不同的需求来定制异步迭代器的逻辑，从服务器获取数据、将数据分批加载等等操作都可以在异步迭代器中完成。这有助于我们更好地处理大量的异步数据，并带来更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738a226317fbffedf11c9b9