ES6 中的新特性 ——for-await-of

ES6 中的新特性 ——for-await-of

ES6 中引入了很多新特性，其中一个值得注意的是 for-await-of。该特性可以在异步处理数据集合时使用，能够在循环中依次获取 Promise 对象的结果，更加优雅和方便地处理异步任务。

为了更好地理解 for-await-of，让我们来创建一个异步数组，并尝试使用 for-of 和 for-await-of 两种语法进行遍历。

// 创建异步数组函数 async function getAsyncArray() { return new Promise(resolve => { setTimeout(() => { resolve([1, 2, 3]); }, 1000); }); }

// for-of 循环 async function forOf() { const arr = await getAsyncArray();

for (const item of arr) { console.log(item); } }

// for-await-of 循环 async function forAwaitOf() { const arr = await getAsyncArray();

for await (const item of arr) { console.log(item); } }

如果我们运行 forOf 和 forAwaitOf 函数，分别可以得到以下输出结果：

forOf 函数输出结果： 1 2 3

forAwaitOf 函数输出结果： 1 2 3

两个函数的输出结果是相同的，但是它们的执行方式却有很大不同。forOf 函数需要等待异步数组通过 await 关键字获取后，才能进行遍历操作。而 forAwaitOf 函数则在遍历异步数组时立即获取到每个元素的值。

更进一步来说，如果我们把返回的数组换成 Promise 对象，我们也可以使用 for-await-of 进行遍历操作。

async function getAsyncPromise() { return new Promise(resolve => { setTimeout(() => { resolve(3) }, 1000) }) }

async function forAwaitOfPromise() { for await (const item of getAsyncPromise()) { console.log(item) } }

通过以上的例子，我们可以看到 for-await-of 关键字在处理异步数据时使用起来更加自然，并使代码更加优雅。

for-await-of 的指导意义是什么？

for-await-of 关键字为 JavaScript 提供了一种更加高效的遍历异步数据的方式，是一个方便且易于使用的工具。 它简化了异步数据集合的处理，使得代码更加简洁和易于理解。

for-await-of 还有一个重要的作用，那就是提高代码的可读性。在 for-await-of 中，我们可以使用传统的循环语法，而不需要使用 Promise 链式调用或 Promise.all 等异步编程技术。 在一个类似数据结构的迭代器中，for-await-of 不仅能够自动处理 Promise 的结果，而且还能够自动的关闭迭代器。

结论

在处理异步数据的过程中，for-await-of 是一个很好的解决方案，可以在处理集合数据时简化代码和提高效率。在实践中，它也可以在许多场景中减少代码的重复，使代码更加易于维护。为了更好地利用它，我们应该在编码时牢记这个特性，以便在项目中提高代码的质量和效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b3d579babaf620faa1f28