在 ES9 中，新增了一个语句 for await of 操作符，用于异步遍历可迭代对象。其语法与 for of 相似，但是可以在异步操作中使用。
什么是异步遍历？
在 JavaScript 中，我们经常需要遍历数组、对象等数据结构。在同步代码中，我们使用 for 循环或者 forEach 等语句来进行遍历，代码如下：
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 输出：1 2 3
arr.forEach(item => console.log(item));
// 输出：1 2 3但是，在异步代码中，我们需要等待每个异步操作完成后才能进行下一个操作。例如，我们需要从服务器获取数据后再进行渲染，代码如下：
async function fetchData() {
const data = await fetch('/api/data');
const json = await data.json();
return json;
}
async function render() {
const data = await fetchData();
// 渲染数据
}在这种情况下，我们需要异步遍历数据结构，等待每个异步操作完成后才能进行下一个操作。
为什么需要 for await of 操作符？
在 ES6 中，我们引入了 for of 语句用于遍历可迭代对象，例如数组、字符串、Set 等。但是，for of 只能用于同步操作，不能用于异步操作。
在 ES7 中，我们引入了 async/await 语句用于异步操作。但是，async/await 语句只能用于单个异步操作，不能用于异步遍历。
因此，在 ES9 中，我们引入了 for await of 操作符用于异步遍历可迭代对象，可以方便地处理异步操作。
如何使用 for await of 操作符？
for await of 操作符的语法与 for of 相似，但是需要使用 async/await 语句来处理异步操作。例如，我们可以使用 for await of 遍历一个 Promise 对象数组，代码如下：
async function fetchData() {
const arr = [
fetch('/api/data1'),
fetch('/api/data2'),
fetch('/api/data3')
];
const result = [];
for await (const data of arr) {
const json = await data.json();
result.push(json);
}
return result;
}在上面的代码中，我们使用 for await of 遍历了一个 Promise 对象数组，等待每个异步操作完成后再进行下一个操作。注意，我们需要在 for await of 中使用 async/await 语句来处理异步操作，以便等待每个异步操作完成后再进行下一个操作。
总结
在 ES9 中，我们新增了一个语句 for await of 操作符，用于异步遍历可迭代对象。它的语法与 for of 相似，但是可以在异步操作中使用。使用 for await of 操作符可以方便地处理异步操作，提高代码的可读性和可维护性。
在实际开发中，我们经常需要处理异步操作，使用 for await of 操作符可以简化代码，提高开发效率。但是，需要注意使用 async/await 语句来处理异步操作，以便等待每个异步操作完成后再进行下一个操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658bb14deb4cecbf2d0ed7b5