1. 程式人生 > 實用技巧 >js設計模式——迭代模式

js設計模式——迭代模式

迭代器模式是指提供一種方法順序訪問一個聚合物件的各個元素,而又不需要暴露該物件的內部表示。

實現jq中的each迭代器

$.each( [1, 2, 3], function( i, n ){ 
console.log( '當前下標為: '+ i ); 
console.log( '當前值為:' + n ); 
});

//內部迭代
var each=function (arr,callback) {
// body...
for(var i=0,l=arr.length;i<l;i++){//也可以是倒序
let value=callback.call(arr[i],i,arr[i]);
if(value===false) //中止迭代 break; } } each([1,2,3,4],function(i,v){ console.log("i:",i); console.log("v:",v); })

這裡是將傳入的陣列通過for迴圈來實現的迭代。

需要注意的點是,既然可以順序訪問元素,那麼也可以通過倒序來訪問元素。

還需要注意,可以加上一個中止程式,來中止迭代

這裡還涉及到了內部迭代。**內部迭代時內部已經定義好了迭代規則,完全接手整個迭代過程,外部只需要一次呼叫,呼叫時外界不需要關係迭代器內部實現**。這是內部迭代器的優點也是它的缺點。由於內部迭代器的迭代規則已經被提前定義好了,如果我們想要同時迭代兩個陣列,可能就要深入到each的回撥函式中了。

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 不相等' ); 
} 
}); 
alert ( 'ary1 和 ary2 相等' ); 
}; 
compare( [ 1, 2, 3 ], [ 1, 2, 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 getCurrentItem=function(){
return obj[current];
}

return {
next:next,
getCurrentItem:getCurrentItem,
isDone:isDone
}
}

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

iterator2.next();
iterator1.next();
}

alert('相等');
}

var iterator1=Iterator([1,2,3,4])
var iterator2=Iterator([1,2,3,6])

compare(iterator1,iterator2)

外部迭代器的使用比內部迭代器靈活,能滿足的需求也更多。使用內部迭代器還是外部迭代器,還是要視情況而定。

迭代陣列和字面量物件

前面的迭代器都需要length方法,如果我們遍歷字面量物件,可能前面的寫法是不適用的。在js中,for in 可以迭代普通的字面量物件屬性,

可以在each函式中新增上一個判斷,如果是陣列,就使用for迴圈,如果是物件,就使用for in。