Iterator（迭代器）

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
一个数据结构只要具有 iterator 接口，就可以用for...of循环遍历它的成员。

并不是所有的对象都能使用for...of循环，只有实现了Iterator接口的对象，才能够for...of来进行遍历取值。

作用
    1. 为各种数据结构，提供一个统一的、简便的访问接口；
    2. 使得数据结构的成员能够按某种次序排列；
    3. 创造一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

Iterator的产生主要是为了使用for...of方法

Iterator其实就是一个具有 next()方法的对象，并且每次调用next()方法都会返回一个结果对象，这个结果对象有两个属性

{ 
    value: 表示当前的值,  
    done: 表示遍历是否结束
}

Iterator是一个特殊的对象：
    1. 它具有next()方法，调用该方法就会返回一个结果对象
    2. 结果对象有两个属性值：value和done。    
    3. value表示具体的返回值；done是布尔类型，表示集合是否完成遍历，没有则返回true，否则返回false
    4. 内部有一个指针，指向数据结构的起始位置。每调用一次next()方法，指针都会向后移动一个位置，直到指向最后一个位置

模拟Iterator

 function createIterator(items) {
    var i = 0;
    return {
      next: function () {
        var done = (i >= item.length);
        var value = !done ? items[i++] : undefined;


        return {
          done: done,
          value: value
        };
      },
      return(){ // 可选return方法
        console.log('提前退出');
        return {// 必须返回一个对象
            done:true
        }
      },
      // return: function () {
      //   return {
      //      done:true
      //   };
      // },

    };
  }

  // iterator 就是一个迭代器对象
  var iterator = createIterator([1, 2, 3]);

  console.log(iterator.next()); // { done: false, value: 1 }
  console.log(iterator.next()); // { done: false, value: 2 }
  console.log(iterator.next()); // { done: false, value: 3 }
  console.log(iterator.next()); // { done: true, value: undefined }
  console.log(iterator.next()); // { done: true, value: undefined }
  console.log(iterator.next()); // { done: true, value: undefined }


  var iterator = makeIterator([1, 2, 3]);

  // 不可以被for of 循环
  for (let value of iterator) {
    console.log(value); // Uncaught TypeError: iterator is not iterable
  }

可迭代对象Iterable

ES6还引入了一个新的Symbol对象，symbol值是唯一的。
一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口；
调用这个接口，就会返回一个遍历器对象。这样的数据结构才能被称为可迭代对象(Iterator)，该对象可被for...of遍历

  var arr = [1, 2, 3];

  arr[Symbol.iterator] = function () {
    var _this = this;
    var i = 0;
    return {
      next: function () {
        var done = (i >= _this.length);
        var value = !done ? _this[i++] : undefined;
        return {
          done: done,
          value: value
        };
      }
    };
  }


  // 此时可以for...of遍历
  for (var item of arr) {
    console.log(item); // 1 2 3 
  }

  // for...of 遍历的其实是对象的 Symbol.iterator 属性

原生具备Iterator接口的数据结构

在ES6中，所有的集合对象，包括
    数组，
    类数组对象（arguments对象、DOM NodeList 对象），
    Map
    Set
    字符串
都是可迭代的，都可以被for...of遍历，因为他们都有默认的迭代器。

数组

  var arr = [1, 2, 3];
  var iteratorObj = arr[Symbol.iterator]();
  console.log(iteratorObj.next());
  console.log(iteratorObj.next());
  console.log(iteratorObj.next());
  console.log(iteratorObj.next());

arguments

  function test() {
    var obj = arguments[Symbol.iterator]();
    console.log(arguments);
    console.log(obj.next());
    console.log(obj.next());
    console.log(obj.next());
  }

  test(1, 2, 3);

NodeList

  <div class="test">1</div>
  <div class="test">2</div>
  <div class="test">3</div>

  const nodeList = document.getElementsByClassName('test')
  for (const node of nodeList) {
    console.log(node);
  }

map
  console.log(Map.prototype.hasOwnProperty(Symbol.iterator)); // true

调用 Iterator 接口的场合

有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法）

解构赋值

  let set = new Set().add('a').add('b').add('c’);

  let [x, y] = set;
  console.log(x, y); // a b

扩展运算符

  var str = 'hello';
  console.log([...str]); // ["h", "e", "l", "l", "o"]

  let arr = ['b', 'c'];
  console.log(['a', ...arr, 'd']); // ["a", "b", "c", "d"]

yield*

  // yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

  let generator = function* () {
    yield 1;
    yield*[2, 3, 4];
    yield 5;
  };


  var iterator = generator();


  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: 4, done: false }
  console.log(iterator.next()); // { value: 5, done: false }
  console.log(iterator.next()); // { value: undefined, done: true }


  function* entries(obj) {
    for (let key of Object.keys(obj)) {
      yield [key, obj[key]];
    }
  }

  for (let [key, value] of entries(obj)) {
    console.log(key, '->', value);
  }
  // a -> 1
  // b -> 2
  // c -> 3

其他

    // for...of、Set()、Map()、Array.from()等。我们主要是为了证明调用上面这些函数时着实是用到了Iterator接口。

  var arr = [1, 2, 3];

  arr[Symbol.iterator] = function () {
    var _this = this;
    var i = 0;
    return {
      next: function () {
        var done = (i >= _this.length);
        var value = !done ? _this[i++] : undefined;
        return {
          done: done,
          value: value + ' 手动添加的属性' // 添加自定义值
        };
      }
    };
  }


  // 输出结果显示手动修改生效，证明for...of调用了Iterator接口
  for (var item of arr) {
    console.log(item);
    // 1 手动添加的属性
    // 2 手动添加的属性
    // 3 手动添加的属性
  }


  var set = new Set(arr);
  console.log(set); // Set(3) {"1 手动添加的属性", "2 手动添加的属性", "3 手动添加的属性"}

计算生成的数据结构

有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。
    1. entries() 返回一个遍历器对象，用来遍历[键名,键值]组成的数组。对于数组，键名就是索引值。
    2. keys() 返回一个遍历器对象，用来遍历所有的键名。
    3. values() 返回一个遍历器对象，用来遍历所有的键值。

 var arr = ["first", "second", "third"];


  for (let index of arr.keys()) {
    console.log(index);
  }

  // 0
  // 1
  // 2


  for (let color of arr.values()) {
    console.log(color);
  }

  // first
  // second
  // third


  for (let item of arr.entries()) {
    console.log(item);
  }

  // [ 0, "first" ]
  // [ 1, "second" ]
  // [ 2, "third" ]

判断对象是否可迭代

  const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function';
  console.log(isIterable(new Set())); // true 
  console.log(isIterable(new Map())); // true  
  console.log(isIterable([1, 2, 3])); // true 
  console.log(isIterable("hello world")); // true

for…of循环不支持遍历普通对象

Iterator的产生主要是为了使用for...of方法。
而对象不像数组的值是有序的，遍历的时候根本不知道如何确定他们的先后顺序，所以要注意的是for...of循环不支持遍历对象。
如果非要遍历对象，同理对象也必须包含[Symbol.iterator]的属性并实现迭代器方法，可以通过手动利用Object.defineProperty方法添加该属性。

  var obj = {
    a: 2,
    b: 3
  }
  for (let i of obj) {
    console.log(i) // Uncaught TypeError: obj is not iterable
  }

类数组对象
  var obj = {
    0: 'one',
    1: 'two',
    length: 2
  };
  obj = Array.from(obj);
  for (var k of obj) {
    console.log(k)
  }

非类数组对象

// 方法一
  var obj = {
    a: 1,
    b: 2,
    c: 3
  };


  obj[Symbol.iterator] = function () {
    var keys = Object.keys(this);
    var count = 0;
    return {
      next() {
        if (count < keys.length) {
          return {
            value: obj[keys[count++]],
            done: false
          };
        } else {
          return {
            value: undefined,
            done: true
          };
        }
      }
    }
  };


  for (var k of obj) {
    console.log(k);
  }


// 方法二
  var obj = {
    a: 1,
    b: 2,
    c: 3
  };
  obj[Symbol.iterator] = function* () {
    var keys = Object.keys(obj);
    for (var k of keys) {
      yield [k, obj[k]]
    }
  };


  for (var [k, v] of obj) {
    console.log(k, v);
  }