JavaScript利用数组原型，添加方法实现遍历多维数组每一个元素

Posted 2020-10-04 稀里糊涂林老冷

原型就是提供给我们为了让我们扩展更多功能的。

今天学习了用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  这里实现了遍历多维数组