js設計模式——迭代模式
阿新 • • 發佈:2020-09-21
迭代器模式是指提供一種方法順序訪問一個聚合物件的各個元素,而又不需要暴露該物件的內部表示。
實現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。