JS迭代器模式《JavaScript設計模式與開發實踐》閱讀筆記

djfml 發布于2019-08-23 10:43 / 2040人閱讀

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

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

迭代器模式

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

個人理解成遍歷聚合對象中的各個（某些）元素，并執行一個回調方法，如今大多數語言都已經內置了迭代器，但這里記錄一下，理解其中的實現目的。

jQuery 中的$.each

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

如何自定義一個each函數，實現以上的效果呢？

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

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])
但如果用外部迭代器來實現一個這樣的需求時，就顯得更加清晰易懂
外部迭代器
外部迭代器必須顯示地請求迭代下一個元素（ltertor.next()）
外部迭代器雖然增加了調用的復雜度，但增強了迭代器的靈活性，我們可以手工控制迭代過程或者順序。Generators 應該就是一種外部迭代器的實現。那么接下來看看如何自己實現一個外部迭代器：
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
    }
}
通過這個迭代器，我們就可以更加優雅的實現剛剛的compare方法來迭代兩個數組了：
var compare = function(iteraotr1, iteraotr2) {
    if (iteraotr1.length !== iteraotr2.length) {
        alert("不相等")
    }
    //外部設定條件來決定迭代器的進行
    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) // 相等
通過外部迭代器，較為優雅的實現了這個同時迭代兩個數組的需求。但實際中，內部迭代器和外部迭代器兩者并無優劣。具體使用何種，需更具實際情況來決定。
迭代器并不只迭代數組
迭代器模式不僅能迭代數組，還可以迭代一些類數組對象。比如arguments，{a:1,n:2,c:3}等。其須具備的就是對象擁有一個length屬性可以訪問，并能通過下標來訪問對象中的各個元素。
其中for ... of 可以來循環數組，對象字面量則可以通過for ... in來訪問其中的各個屬性的值來達到目的。
迭代器可以中止
在for循環中，我們可以通過break來跳出循環，所以在迭代器模式中。我們可以利用這個來提前終止迭代。接下來我們改在一下最開始的each函數
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)
})
最后
迭代器模式的實現原理較為簡單，JavaScript中有更多針對不同需求的迭代器實現。我們也可以自己定義一個適合的規則來處理數組，類數組這樣的對象。但往往最常見的也是最容易被忽視的，而一個常見的東西往往是更好用更受用的。
晚安了，skr skr skr
參考
《JavaScript設計模式與開發實踐》—— 曾探
本文作者： Roy Luo本文鏈接： JS迭代器模式《JavaScript設計模式與開發實踐》閱讀筆記

云服務器 GPU云服務器迭代器模式設計模式學習筆記 head-first設計模式筆記 javascript基礎與實踐教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96627.html

JavaScript中常用的設計模式

摘要：本文已同步到中常見的設計模式如果感覺寫的還可以，就給個小星星吧，歡迎和收藏。本文中關于各種設計模式定義都是引用書中的，部分引用自百度百科已標出。下面把我整理出的常用設計模式按類型做個表格整理。本文已同步到Github JavaScript中常見的設計模式,如果感覺寫的還可以，就給個小星星吧，歡迎star和收藏。最近拜讀了曾探大神的《JavaScript設計模式與開發實踐》，真是醍醐...

NSFish 2019-08-23 14:32 評論0 收藏0
【譯】前端練級攻略

摘要：由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。譯者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發的時候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 評論0 收藏0
JS策略模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：策略模式可以避免代碼中的多重判斷條件。策略模式在程序中或多或少的增加了策略類。此文僅記錄本人閱讀設計模式與開發實踐這個本時的感受，感謝作者曾探寫出這么好的一本書。設計模式中很重要的一點就是將不變和變分離出來。參考設計模式與開發實踐曾探策略模式的定義是：定義一系列的算法，把它們一個個封裝起來，并且是它們可以相互替換。策略模式可以避免代碼中的多重判斷條件。策略模式很好的體現了開放-...

Amos 2019-08-22 17:57 評論0 收藏0
js設計模式--迭代器模式

摘要：文章系列設計模式單例模式設計模式策略模式設計模式代理模式概念迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。前言本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設計模式--單例模式 js設計模式--策略模式 js設計模式--代理模式概念迭代器模式是指...

binta 2019-08-23 14:28 評論0 收藏0
JS代理模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：保護代理和虛擬代理保護代理當有許多需求要向某對象發出一些請求時，可以設置保護代理，通過一些條件判斷對請求進行過濾。虛擬代理在程序中可以能有一些代價昂貴的操作。而虛擬代理是最常用的一種代理模式。代理模式代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問。保護代理和虛擬代理保護代理：當有許多需求要向某對象發出一些請求時，可以設置保護代理，通過一些條件判斷對請求進行過濾。...

mist14 2019-08-22 17:57 評論0 收藏0