前端开发中，循环操作是一项基础的技能。传统的 for 循环语句虽然是实现逻辑简单，但是其语法繁琐，使用起来不太方便，而且在操作复杂数据结构时会变得非常难以维护。为了解决这些问题，ES6 中引入了迭代器（Iterator）和 for/of 循环语句，而在 ES7 中进一步添加了异步迭代器，极大地简化了循环操作的代码量。
迭代器简介
迭代器是一个符号（Symbol），用于通过其 next() 函数遍历数据。ES6 中，迭代器协议定义为对象具有一个名为 Symbol.iterator 的属性，此属性指向一个函数，调用此函数会返回一个具有 next() 方法的对象。
let arr = ["a", "b", "c"];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: "a", done: false}
console.log(iter.next()); // {value: "b", done: false}
console.log(iter.next()); // {value: "c", done: false}
console.log(iter.next()); // {value: undefined, done: true}在上面的示例中，我们创建了一个数组 arr 并获取了其迭代器 iter，然后用 next() 方法依次遍历了 arr 数组，并输出了其值和状态。可以看到，使用迭代器遍历数组和使用 for 循环语句遍历数组具有相同的效果。
for/of 循环简介
for/of 循环是 ES6 中新增的语法，用于遍历数据，它可以避免传统 for 循环语句中的一些繁琐操作。它支持遍历可迭代对象，包括数组、字符串、Map、Set 等。
let arr = ["a", "b", "c"];
for (let value of arr) {
console.log(value);
}
// 'a', 'b', 'c'在上面的示例中，我们使用 for/of 循环语句遍历了数组 arr，并输出了其值。可以看到，使用 for/of 循环语句和使用迭代器遍历数组具有相同的效果。
ES7 中的异步迭代器
ES7 引入了异步迭代器（AsyncIterator），这是在 ES6 迭代器的基础上进一步优化的迭代器。它支持在异步环境中处理数据，可以处理网络请求、文件读取等异步操作。
与 ES6 迭代器不同的是，ES7 的异步迭代器在 next() 方法返回的是一个 Promise，需要通过 then() 或 async/await 方法获取它的结果。异步迭代器协议与迭代器协议类似，只是 next() 方法返回的不再是一个简单的值，而是一个 Promise 对象。
-- -------------------- ---- -------
--- --- - -
----- ------------------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- -------
----- ----
-
-
--
------ ---------- -
--- ----- ---- ----- -- ---- -
-------------------
-
-----
-- -- -- -在上面的示例中，我们创建了一个异步迭代器，它使用异步函数来异步执行数据处理任务，并通过 yield 关键字返回相应的数据。然后我们在 for await 循环中，使用 await 关键字后跟 Promise 来获取迭代器函数返回的 Promise。
总结
本文介绍了 ES7 中的迭代器和 for/of 循环语句，以及异步迭代器的用法。使用迭代器和 for/of 循环语句可以大大简化循环操作的代码量，在复杂数据结构上更加易于维护和理解。有了异步迭代器的支持，我们还可以在异步处理数据时使用相同的语法，让代码更加简洁易读。
参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6540679b7d4982a6eb9e5202