資訊專欄INFORMATION COLUMN
摘要：但實(shí)際中，內(nèi)部迭代器和外部迭代器兩者并無(wú)優(yōu)劣。迭代器并不只迭代數(shù)組迭代器模式不僅能迭代數(shù)組，還可以迭代一些類數(shù)組對(duì)象。晚安了，參考設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐曾探本文作者本文鏈接迭代器模式設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐閱讀筆記
迭代器模式：一個(gè)相對(duì)簡(jiǎn)單的模式，目前絕大多數(shù)語(yǔ)言都內(nèi)置了迭代器，以至于大家都不覺(jué)得這是一種設(shè)計(jì)模式
迭代器模式迭代器模式指提供一種方法訪問(wèn)一個(gè)聚合對(duì)象中的各個(gè)元素，而又不需要暴露該對(duì)象的內(nèi)部表示
個(gè)人理解成遍歷聚合對(duì)象中的各個(gè)（某些）元素，并執(zhí)行一個(gè)回調(diào)方法，如今大多數(shù)語(yǔ)言都已經(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)
})
如何自定義一個(gè)each函數(shù)，實(shí)現(xiàn)以上的效果呢？
var each = function (arr, callback) {
for (var i = 0, len = arr.length; i
這里實(shí)現(xiàn)了一個(gè)較為簡(jiǎn)單的內(nèi)部迭代器方法，然而迭代器同時(shí)還有一種類似——外部迭代器
內(nèi)部迭代器和外部迭代器
內(nèi)部迭代器
如剛剛自定義個(gè)each方法，這種迭代器在內(nèi)部已經(jīng)定義好了迭代規(guī)則，如，迭代的方向，迭代是否在滿足條件是中止。
內(nèi)部迭代器在調(diào)用時(shí)非常方便，外界不用去關(guān)心其內(nèi)部的實(shí)現(xiàn)。在每一次調(diào)用時(shí)，迭代器的規(guī)則就已經(jīng)制定，如果遇到一些不同樣的迭代規(guī)則，此時(shí)的內(nèi)部迭代器并不很優(yōu)雅
like this:
// 當(dāng)需要同時(shí)迭代兩個(gè)數(shù)組時(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])
但如果用外部迭代器來(lái)實(shí)現(xiàn)一個(gè)這樣的需求時(shí)，就顯得更加清晰易懂
外部迭代器
外部迭代器必須顯示地請(qǐng)求迭代下一個(gè)元素（ltertor.next()）
外部迭代器雖然增加了調(diào)用的復(fù)雜度，但增強(qiáng)了迭代器的靈活性，我們可以手工控制迭代過(guò)程或者順序。Generators 應(yīng)該就是一種外部迭代器的實(shí)現(xiàn)。那么接下來(lái)看看如何自己實(shí)現(xiàn)一個(gè)外部迭代器：
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
}
}
通過(guò)這個(gè)迭代器，我們就可以更加優(yōu)雅的實(shí)現(xiàn)剛剛的compare方法來(lái)迭代兩個(gè)數(shù)組了：
var compare = function(iteraotr1, iteraotr2) {
if (iteraotr1.length !== iteraotr2.length) {
alert("不相等")
}
//外部設(shè)定條件來(lái)決定迭代器的進(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) // 相等
通過(guò)外部迭代器，較為優(yōu)雅的實(shí)現(xiàn)了這個(gè)同時(shí)迭代兩個(gè)數(shù)組的需求。但實(shí)際中，內(nèi)部迭代器和外部迭代器兩者并無(wú)優(yōu)劣。具體使用何種，需更具實(shí)際情況來(lái)決定。
迭代器并不只迭代數(shù)組
迭代器模式不僅能迭代數(shù)組，還可以迭代一些類數(shù)組對(duì)象。比如arguments，{a:1,n:2,c:3}等。其須具備的就是對(duì)象擁有一個(gè)length屬性可以訪問(wèn)，并能通過(guò)下標(biāo)來(lái)訪問(wèn)對(duì)象中的各個(gè)元素。
其中for ... of 可以來(lái)循環(huán)數(shù)組，對(duì)象字面量則可以通過(guò)for ... in來(lái)訪問(wèn)其中的各個(gè)屬性的值來(lái)達(dá)到目的。
迭代器可以中止
在for循環(huán)中，我們可以通過(guò)break來(lái)跳出循環(huán)，所以在迭代器模式中。我們可以利用這個(gè)來(lái)提前終止迭代。接下來(lái)我們改在一下最開(kāi)始的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)原理較為簡(jiǎn)單，JavaScript中有更多針對(duì)不同需求的迭代器實(shí)現(xiàn)。我們也可以自己定義一個(gè)適合的規(guī)則來(lái)處理數(shù)組，類數(shù)組這樣的對(duì)象。但往往最常見(jiàn)的也是最容易被忽視的，而一個(gè)常見(jiàn)的東西往往是更好用更受用的。
晚安了，skr skr skr
參考
《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》—— 曾探
本文作者： Roy Luo本文鏈接： JS迭代器模式《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》閱讀筆記
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96627.html
摘要：本文已同步到中常見(jiàn)的設(shè)計(jì)模式如果感覺(jué)寫的還可以，就給個(gè)小星星吧，歡迎和收藏。本文中關(guān)于各種設(shè)計(jì)模式定義都是引用書中的，部分引用自百度百科已標(biāo)出。下面把我整理出的常用設(shè)計(jì)模式按類型做個(gè)表格整理。 本文已同步到Github JavaScript中常見(jiàn)的設(shè)計(jì)模式,如果感覺(jué)寫的還可以，就給個(gè)小星星吧，歡迎star和收藏。 最近拜讀了曾探大神的《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》，真是醍醐...
摘要：由于系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。后處理器在由預(yù)處理器手寫或編譯后對(duì)應(yīng)用更改。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 譯者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)的時(shí)候。我看到了很多文章及...
摘要：策略模式可以避免代碼中的多重判斷條件。策略模式在程序中或多或少的增加了策略類。此文僅記錄本人閱讀設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐這個(gè)本時(shí)的感受，感謝作者曾探寫出這么好的一本書。設(shè)計(jì)模式中很重要的一點(diǎn)就是將不變和變分離出來(lái)。參考設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐曾探 策略模式的定義是：定義一系列的算法，把它們一個(gè)個(gè)封裝起來(lái)，并且是它們可以相互替換。 策略模式可以避免代碼中的多重判斷條件。 策略模式很好的體現(xiàn)了開(kāi)放-...
摘要：文章系列設(shè)計(jì)模式單例模式設(shè)計(jì)模式策略模式設(shè)計(jì)模式代理模式概念迭代器模式是指提供一種方法順序訪問(wèn)一個(gè)聚合對(duì)象中的各個(gè)元素，而又不需要暴露該對(duì)象的內(nèi)部表示。 前言 本系列文章主要根據(jù)《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》整理而來(lái)，其中會(huì)加入了一些自己的思考。希望對(duì)大家有所幫助。 文章系列 js設(shè)計(jì)模式--單例模式 js設(shè)計(jì)模式--策略模式 js設(shè)計(jì)模式--代理模式 概念 迭代器模式是指...
摘要：保護(hù)代理和虛擬代理保護(hù)代理當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí)，可以設(shè)置保護(hù)代理，通過(guò)一些條件判斷對(duì)請(qǐng)求進(jìn)行過(guò)濾。虛擬代理在程序中可以能有一些代價(jià)昂貴的操作。而虛擬代理是最常用的一種代理模式。 代理模式 代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問(wèn)。 保護(hù)代理和虛擬代理 保護(hù)代理：當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí)，可以設(shè)置保護(hù)代理，通過(guò)一些條件判斷對(duì)請(qǐng)求進(jìn)行過(guò)濾。...
閱讀 3787·2021-10-14 09:43
閱讀 3382·2021-08-25 09:38
閱讀 674·2019-08-30 15:55
閱讀 1466·2019-08-30 13:05
閱讀 2297·2019-08-29 16:05
閱讀 568·2019-08-29 12:58
閱讀 2866·2019-08-29 12:34
閱讀 3299·2019-08-26 12:15
