JS设计模式（迭代器模式）

介绍

顺序访问一个集合 使用者无需知道集合的内部结构（封装）

演示

jQuery的多种遍历方式 修改后

UML类图

代码

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 false
        }
        return true
    }
}

class Container {
          
   
    constructor(list) {
          
   
        this.list = list
    }
    // 生成遍历器
    getIterator() {
          
   
        return new Iterator(this)
    }
}
// 测试
var arr = [1,2,3,4,5]
let container = new Container(arr)
let iterator = container.getIterator()
while(iterator.hasNext()) {
          
   
    console.log(iterator.next())
}

场景

ES6的Iterator

ES6 Iterator为何存在

ES6语法中，有序集合的数据类型已经有很多 Array、Map（有序的object）、Set、String、TypedArray、arguments、NodeList 需要有一个统一的遍历接口来遍历所有的数据类型 注意： （object 不是有序集合，可以用Map代替）

ES Iterator是什么

以上数据类型，都有 [symbol.iterator] 属性 属性值是函数，执行函数返回一个迭代器 这个迭代器就有next方法可顺序迭代子元素 可运行Array.prototype[Symbol.iterator]来测试

示例

例1： 其中，data是带有遍历器特性的对象： data[Symbol.iterator] 有值

例2： 优化：将一堆的console.log 修改成 有值的时候输出

ES6 Iterator 与Generator

Iterator 的价值不限于上述几个类型的遍历 还有Generator 函数的使用 即只要返回的数据符合Iterator接口的要求 即可使用Iterator 语法，这就是迭代器模式 使用：

总结

迭代器对象和目标对象分离 迭代器将使用者与目标对象隔离开 符合开放封闭原则