在 ES6 中，我们可以使用可迭代对象（iterable）来表示一个可迭代的数据结构，这个数据结构可以被遍历。
可迭代对象有以下两个要点：
- 对象必须实现了 @@iterator 方法，以供迭代器访问。
- 迭代器必须返回一个包含 next 方法的对象。
迭代器包含了两个方法：
- next()：返回当前项的对象，下一次迭代所访问的对象，包括 value 和 done 两个属性。
- return()：返回当前项的对象，下一次迭代所访问的对象，并且将 done 属性设置为 true。
来看一个简单的例子：
const nums = [1, 2, 3];
const iterator = nums[Symbol.iterator]();
iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }
iterator.next(); // { value: 3, done: false }
iterator.next(); // { value: undefined, done: true }在上面的代码中，我们使用 numsSymbol.iterator 方法创建了一个迭代器对象 iterator，并且在迭代器上调用 next() 方法可以访问到数组 nums 中的每一个元素。
基于可迭代对象的扩展
在 ES6 中，有许多新的关键字和语法结构可以使用可迭代对象来简化代码。
for...of 循环
我们可以使用 for...of 循环来迭代数组、字符串、Set 和 Map 等可迭代对象。使用 for...of 循环，我们不再需要使用索引或者属性名来迭代对象，而是直接访问迭代器返回的 value 值。
来看一个例子：
const nums = [1, 2, 3];
for (let num of nums) {
console.log(num);
}
// 1, 2, 3解构赋值
我们可以使用数组解构和对象解构来提取可迭代对象中的元素：
const nums = [1, 2, 3]; const [a, b, c] = nums; console.log(a, b, c); // 1, 2, 3
扩展运算符
我们可以使用扩展运算符来将一个可迭代对象转换为一个数组：
const nums = new Set([1, 2, 3]); const arr = [...nums]; console.log(arr); // [1, 2, 3]
实践应用
生成器函数
生成器函数是一种使用迭代器生成值的函数。在生成器函数中使用 yield 关键字可以中途暂停函数执行，并将结果返回。来看一个简单的例子：
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - ----- -------- - ------------ ---------------- -- - ------ -- ----- ----- - ---------------- -- - ------ -- ----- ----- - ---------------- -- - ------ -- ----- ----- - ---------------- -- - ------ ---------- ----- ---- -
Symbol.iterator 的应用
我们可以自己实现一个可迭代对象，在对象上实现 @@iterator 方法，来实现自定义迭代器。来看一个例子：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
------------------ --------- -- -
----- ----------
----- ---------
-
--
----- -------- - --------------------------
---------------- -- - ------ ------ ----- ----- -
---------------- -- - ------ --- ----- ----- -
---------------- -- - ------ ---------- ----- ---- -总结
使用可迭代对象和迭代器，可以大大简化我们在 JavaScript 中对数据结构的遍历操作，使得代码更加简洁易读。在实践应用中，我们可以通过实现自定义的迭代器和使用生成器函数等方式，更灵活地应对不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fe12248841e9894e05314