文章系列

概念

迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。

特色：

为遍历不一样数据结构的 “集合” 提供统一的接口；
能遍历访问 “集合” 数据中的项，不关心项的数据结构

从 Array.prototype.forEach 提及

let arr = [1, 2, 3]
arr.forEach((item) => {
	console.info(item) // 1 2 3
})
复制代码

在数组上遍历是没有问题的,但将它做为在 NodeList 就会发现报错

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <a href="#">a5</a>
</div>
复制代码

遍历 id 为 div1 下的全部 a 标签

let nodeList = document.getElementById('div1').getElementsByTagName('a')
nodeList.forEach((item) => {
	console.info(item)
})
复制代码

运行会报Uncaught TypeError: nodeList.forEach is not a function 错误。这是因为 nodeList 只是类数组，并无实现 forEach 方法。

使用 for 循环遍历

let nodeList = document.getElementById('div1').getElementsByTagName('a')
let i, length = nodeList.length
for (i = 0; i < length; i++) {
	console.info(nodeList[i].innerHTML)
}
复制代码

能够正常打印

jQuery 的 each 方法

上述的数组跟 nodeList 采用不一样的遍历方式，为了处理这种状况，经过借助 jQuery 的 each 方法，咱们能够用同一套遍历规则遍历不一样的集合对象：

let arr = [1, 2, 3]
let nodeList = document.getElementById('div1').getElementsByTagName('a')
let $a = $('a')
$.each(arr, function (index, item) {
    console.log(`数组的第${index}个元素是${item}`)
})
$.each(nodeList, function (index, aNode) {
    console.log(`DOM类数组的第${index}个元素是${aNode.innerText}`)
})
$.each($a, function (index, aNode) {
    console.log(`jQuery集合的第${index}个元素是${aNode.innerText}`)
})
复制代码

能够正常输出内容

自定义个迭代器

// 主体
class Container {
    constructor(list) {
        this.list = list
    }
    // 生成遍历器
    getIterator() {
        return new Iterator(this)
    }
}

// 迭代器
class Iterator {
    constructor(container) {
        this.list = container.list
        this.index = 0
    }
    next() {
        if (this.hasNext()) {
            return this.list[this.index++]
        }
        return null
    }
    hasNext() {
        if (this.index < this.list.length) {
            return true
        }
        return false
    }
}

const arr = [1, 2, 3, 4, 5, 6] // 是有序的集合,好比数组,nodeList
const container = new Container(arr)
const iterator = container.getIterator()
while (iterator.hasNext()) {
    console.info(iterator.next())
}

复制代码

ES6 以后的迭代器

ES6 新增了 Set 和 Map ,致使目前有序集合有 Array Map Set String TypedArray arguments NodeList 这么多种，须要一个统一的遍历接口访问这些有序集合中的数据，因此 ES6 引入了 Iterator。

ES6 默认的 Iterator 接口部署在数据结构的 [Symbol.iterator] 属性上，该属性自己是一个函数，执行这个函数会返回个遍历器对象。

遍历器对象的特征：

拥有 next 方法
执行 next(),会返回个包含 value 和 done 属性的对象
- value: 当前数据结构成员的值
- done: 布尔值，表示遍历是否结束

在数组上测试下

let arr = [1, 2, 3]
let iterator = arr[Symbol.iterator]();
console.info(iterator.next()) // { value: '1', done: false }
console.info(iterator.next()) // { value: '2', done: false }
console.info(iterator.next()) // { value: '3', done: false }
console.info(iterator.next()) // { value: undefined, done: true }
复制代码

代码优化并封装个 each 方法：

function each(data) {
    const iterator = data[Symbol.iterator]() // 生成迭代器
    let item = { done: false }
    while (!item.done) {
        item = iterator.next()
        if (!item.done) {
            console.info(item)
            console.info(item.value)
        }
    }
}
let arr = [1, 2, 3]
let nodeList = document.getElementsByTagName('P')
let map = new Map()
map.set('name', 'zhangSan')
map.set('age', 12)
each(arr)
each(nodeList)
each(map)
复制代码

只要具备 [Symbol.iterator] 属性的集合，就可使用 each 方法进行遍历

for of

Symbol.iterator并非人人都知道的，也不是每一个人都须要封装一个 each 方法，所以，ES6提供了一个新的方法 for...of 来遍历：

// for...of 自动遍历拥有 Iterator 接口的数据结构
let arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}

// 输出：1 2 3
复制代码

说明 for...of 只是个语法糖，运行原理：

首先调用遍历对象 Symobo.iterator 方法，拿到遍历器对象;
每次循环，调用遍历器对象 next() 方法，获得 {value: ..., done: ... } 对象

等价于下面：

// 经过调用iterator，拿到迭代器对象
const iterator = arr[Symbol.iterator]()

// 初始化一个迭代结果
let now = { done: false }

// 循环往外迭代成员
while(!now.done) {
    now = iterator.next()
    if(!now.done) {
        console.log(`如今遍历到了${now.value}`)
    }
}
复制代码

ES6 Iterator 和 Generator

Iterator 的价值不限于上述几个类型的遍历，还有 Generator 函数的使用。Generator 返回的数据符合 Iterator 接口遍历的要求，因此 Generator 函数也可使用 Iterator 语法。

function* helloWorldGenerator() {
    yield 'hello'
    yield 'world'
    return 'ending'
}
// var hw = helloWorldGenerator()
// console.info(hw)
// hw.next() //{value: "hello", done: false}
// hw.next() //{value: "world", done: false}
// hw.next() //{value: "ending", done: true}
// hw.next() //{value: undefined, done: true}
// console.info(hw[Symbol.iterator])

for (var item of helloWorldGenerator()) {
    console.info(item) 
    // hello 
    // world
}

复制代码

根据这个特色能够用 for...of 遍历普通对象

for...of 遍历普通对象的解决方法：

使用 Objet.keys 将对象键名生成一个数组，而后遍历该数组；
Generator 函数从新包装对象

let person = {
  name: 'Ken',
  sex: 'Male'
}

// Generator 包装对象
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}
for (let [key, value] of entries(person)) {
  console.log(`${key}: ${value}`);
}

// 输出：
// name: Ken 
// sex: Male
复制代码

迭代器分类

内部迭代器

内部已经定义好了迭代规则，它彻底接手整个迭代过程，外部只须要一次初始调用

实现：

function each(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    fn(i, arr[i])
  }
}

each([1, 2, 3], function(i, n) {
  console.log(i) // 0 1 2
  console.log(n) // 1 2 3
})
复制代码

优缺点：

优势：内部迭代器在调用的时候很是方便，外界不用关心迭代器内部的实现，跟迭代器的交互也仅仅是一次初始调用
缺点：因为内部迭代器的迭代规则已经被提早规定，上面的 each 函数就没法同时迭代2个数组，好比要比较两数组是否相等, 只能在其回调函数中做文章了, 代码以下：

var compare = function( ary1, ary2 ){
  if ( ary1.length !== ary2.length ){
    throw new Error ( 'ary1 和ary2 不相等' );
  }
  each( ary1, function( i, n ){
    if ( n !== ary2[ i ] ){
      throw new Error ( 'ary1 和ary2 不相等' );
    }
  });
  alert ( 'ary1 和ary2 相等' );
};
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( 'ary1 和ary2 不相等' );
复制代码

jQuery 的 $.each 以及 for...of 也是内部迭代器

外部迭代器

外部迭代器必须显式地请求迭代下一个元素

上面的"自定义个迭代器" 以及 Generator yield 就是外部迭代器。解决下两个数组比较问题：

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]
const container1 = new Container(arr1), container2 = new Container(arr2)
const iterator1 = container1.getIterator(), iterator2 = container2.getIterator()
function compare(iterator1, iterator2) {
  while (iterator1.hasNext() || iterator2.hasNext()) {
    if (iterator1.next() !== iterator2.next()) {
      return false
    }
  }
  return true
}
console.info(compare(iterator1, iterator2))
复制代码