迭代器模式
- 顺序访问一个集合
- 使用者无需知道集合的内部结构
示例
- 没有合适的例子, 使用jQuery 演示
迭代器模式.png
迭代器模式封装.png
UML
UML.png
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)
}
}
const arr = [1, 2, 3, 4, 5, 6]
const container = new Container(arr)
const iterator = new Iterator(container)
while (iterator.hasNext()) {
console.log(iterator.next())
}
场景
jQuery each
jQueryeach.png
ES6 iterator
-
ES6 iterator 为何存在?
- ES6 语法中有序集合的数据类型已经有很多
- Array Map Set String TypedArray arguments NodeList
- 需要有一个统一的遍历接口来遍历所有数据类型
- (注意, object 不是有序集合, 可以用 Map 代替)
-
ES6 Iterator 是什么
- 以上数据类型, 都有 [Symbol.iterator] 属性
- 属性值是函数, 执行函数返回一个迭代器
- 这个迭代器就有 next 方法可顺序迭代子元素
- 可运行 Array.prototype[Symbol.iterator] 来测试
ES6.png
-
示例
ES6.png
ES6TEST.png -
语法糖
for...of.png
设计原则验证
- 迭代器对象和目标分离
- 迭代器将使用者与目标对象隔开
- 符合开放封闭原则
