在 ECMAScript 2018 中，for-await-of 是一个新的语法，用于异步循环迭代器。与传统的 for-of 区别在于，它能够在异步迭代器上执行异步操作。本文将详细介绍 for-await-of 的使用方法和原理，帮助读者深入理解 ECMAScript 2018 中的新特性。
原理介绍
for-await-of 的原理比较简单，它可以通过 Symbol.asyncIterator 方法获取异步迭代器，并在异步迭代器上运行 for-of 循环。当迭代器返回一个 promise 时，for-await-of 会等待 promise 的结果返回，并将其解析为下一个值，然后继续循环迭代器。
使用方法
下面我们通过示例代码来介绍 for-await-of 的使用方法：
-- -------------------- ---- -------
----- -------- ----------- -
----- ----- - --------- ------ -----------
--- ------ ---- -- ------ -
----- ---- - ----- ---------------
------------------
-
-
----- -------- ------------ -
----- ----- - --------- ------ -----------
--- ----- ------ ---- -- ------------------------ -
----- ---- - ----- ---------------
------------------
-
-在这个例子中，我们有两个异步函数 loadUsers 和 loadUsers2。在 loadUsers 函数中，我们使用传统的 for-of 循环迭代数组中的用户名，然后调用异步函数 loadData，等待其返回结果并打印。相比之下，在 loadUsers2 函数中，我们使用 for-await-of 语法，异步迭代 getUsersOnAsyncServer 函数返回的迭代器，并执行 loadData 函数，等待其返回结果并打印。
可以看到，相比于传统的 for-of 循环，for-await-of 语法能够轻松地在异步迭代器上执行异步操作，使异步任务更加简洁优雅。
实战应用
除了简化异步操作外，for-await-of 还有很多实际应用场景。比如，在操作数据库时，我们常常需要对每个查询结果进行异步处理，可以使用 for-await-of 语法轻松实现：
async function loadUserData() {
const users = await db.users.find();
for await (const user of users) {
const userData = await db.userData.find({userId: user.id});
console.log(userData);
}
}在这个例子中，我们使用 MongoDB 数据库查询了所有用户，然后使用 for-await-of 循环异步迭代查询结果，并对每个用户的用户数据进行打印。
注意事项
需要注意的是，for-await-of 语法只能用于异步迭代器的值，如果您需要处理传统迭代器，应该使用传统的 for-in 循环。
此外，使用 for-await-of 语法时，应当正确处理异常，否则可能导致程序出现异常中断的情况。最好在 try-catch 语句中包含 for-await-of 循环，以捕获异常并进行处理。
结论
通过本文的介绍，我们了解了 ECMAScript 2018 中的 for-await-of 语法，包括使用方法、原理和实战应用场景，并讨论了注意事项。相信读者在阅读了本文之后，已经可以轻松掌握这个新特性，并在实际编程中灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f3de05f55128102635f77