ECMAScript 2018 异步编程新特性：for-await-of 迭代器
在 JavaScript 的异步编程中，经常需要处理多个异步任务，此时就需要用到循环遍历异步操作结果的方式。在 ECMAScript 2018 中，针对异步操作遍历的需求，新增了 for-await-of 迭代器，提供了一种简单而强大的解决方案。
何为 for-await-of 迭代器？
为了更好地理解 for-await-of 迭代器，我们需要先简单了解迭代器的概念。ECMAScript 中的迭代器（Iterator）是一种机制，是为了支持对象在特定条件下，遍历数据元素的一种模式。所有实现了 Iterator 接口的对象，都可以通过 for...of 循环进行遍历。例如，数组、字符串、Map、Set 等数据结构，都可以直接使用 for...of 进行迭代遍历。
而 for-await-of 迭代器则是针对异步操作结果的迭代遍历，用于在异步任务中同步地处理多个返回值。它能够避免回调嵌套和代码可读性差等问题，让异步编程更加容易和优雅。
如何使用 for-await-of 迭代器？
使用 for-await-of 迭代器的前提是必须要有异步操作，即返回一个 Promise 对象。下面是一个使用 for-await-of 迭代器遍历异步操作结果的示例代码：
const asyncTasks = [promise1(), promise2(), promise3()];
for await (let result of asyncTasks) {
console.log(result);
}在上述示例代码中，asyncTasks 数组中包含了三个异步操作，通过 for-await-of 迭代器能够同步地处理它们的返回结果。注意，asyncTasks 数组中每个元素都必须是一个 Promise 对象，否则会抛出错误。
更进一步地，我们可以在异步操作中深度嵌套 for-await-of 循环，以处理更复杂的异步操作结果。例如，下面的示例代码展示了如何使用 for-await-of 迭代器遍历 Map 对象中的异步操作结果：
const asyncMap = new Map([
['task1', promise1()],
['task2', promise2()],
['task3', promise3()]
]);
for await (let [key, value] of asyncMap) {
console.log(`${key} result is: ${value}`);
}在上述示例代码中，通过使用 Map 对象，我们可以将异步任务和其对应的键值对应起来。然后，通过 for-await-of 迭代器遍历 Map 对象中的每个键值对，处理异步任务的返回结果。
需要注意的是，在 for-await-of 迭代器中，只有 async 关键字函数才能使用 await 关键字。如果直接在 for-await-of 循环体中使用 await 关键字而不在异步函数中使用，会抛出 SyntaxError 错误。
最后，值得一提的是，for-await-of 迭代器并不是将所有的异步操作全部并行执行，而是采用异步迭代的方式，即每次只执行一个异步操作，等待其完成后再执行下一个。这也是 for-await-of 迭代器的一个优点，能够更好地控制异步任务的执行顺序和并发度。
总结
对于前端开发者而言，for-await-of 迭代器是 ECMAScript 2018 中一个十分重要且实用的新特性，为异步编程提供了很大的帮助。通过深入学习和使用 for-await-of 迭代器，相信能够让异步编程变得更加简单、优雅、可读和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f5fe1968c7c53b0166eb8