JS迭代器模式《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》閱讀筆記

djfml 發(fā)布于2019-08-23 10:43 / 2062人閱讀

摘要：但實(shí)際中，內(nèi)部迭代器和外部迭代器兩者并無優(yōu)劣。迭代器并不只迭代數(shù)組迭代器模式不僅能迭代數(shù)組，還可以迭代一些類數(shù)組對象。晚安了，參考設(shè)計(jì)模式與開發(fā)實(shí)踐曾探本文作者本文鏈接迭代器模式設(shè)計(jì)模式與開發(fā)實(shí)踐閱讀筆記

迭代器模式：一個相對簡單的模式，目前絕大多數(shù)語言都內(nèi)置了迭代器，以至于大家都不覺得這是一種設(shè)計(jì)模式

迭代器模式

迭代器模式指提供一種方法訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內(nèi)部表示

個人理解成遍歷聚合對象中的各個（某些）元素，并執(zhí)行一個回調(diào)方法，如今大多數(shù)語言都已經(jīng)內(nèi)置了迭代器，但這里記錄一下，理解其中的實(shí)現(xiàn)目的。

jQuery 中的$.each

$.each([1,2,3,4,5], function(i, el) {
    console.log("index: ",i)
    console.log("item: ", el)
})

如何自定義一個each函數(shù)，實(shí)現(xiàn)以上的效果呢？

var each = function (arr, callback) {
    for (var i = 0, len = arr.length; i
這里實(shí)現(xiàn)了一個較為簡單的內(nèi)部迭代器方法，然而迭代器同時還有一種類似——外部迭代器
內(nèi)部迭代器和外部迭代器
內(nèi)部迭代器
如剛剛自定義個each方法，這種迭代器在內(nèi)部已經(jīng)定義好了迭代規(guī)則，如，迭代的方向，迭代是否在滿足條件是中止。
內(nèi)部迭代器在調(diào)用時非常方便，外界不用去關(guān)心其內(nèi)部的實(shí)現(xiàn)。在每一次調(diào)用時，迭代器的規(guī)則就已經(jīng)制定，如果遇到一些不同樣的迭代規(guī)則，此時的內(nèi)部迭代器并不很優(yōu)雅
like this:
// 當(dāng)需要同時迭代兩個數(shù)組時

var compare = function(ary1, ary2) {
    if (ary1.length !== ary2.length) {
        throw new Error ("ary1 和 ary2 不相等")
    }
    
    each(ary1, function(i, n){
        if (n !== ary2[i]) {
            throw new Error ("ary1 和 ary2 不相等")
        }
    })
    alert ("ary1, ary2相等")
}

compare([1,2,3,4], [2,3,4,5,6])
但如果用外部迭代器來實(shí)現(xiàn)一個這樣的需求時，就顯得更加清晰易懂
外部迭代器
外部迭代器必須顯示地請求迭代下一個元素（ltertor.next()）
外部迭代器雖然增加了調(diào)用的復(fù)雜度，但增強(qiáng)了迭代器的靈活性，我們可以手工控制迭代過程或者順序。Generators 應(yīng)該就是一種外部迭代器的實(shí)現(xiàn)。那么接下來看看如何自己實(shí)現(xiàn)一個外部迭代器：
var Iterator = function(obj) {
    var current = 0
    var next = function() {
        current += 1
    }
    var isDone = function() {
        return current >= obj.lenght
    }
    var getCurrent = function() {
        return obj[current]
    }
    return {
        next: next,
        length: obj.length,
        isDone:isDone,
        getCurrent:getCurrent
    }
}
通過這個迭代器，我們就可以更加優(yōu)雅的實(shí)現(xiàn)剛剛的compare方法來迭代兩個數(shù)組了：
var compare = function(iteraotr1, iteraotr2) {
    if (iteraotr1.length !== iteraotr2.length) {
        alert("不相等")
    }
    //外部設(shè)定條件來決定迭代器的進(jìn)行
    while (!iteraotr1.isDone() && !iteraotr2.isDone()) {
        if (iteraotr1.getCurrent() !== iteraotr2.getCurrent()) {
            alert("不相等")
        }
        iteraotr1.next()
        iteraotr2.next()
    }
    alert("相等")
}

var iteraotr1 = Iterator([1,2,3])
var iteraotr2 = Iterator([1,2,3])

compare(iteraotr1,iteraotr2) // 相等
通過外部迭代器，較為優(yōu)雅的實(shí)現(xiàn)了這個同時迭代兩個數(shù)組的需求。但實(shí)際中，內(nèi)部迭代器和外部迭代器兩者并無優(yōu)劣。具體使用何種，需更具實(shí)際情況來決定。
迭代器并不只迭代數(shù)組
迭代器模式不僅能迭代數(shù)組，還可以迭代一些類數(shù)組對象。比如arguments，{a:1,n:2,c:3}等。其須具備的就是對象擁有一個length屬性可以訪問，并能通過下標(biāo)來訪問對象中的各個元素。
其中for ... of 可以來循環(huán)數(shù)組，對象字面量則可以通過for ... in來訪問其中的各個屬性的值來達(dá)到目的。
迭代器可以中止
在for循環(huán)中，我們可以通過break來跳出循環(huán)，所以在迭代器模式中。我們可以利用這個來提前終止迭代。接下來我們改在一下最開始的each函數(shù)
var each = function(arr, callback) {
    var result
    for (var i = 0, len = arr.length; i < len; i++) {
        result = callback.call(arr[i], i, arr[i])
        if (result === false) {
            break
        }
    }
}

each([1,2,3,4,5,6,7], function(i, el) {
    if (el > 3) {
        return false
    }
    console.log(el)
})
最后
迭代器模式的實(shí)現(xiàn)原理較為簡單，JavaScript中有更多針對不同需求的迭代器實(shí)現(xiàn)。我們也可以自己定義一個適合的規(guī)則來處理數(shù)組，類數(shù)組這樣的對象。但往往最常見的也是最容易被忽視的，而一個常見的東西往往是更好用更受用的。
晚安了，skr skr skr
參考
《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》—— 曾探
本文作者： Roy Luo本文鏈接： JS迭代器模式《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》閱讀筆記