JavaScript 設計模式(六) 迭代器模式

YiHzo發表於2018-11-18

迭代器模式指提供一種方法順序訪問一個聚合物件中的各個元素,而不需要暴露物件的內部。迭代器模式可以把迭代的過程從業務邏輯中分離出來,在使用迭代器模式後,即使不關心內部構造,也可以按順序訪問其他的每個元素。

jquery中的迭代器

迭代器模式無非就是迴圈訪問聚合物件中的各個元素。比如jquery中的each函式。

$.each([1,3,4], function(i, n){
	console.log('當前下標為: '+i)
	console.log('當前值為: '+i)
})
複製程式碼

內部迭代器

jquery的each其實屬於內部迭代器,函式內部定義好了迭代規則,外部只需要一次初始呼叫即可。

缺點:由於內部迭代器的迭代規則已經寫好,所以無法迭代多個

var each = function(ary, callback){
	for(let i = 0, l=ary.length; i<l;i++) {
		callback.call(ary[i], i, ary[i])
	}
}
each([1,2,3], function(i, n){
	alert([i,n])
})
複製程式碼

假如現在有個需求,要判斷2個陣列裡的值是否完全相等,如果不改寫each裡的程式碼,那麼入手的就只能是each的回撥函式了

var each = function(ary, callback){
	for(let i = 0, l=ary.length; i<l;i++) {
		callback.call(ary[i], i, ary[i])
	}
}
each([1,2,3], function(i, n){
	alert([i,n])
})
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不相等')
		}
	})
	alear('ary1和ary2相等')
}
compare([1,2,3],[1,3,4]) //throw new Error('ary1和ary2不相等')
複製程式碼

外部迭代器

外部迭代器必須顯示的請求迭代下一個元素

優點:增強了迭代器的靈活性,可以手工控制迭代的過程或者順序

缺點:增加了呼叫的複雜度

下面用外部迭代器改寫上面那個需求

var Iterator = function(obj){
	var current = 0
	var next = function(){
		current += 1
	}
	var isDone = function(){
		return current >= obj.length
	}
	var getCurrItem = function(){
		return obj[current]
	}
	return {
		next,
		isDone,
		getCurrItem
	}
}

var compare = function(iterator1, iterator2) {
	while(!iterator1.isDone() && !iterator2.isDone()) {
		if(iterator1.getCurrItem() !== iterator2.getCurrItem()){
			throw new Error('iterator1和iterator2不相等')
		}
		iterator1.next()
		iterator2.next()
	}
	alert('iterator1和iterator2不相等')
}

var iterator1 = Iterator([1,2,3])
var iterator2 = Iterator([2,2,3])
compare(iterator1, iterator2) //throw new Error('iterator1和iterator2不相等')
複製程式碼

中止迭代器

迭代器可以像普通for迴圈中的break一樣,提供出一種跳出迴圈的方法

var each = function(ary, callback){
	for(let i = 0, l=ary.length; i<l;i++) {
	    // 如果回撥函式返回false,則中止迴圈
		if(callback(i, ary[i]) === false) {
			break
		}
	}
}
each([1,2,3,4], function(i, n){
	if(n>3){
		return false
	}
	console.log(n) //輸出1,2,3
})
複製程式碼

總結

迭代器模式是一種相對簡單的模式,簡單到很多時候我們都不認為它是一種設計模式。目前絕大部分都內建了迭代器

相關文章