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


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

今天學習了用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  這里實現了遍歷多維數組

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM