迭代器由任意对象实现的接口，支持连续获取对象产出的每个值； 默认Symbol.iterator 属性。

消费方式：

  • 手动调用next()方法消费
  • for…of 循环自动消费（for( ; ; )、forEach）

迭代器模式， 可以支持迭代消费的数据结构（可迭代对象）

  1. '12345'
  2. [1, 2, 3, 4, 5]
  3. new Map().set('a', 1).set('b', 2)
  4. new Set().add(1).add(2).add(3)
  5. arguments对象
  6. NodeList等DOM集合类型

原生语言：for…of、数组结构、扩展操作符、Array.from()、创建集合、创建映射、Promise.all()、Promise.race()、yield*

  1. let iter = [1, 2, 3, 4][Symbol.iterator]();
  2. iter.next() // {done: false, value: 1}, 最后{value: undefined, done: true}

自定义迭代器

  1. class Counter {
  2.     constructor(limit) {
  3.         this.limit = limit
  4.     }
  6.     [Symbol.iterator]() {
  7.         let count = 1, limit = this.limit;
  8.         return {
  9.             next () {
  10.                 if (count <= limit) {
  11.                     return { done: false, value: count++ };
  12.                 } else {
  13.                     return { done: true, value: undefined };
  14.                 }
  15.             } 
  16.         } 
  17.     }
  18. }

考察点：

  1. 给出打印结果并说明原因
    1. let arr = [1,2,3]
    2. arr.name = 'Jack'
    3. arr.length // 3
    4. console.log(Object.keys(arr)) // ["0", "1", "2", "name"]
    5. for(let i in arr) { console.log('in', i) } // 0, 1, 2, 3, name
    6. for (let i of arr) { console.log(i) } // 1, 2, 3
  • for…in 是枚举全部属性
  • for…of 是迭代器
  1. 改造数据使得for…of可遍历出全部值

解决方法1:

  1. let arr = [1,2,3]
  2. arr.name = 'Jack'
  4. // Symbol.iterator
  6. arr[Symbol.iterator] = function () {
  7.     let index = 0;
  8.     const _this = this;
  9.     const keys = Object.keys(_this);
  10.     const len = keys.length;
  11.     return {
  12.         next() {
  13.             if (index < len) {
  14.                 return {
  15.                     value: _this[keys[index++]],
  16.                     done: false
  17.                 }
  18.             }
  19.             return {
  20.                 value: null,
  21.                 done: true
  22.             }
  23.         }
  24.     }
  25. }
  27. let iter = arr[Symbol.iterator]()
  29. for (let i of arr) {
  30.     console.log(i)
  31. }
  33. // 1
  34. // 2
  35. // 3
  36. // Jack

方式2: 生成器函数

  1. let arr = [1,2,3]
  2. arr.name = 'Jack'
  4. // Symbol.iterator
  6. arr[Symbol.iterator] = function* () {
  7.     const keys = Object.keys(this);
  8.     for (let i = 0; i < keys.length; i++) {
  9.         yield this[keys[i]]
  10.     }
  11. }
  13. let iter = arr[Symbol.iterator]()
  15. for (let i of arr) {
  16.     console.log(i)
  17. }
  19. // 1
  20. // 2
  21. // 3
  22. // Jack

https://gitee.com/daaasheng/my_code_block/commit/b589b41274619c291a7b711ddada1fb72bd65a0e

疑问：

  1. for (let item of arr ) {iter.next()} 与 for(let item of iter) 区别？
  2. 提前终止， 出发迭代器是否重新开始