在 ES6 中，Iterator 与 Iterable 接口成为了重要的概念。Iterator 是一种数据遍历的规范，Iterable 接口则是让对象成为可遍历对象的方法，这两者可以一起使用来实现数据的迭代。
Iterator
Iterator 是一种遍历数据的规范，是一个对象，具有 { next: () => {value: any, done: boolean}} 的结构。其中，next() 方法用于返回下一个遍历对象。
const data = [1, 2, 3];
const iterator = data[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 }在上述例子中，我们可以看到 data[Symbol.iterator]() 返回的是一个 iterator 对象。该对象一共有三个值，每次调用 next() 方法后返回一个值。当遍历结束时，done 属性变为 true，value 的值则是 undefined。
我们利用 Iterator 可以遍历各种类型对象，甚至是异步迭代器。
Iterable
Iterable 接口是让对象成为可迭代对象的手段。一个对象要实现 Iterable 接口，必须具备一个函数 Symbol.iterator，函数返回一个 Iterator 对象，该对象包含 next() 方法。
以下是一个简单的实现：
-- -------------------- ---- -------
----- ------- -
------------------ -
---------- - ------
-
-------------------- -
------- - - -- - - ----------- ---- -
----- --
-
-
-
------- - -- --- ----------- -
---------------
-
-- ------- - - -在上述例子中，我们定义了一个 Counter 类，其中 Symbol.iterator 返回一个 Generator 实现，这意味着我们可以方便地使用 yield 来实现数据的迭代。
应用
Iterator 和 Iterable 接口为我们提供了极大的灵活性。我们可以通过它来遍历各种对象，从而方便地操作数据、写出更简洁的代码。
使用场景
- 循环：使用
for...of来循环一个 Iterable 对象，例如数组、Generator - 扩展语法：使用
...操作符来扩展一个 Iterable 对象，例如[...array] - 解构赋值：可以通过解构操作来将一个 Iterator 对象转成数组，例如
[a, b, ...rest] = array
我们可以将上述例子中的 Counter 类再改写一下，让它支持起 to_array 方法。
-- -------------------- ---- -------
----- ------- -
------------------ -
---------- - ------
-
-------------------- -
------- - - -- - - ----------- ---- -
----- --
-
-
---------- -
------ ----------
-
-
--- ------- - --- -----------
-------------------------------- -- ------- --- -- --在上面的例子中，我们已经将 Iterator 和 Iterable 接口相结合，使得 Counter 类具备了 Iterable 的特征，可以使用 ... 操作符和解构操作来方便地操作数据。
总结
ES6 中的 Iterator 和 Iterable 接口为我们提供了数据迭代的规范和标准，使得数据遍历变得简单方便。我们可以通过 Iterator 和 Iterable 接口来快速实现可遍历对象的迭代，从而方便我们对数据的操作和处理。同时，Iterator 和 Iterable 接口的应用也使得我们的代码更加优雅和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e52d848841e9894adaba4