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

時間 2019-12-06

原文原文鏈接

迭代器模式指提供一種方法順序訪問一個聚合對象中的各個元素，而不須要暴露對象的內部。迭代器模式能夠把迭代的過程從業務邏輯中分離出來，在使用迭代器模式後，即便不關心內部構造，也能夠按順序訪問其餘的每一個元素。jquery

jquery中的迭代器

迭代器模式無非就是循環訪問聚合對象中的各個元素。好比jquery中的each函數。設計模式

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

內部迭代器

jquery的each其實屬於內部迭代器，函數內部定義好了迭代規則，外部只須要一次初始調用便可。數組

缺點：因爲內部迭代器的迭代規則已經寫好，因此沒法迭代多個bash

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不相等')
複製代碼

外部迭代器

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

優勢：加強了迭代器的靈活性,能夠手工控制迭代的過程或者順序spa

缺點：增長了調用的複雜度設計

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

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
})
複製代碼