博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript利用数组原型,添加方法实现遍历多维数组每一个元素
阅读量:4495 次
发布时间:2019-06-08

本文共 1401 字,大约阅读时间需要 4 分钟。

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

今天学习了用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); //定义一个计数器,如果存在就是原来 如果不存在初始化成016         //当数组有长度并且传过来的是一个函数的时候我们就对数组执行回调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 something35     }            36 };37 38 //调用我们自己的方法39 arr.each(40     function(item){41         alert(item);    42     }43 );    //1 2 3 4 1 2 1 4  这里实现了遍历多维数组

 

转载于:https://www.cnblogs.com/Lin-Yi/p/7439783.html

你可能感兴趣的文章
物理系统(二)
查看>>
css3中-moz、-ms、-webkit与盒子模型
查看>>
DataTable 整行为空时,去除空行,常用于Excel导入,转换为DataTable时出现
查看>>
网络相关面试题1
查看>>
一种让谷歌搜索引擎拒绝搜索的字符串
查看>>
实现毛玻璃效果
查看>>
[BZOJ4082][Wf2014]Surveillance[倍增]
查看>>
kill -9杀掉nginx主进程、reload失败解决办法
查看>>
objdump 用法
查看>>
前端js模糊搜索(模糊查询)
查看>>
Chrome的hack写法以及CSS的支持程度图示
查看>>
苹果端手机微信页面长按图片无法保存的解决方案
查看>>
SVN、GIT比较
查看>>
asp后台读id设置样式
查看>>
POJ 3744 Scout YYF I 概率DP+矩阵快速幂 好题
查看>>
Training Logisches Denken
查看>>
谁分配谁释放
查看>>
正则表达式
查看>>
Java集合之LinkedHashSet源码分析
查看>>
David Silver强化学习Lecture1:强化学习简介
查看>>