迭代器模式

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

示例

没有合适的例子, 使用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] 来测试