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 语法,这就是迭代器模式
使用:
总结
- 迭代器对象和目标对象分离
- 迭代器将使用者与目标对象隔离开
- 符合开放封闭原则