ES6 中的 Iterables 和 Iterators 迭代器理念浅析
迭代器（Iterator）是一种设计模式，它提供了一种顺序访问集合中各个元素的方法，而不需要了解其底层的实现细节。在 JavaScript 中，ES6 的 Iterables 和 Iterators 简化了这个过程，使得开发者可以更方便地使用迭代器模式。
ES6 中的 Iterables 则是指具有 Symbol.iterator 属性的数据结构，即这个对象是可被迭代的。而 Iterators 则是指具有 next() 方法的对象，它会返回当前迭代位置的值和布尔值，表示是否已经迭代到了末尾。
以下是一个简单的数组迭代器的示例：
let arr = ['a', 'b', 'c'];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }上述代码中，我们通过获取数组的 Symbol.iterator 属性获得了它的迭代器对象，然后通过调用 next() 方法来获取下一个迭代位置的值。在迭代到数组的末尾时，调用 next() 方法会返回 done 值为 true。
迭代器模式可以应用于多种数据结构，如数组、Set、Map 等，以下是一个 Set 集合的迭代器示例：
let set = new Set([1, 2, 3]);
let iterator = set[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }除了通过 Symbol.iterator 来定义迭代器对象以外，ES6 还提供了一个更方便的方法来快速定义迭代器，那就是使用生成器（Generator）函数。以下是一个生成器函数的示例：
-- -------------------- ---- -------
--- --- - -
- ------------------- -
----- --
----- --
----- --
-
--
--- -------- - -----------------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ ---------- ----- ---- -上述代码中，我们使用了一个生成器函数来定义了迭代器对象，它通过使用 yield 语句来返回迭代位置的值。在生成器函数中，我们可以使用多个 yield 语句来定义多个迭代位置。
迭代器模式虽然简单，但也有其深度的意义和应用价值。在实际开发中，我们可以将其应用于处理大量数据的场景或者实现类似于管道的操作。例如，我们可以使用迭代器模式来遍历数组或集合中的元素，并使用高阶函数（如 map、filter、reduce）来对这些元素进行处理和过滤。
总结
ES6 中的 Iterables 和 Iterators 迭代器提供了一种便捷的方式来遍历集合中的元素，其优雅的设计思想也为我们带来了诸多的实践应用。掌握迭代器的理念和应用方法，不仅可以提高开发效率，同时也有利于我们打造更加复杂和高效的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481cce748841e9894146f56