javascript設(shè)計(jì)模式之迭代器模式

更新時(shí)間：2022年01月11日 14:27:10 作者：妖怪不慌不張

這篇文章主要為大家介紹了javascript迭代器模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

迭代器模式介紹

順序訪問(wèn)一個(gè)集合

順序：如數(shù)組、類(lèi)數(shù)組稱(chēng)為順序，而非對(duì)象，能從0，1，2…通過(guò)index訪問(wèn)的值

使用者無(wú)需知道集合的內(nèi)部結(jié)構(gòu)

示例

如果要對(duì)這三個(gè)變量進(jìn)行遍歷，需要寫(xiě)三個(gè)遍歷方法

<p>each1</p>
<p>each2</p>
<p>each3</p>
...
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var arr = [1,2,3]
var nodeList = document.getElementsByTagName('p')
var $p = $('p')
// 如果要對(duì)這三個(gè)變量進(jìn)行遍歷，需要寫(xiě)三個(gè)遍歷方法
// 1
arr.forEach(function(item){
	console.log(item)
})
// 2
var i;length = nodeList.length
for(i = 0;i < length;i ++) {
	console.log(nodeList(i))
}
// 3
$p.each(function(key, p){
	console.log(key,p)
})
</script>

如果寫(xiě)成一個(gè)遍歷方法，拿jquery的$.each舉例，則這種方法稱(chēng)為迭代器模式

// 如果寫(xiě)成一個(gè)遍歷方法，拿jquery的$.each舉例，則這種方法稱(chēng)為迭代器模式
var arr = [1,2,3]
var nodeList = document.getElementsByTagName('p')
var $p = $('p')
function each(data){
	var $data = data
	$data.each(function(key, val){
		console.log(key, val)
	})
}
each(arr)
each(nodeList)
each($p)

迭代器模式UML類(lèi)圖

UML類(lèi)圖: 用圖的方式表示各個(gè)類(lèi)所有的屬性及相互之間的引用、繼承關(guān)系

在這里插入圖片描述

迭代器模式原生代碼演示

class Iterator {
    constructor(conatiner) {
        this.list = conatiner.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
    }
}
class Container {
    constructor(list) {
        this.list = list
    }
    getIterator() {
        return new Iterator(this)
    }
}
// 測(cè)試代碼
let container = new Container([1, 2, 3, 4, 5])
let iterator = container.getIterator()
while(iterator.hasNext()) {
    console.log(iterator.next())
}

迭代器模式的場(chǎng)景

jquery each
ES6 Iterator

ES6 語(yǔ)法中，有序集合的數(shù)據(jù)類(lèi)型已經(jīng)有很多，例如

Array
Map
Set
String
Arguments
NodeList
以上數(shù)據(jù)類(lèi)型都有[Symbol.iterator]屬性，Symbol.iterator理解成唯一的key即可，屬性值是一個(gè)函數(shù)，執(zhí)行函數(shù)返回一個(gè)迭代器，這個(gè)迭代器就有next方法可順序迭代子元素
通過(guò)Array.prototype[Symbol.iterator]來(lái)測(cè)試迭代器
object不是有序集合，可以用Map來(lái)代替

在這里插入圖片描述

ES6 Iterator示例

let arr = [1, 2, 3, 4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 200)
function each(data) {
    // 生成遍歷器
    let iterator = data[Symbol.iterator]()
    let item = {done: false}
    while (!item.done) {
        item = iterator.next()
        if (!item.done) {
            console.log(item.value)
        }
    }
}
each(arr)
each(nodeList)
each(m)

由于Symbol.iterator屬性并不是人所知，同時(shí)并是每次用到它是都需要封裝一個(gè)each方法，因此有了es6新語(yǔ)法for…of語(yǔ)法，以上代碼可以這樣寫(xiě)

function each(data) {
    for (let item of data) {
        console.log(item)
    }
}
each(arr)
each(nodeList)
each(m)

擴(kuò)展

ES6 Iterator與Generator Iterator的價(jià)值不限于上述的幾種類(lèi)型遍歷還有Generator函數(shù)的使用即返回的數(shù)據(jù)只要符合Iterator接口的要求（存在Symbol.iterator屬性），就可以使用Iterator語(yǔ)法，即迭代器模式

在這里插入圖片描述