js設計模式迭代器模式

一.從乙個例子開始講起

jquery each jquery each jquery each

可以看到的時候上面有三種不同的資料結構,他們都有順序遍歷的需求,但是由於api不同,我們得寫多種遍歷的方式,而迭代器模式就是為了簡化有序集合的遍歷產生的模式

我們可以用jquery的each方法來對上面的幾種遍歷的方式進行統一的封裝

function each(data) )
}each(arr)
each(nodelist)
each($p)

結果如下

二.迭代器模式

1.uml類圖:

我們的container類接受乙個有序的資料結構,它有個getiterator方法,返回乙個迭代器,迭代器中右乙個hasnext方法來判斷是否能夠繼續迭代,next方法返回迭代的結果

2.**實現

class container 
getiterator() 
}class iterator 
next() 
return null
}hasnext() 
return true 
}}//測試
let arr = [1,2,3,4,5,6]
let container = new container(arr)
let iterator = container.getiterator()
while(iterator.hasnext())

結果如下

123
456[ 'a', 100 ]
[ 'b', 200 ]

三.es6中的迭代器

眾所周知,es6**現了迭代器iterator,但是好像我們工作中沒怎麼用到?它究竟是怎麼一回事呢?

1.為什麼es6中會出現迭代器

主要原因是在es6中,有序的資料集合已經很多了,

array, map, set, string, typearray, arguments, nodelist

因此需要乙個迭代器提供統一介面,來對這些資料的遍歷進行簡化

2.es6中的iterator究竟是什麼?

es6 規定，預設的 iterator 介面部署在資料結構的symbol.iterator屬性，或者說，乙個資料結構只要具有symbol.iterator屬性，就可以認為是「可遍歷的」（iterable.symbol.iterator屬性本身是乙個函式，就是當前資料結構預設的遍歷器生成函式。執行這個函式，就會返回乙個遍歷器。我們可以使用array來進行演示

array.prototype[symbol.iterator]
> ƒ values() 
array.prototype[symbol.iterator]()
> array iterator {}
array.prototype[symbol.iterator]().next()
>

es6中的iterator和我們上面的大同小異,無非是將next方法和hasnext進行了合併而已.下面我們通過es6提供的iterator介面來重構上面的each函式

function each(data, callback) 
while(!item.done) 
}}let log = (data)=>
let arr = [1,2,3,4,5,6]
let map = new map()
map.set('a', 100)
map.set('b', 200)
each(arr)
each(map)

結果和未修改前的each方法一樣

3.for … of

為了讓呼叫進一步簡化,而不是每一位開發者都得實現類似上面的each方法, es6提供了for…of語法糖,

上面的each方法實際上等價於

for(let item of data)

四.iterator和generator

iterator的價值不僅僅侷限於上述幾個資料結構的遍歷,還可以結合generator解決非同步的問題

function* gen() 
var g = gen()
g[symbol.iterator]

ƒ symbol.iterator

可以看到,generator函式可提供了symbol.iterator介面

generator函式在koa1中是結合co庫來大規模使用的,但是koa2中已經使用了新的語法特性async函式進行了替代, 但是有時為了維護老專案,我們還是得理解.

參考資料

js設計模式 迭代器模式

js設計模式 迭代模式

設計模式 迭代器模式

設計模式 迭代器模式

相關推薦

js設計模式迭代器模式

js設計模式迭代模式

設計模式迭代器模式

設計模式迭代器模式