1. 程式人生 > >JavaScript利用數組原型,添加方法實現遍歷多維數組每一個元素

JavaScript利用數組原型,添加方法實現遍歷多維數組每一個元素

多功能 學習 核心 java 自己實現 array 利用 我們 try

原型就是提供給我們為了讓我們擴展更多功能的。

今天學習了用js模擬底層代碼,實現數組多維的遍歷。思想是在數組原型上添加一個方法。

 1 //  js中的數組forEach方法,傳入回掉函數 能夠幫助我們遍歷數組
 2 var arr =[1,2,3,4,[1,2,[1,4]]];
 3 arr.forEach(
 4     function(item , index , arr){
 5         alert(item);    //1 2 3 4 1214
 6     }
 7 );
 8 //我們發現 這個方法只提供給我們遍歷一維數組的功能
 9 
10 //我們想自己實現一個能遍歷多維數組的方法 那麽就在原型裏面添加方法
11 // 原型的一個作用就是留給我們擴展對象的屬性和方法的 12 //我們為數組添加一個each方法能遍歷多維數組 傳入一個回掉函數 13 Array.prototype.each = function( fn ){ 14 try{ //核心業務邏輯 15 this.i||(this.i = 0); //定義一個計數器,如果存在就是原來 如果不存在初始化成0 16 //當數組有長度並且傳過來的是一個函數的時候我們就對數組執行回調 17 if(this.length>0 && fn.constructor == Function){ 18
while(this.i < this.length){ //進行遍歷 19 var e = this[this.i]; //取到當前元素 20 //如果取到的e元素是個數組,那就遞歸 一直到是一個元素的時候再執行回調 21 if(e && e.constructor == Array){ 22 e.each(fn); 23 }else{ 24 //進入這裏說明 e元素是單個元素
25 //我們為e元素綁定方法,相當於e調用了fn方法 26 //fn.apply(e,[e]); 或者 27 fn.call(e,e); 28 } 29 this.i++; 30 } 31 } 32 this.i = null; //進行垃圾回收 刪除引用標記 33 }catch(ex){ 34 //do something 35 } 36 }; 37 38 //調用我們自己的方法 39 arr.each( 40 function(item){ 41 alert(item); 42 } 43 ); //1 2 3 4 1 2 1 4 這裏實現了遍歷多維數組

JavaScript利用數組原型,添加方法實現遍歷多維數組每一個元素