一.從一個例子開始講起
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迭代器模式</title>
</head>
<body>
<p>jquery each</p>
<p>jquery each</p>
<p>jquery each</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var arr = [1, 2, 3]
var nodeList = document.getElementsByTagName('p')
var $p = $('p')
// 第一
arr.forEach(function (item) {
console.log(item)
})
// 第二
var i, length = nodeList.length
for (i = 0; i < length; i++) {
console.log(nodeList[i])
}
// 第三
$p.each(function (key, p) {
console.log(key, p)
})
</script>
</body>
</html>
可以看到的時候上面有三種不同的數據結構,他們都有順序遍歷的需求,但是由於api不同,我們得寫多種遍歷的方式,而迭代器模式就是爲了簡化有序集合的遍歷產生的模式
我們可以用jquery的each方法來對上面的幾種遍歷的方式進行統一的封裝
function each(data) {
var $data = $(data)
$data.each(function (key, p) {
console.log(key, p)
})
}
each(arr)
each(nodeList)
each($p)
結果如下
二.迭代器模式
1.UML類圖:
我們的 Container 類接受一個有序的數據結構,它有個 getIterator 方法,返回一個迭代器,迭代器中右一個 hasNext 方法來判斷是否能夠繼續迭代,next方法返回迭代的結果
2.代碼實現
class Container {
constructor(list) {
this.list = list
}
getIterator() {
return new Iterator(this.list)
}
}
class Iterator {
constructor(list) {
this.list = 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
}
}
//測試
let arr = [1,2,3,4,5,6]
let container = new Container(arr)
let iterator = container.getIterator()
while(iterator.hasNext()) {
console.log(iterator.next())
}
結果如下
1
2
3
4
5
6
[ '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() { [native code] }
Array.prototype[Symbol.iterator]()
> Array Iterator {}
Array.prototype[Symbol.iterator]().next()
> {value: undefined, done: true}
ES6中的iterator和我們上面的大同小異,無非是將next方法和hasNext進行了合併而已.下面我們通過ES6提供的iterator接口來重構上面的each函數
function each(data, callback) {
//通過js提供的Symbol.iterator返回迭代器
const iterator = data[Symbol.iterator]()
let item = {done: false}
while(!item.done) {
item.iterator.next()
if(!item.done) {
callback(item)
}
}
}
let log = (data)=>{
console.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) {
cb(item)
}
四.iterator和generator
Iterator的價值不僅僅侷限於上述幾個數據結構的遍歷,還可以結合Generator解決異步的問題
function* gen() {
yield '1'
yield '2'
return 'done'
}
var g = gen()
g[Symbol.iterator]
ƒ Symbol.iterator { [native code] }
可以看到,generator函數可提供了Symbol.iterator接口
generator函數在koa1中是結合co庫來大規模使用的,但是koa2中已經使用了新的語法特性async函數進行了替代, 但是有時爲了維護老項目,我們還是得理解.
參考資料
https://coding.imooc.com/class/chapter/255.html#Anchor
http://es6.ruanyifeng.com/#docs/iterator