在 JavaScript 的新版本中，ES9（ECMAScript 2018）引入了一个新的循环结构：for-await-of。这个循环结构可以用于异步迭代器，使得在处理异步数据时更加方便和简单。本篇文章将详细介绍 for-await-of 循环的用法和注意事项，并提供示例代码和指导意义。
异步迭代器
在介绍 for-await-of 循环之前，我们需要先了解异步迭代器。在 JavaScript 中，迭代器是一种特殊的对象，它可以让我们遍历一个数据结构中的每一个元素。例如，对于一个数组，我们可以使用 for...of 循环来遍历其中的每一个元素：
const arr = [1, 2, 3]; for (let item of arr) { console.log(item); } // 输出：1 2 3
而异步迭代器则是在这个基础上扩展了异步操作的支持。它是一个返回 Promise 对象的迭代器，可以用来遍历异步数据结构中的每一个元素。例如，我们可以使用异步迭代器来遍历一个异步生成器函数中的数据：
-- -------------------- ---- ------- ----- --------- ---------------- - ----- ----- ------------------- ----- ----- ------------------- ----- ----- ------------------- - ------ ---------- - --- ----- ---- ---- -- ----------------- - ------------------ - -- ---- - - -----展开代码
for-await-of 循环
for-await-of 循环是一种用于异步迭代器的循环结构。它的语法和普通的 for...of 循环非常类似，只是将 for 后面的关键字改为 for-await-of。例如，我们可以使用 for-await-of 循环来遍历上面例子中的异步生成器函数中的数据：
-- -------------------- ---- ------- ----- --------- ---------------- - ----- ----- ------------------- ----- ----- ------------------- ----- ----- ------------------- - ------ ---------- - --- ----- ---- ---- -- ----------------- - ------------------ - -- ---- - - -----展开代码
在这个例子中，我们使用 for-await-of 循环来遍历异步生成器函数中的每一个元素，并且使用 async/await 语法来等待每一个元素的 Promise 对象。for-await-of 循环会自动地等待每一个 Promise 对象完成，然后返回它的结果。
注意事项
在使用 for-await-of 循环时，需要注意以下几点：
- 异步迭代器必须返回 Promise 对象。如果异步迭代器返回的不是 Promise 对象，for-await-of 循环会抛出一个 TypeError 错误。
- 在 for-await-of 循环中，每次迭代都会等待当前元素的 Promise 对象完成。如果当前元素的 Promise 对象完成后返回的是一个 rejected 状态的 Promise 对象，for-await-of 循环会抛出一个错误。
- for-await-of 循环也可以用于普通的迭代器。如果一个迭代器返回的是一个 Promise 对象，for-await-of 循环会自动地等待这个 Promise 对象完成，然后返回它的结果。
示例代码
下面是一个使用 for-await-of 循环遍历一个异步数据结构的示例代码：
-- -------------------- ---- ------- ----- --------- ---------------- - ----- ----- ------------------- ----- ----- ------------------- ----- ----- ------------------- - ------ ---------- - --- ----- ---- ---- -- ----------------- - ------------------ - -- ---- - - -----展开代码
下面是一个使用 for-await-of 循环遍历一个普通数据结构的示例代码：
-- -------------------- ---- ------- --------- ----------- - ----- ------------------- ----- ------------------- ----- ------------------- - ------ ---------- - --- ----- ---- ---- -- ------------ - ----------------- ------ - -- ---- - - -----展开代码
指导意义
使用 for-await-of 循环可以使得在处理异步数据时更加方便和简单。它可以让我们遍历异步数据结构中的每一个元素，并且自动地等待每一个元素的 Promise 对象完成，然后返回它的结果。
在实际开发中，我们可以使用 for-await-of 循环来遍历异步操作返回的数据，例如从数据库或 API 中获取的数据。同时，我们也可以将它用于处理大量的异步操作，例如使用 Promise.all() 来并发处理多个异步操作，然后使用 for-await-of 循环来遍历它们的结果。
总之，for-await-of 循环是一个非常有用的特性，值得我们在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cabe5ae46428fe9e33ab0b
