写在前面

迭代器 (Iterator) 是指满足迭代器协议的对象。

可迭代对象是指原生部署了 Iterator(迭代器) 接口的对象，这种对象是可遍历的或可迭代的，因此称作可迭代对象。ES6 中的可迭代对象有很多，不同的迭代对象除了有统一的 Iterator接口外，还有其自定义的迭代接口。

1. 迭代器

1.1 概念

迭代器协议: 对象的next方法是一个无参函数，它返回一个对象，该对象拥有done和value两个属性：

  • done(boolean):
    • 如果迭代器已经经过了被迭代序列时为true。这时value可能描述了该迭代器的返回值。
    • 如果迭代器可以产生序列中的下一个值，则为false。这等效于连同done属性也不指定。
  • value: 迭代器返回的任何 JavaScript值。done为true时可省略。

ES5实现一个简单的迭代器：

  1. function createIterator(items) {
  2.     var i = 0;
  3.     return {
  4.         next: function() {
  5.             var done = (i >= items.length);
  6.             var value = !done ? items[i++] : undefined;
  7.             return {
  8.                 done: done,
  9.                 value: value
  10.             };
  11.         }
  12.     };
  13. }
  14. var iterator = createIterator([1, 2, 3]);
  15. console.log(iterator.next());           // "{ value: 1, done: false }"
  16. console.log(iterator.next());           // "{ value: 2, done: false }"
  17. console.log(iterator.next());           // "{ value: 3, done: false }"
  18. console.log(iterator.next());           // "{ value: undefined, done: true }"
  19. // 之后的所有调用
  20. console.log(iterator.next());           // "{ value: undefined, done: true }"

2. 可迭代对象

2.1 String

2.2 Array

2.3 TypedArray

2.4 Set

2.5 Map

2.6 函数的 arguments 对象

2.7 NodeList 对象

3. 可迭代对象的使用场景

可迭代对象可以在以下语句中使用：

  • for…of循环

    1. for (let value of ['a', 'b', 'c']) {
    2. console.log(value);
    3. }
    4. // "a"
    5. // "b"
    6. // "c"

  • 扩展运算符

    1. [...'abc'];   // ["a", "b", "c"]
    2. console.log(...['a', 'b', 'c']);   // ["a", "b", "c"]

  • 解构赋值

    1. let [a, b, c] = new Set(['a', 'b', 'c']);
    2. a;   // 'a'

部分参考和来源

理解ES6的 Iterator 、Iterable 、 Generator