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 語法，這就是迭代器模式
  
  使用：
  

總結

• 迭代器物件和目標物件分離
• 迭代器將使用者與目標物件隔離開
• 符合開放封閉原則