迭代器模式

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

示例

• 没有合适的例子, 使用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

设计原则验证

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