JavaScript设计模式之迭代器模式

迭代器模式：假如我们有很多有序的集合，每种集合可能有多种遍历的方式，而我们想提供一个统一的接口，使用者无需知道内部的结构，那么就可以用迭代器模式。

UML类图：

把我们的数组、对象等这些不同的有序的集合放入Container中，然后返回一个迭代器。

代码实现：

class Iterator {
    constructor(conatiner) {
        this.list = conatiner.list
        this.index = 0
    }
    next() {
        if (this.hasNext()) {
            return this.list[this.index++]
        }
        return null
    }
    hasNext() {
        if (this.index >= this.list.length) {
            return false
        }
        return true
    }
}

class Container {
    constructor(list) {
        this.list = list
    }
    getIterator() {
        return new Iterator(this)
    }
}

// 测试代码
let container = new Container([1, 2, 3, 4, 5])
let iterator = container.getIterator()
while(iterator.hasNext()) {
    console.log(iterator.next())
}

使用场景

• jQuery中的each函数
  

• es6 中的Iterator

  1. es6中的Iterator为何存在？
     
  2. es6 Iterator是什么？
     
     

es6中的Iterator示例：

说明：
在es6中其实对上面代码进行了封装，即for … of
for … of 其实就是遍历迭代器的，而for …in 只是遍历对象的。

附代码：

let arr = [1, 2, 3, 4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 200)

// function each(data) {
//     // 生成遍历器
//     let iterator = data[Symbol.iterator]()

//     // console.log(iterator.next())  // 有数据时返回 {value: 1, done: false}
//     // console.log(iterator.next())
//     // console.log(iterator.next())
//     // console.log(iterator.next())
//     // console.log(iterator.next())  // 没有数据时返回 {value: undefined, done: true}

//     let item = {done: false}
//     while (!item.done) {
//         item = iterator.next()
//         if (!item.done) {
//             console.log(item.value)
//         }
//     }
// }

function each(data) {
    for (let item of data) {
        console.log(item)
    }
}

each(arr)
each(nodeList)
each(m)