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

今天学习了用js模拟底层代码,实现数组多维的遍历。思想是在数组原型上添加一个方法。

 //  js中的数组forEach方法,传入回掉函数 能够帮助我们遍历数组
var arr =[1,2,3,4,[1,2,[1,4]]];
arr.forEach(
function(item , index , arr){
alert(item); //1 2 3 4 1214
}
);
//我们发现 这个方法只提供给我们遍历一维数组的功能 //我们想自己实现一个能遍历多维数组的方法 那么就在原型里面添加方法
// 原型的一个作用就是留给我们扩展对象的属性和方法的
//我们为数组添加一个each方法能遍历多维数组 传入一个回掉函数
Array.prototype.each = function( fn ){
try{ //核心业务逻辑
this.i||(this.i = 0); //定义一个计数器,如果存在就是原来 如果不存在初始化成0
//当数组有长度并且传过来的是一个函数的时候我们就对数组执行回调
if(this.length>0 && fn.constructor == Function){
while(this.i < this.length){ //进行遍历
var e = this[this.i]; //取到当前元素
//如果取到的e元素是个数组,那就递归 一直到是一个元素的时候再执行回调
if(e && e.constructor == Array){
e.each(fn);
}else{
//进入这里说明 e元素是单个元素
//我们为e元素绑定方法,相当于e调用了fn方法
//fn.apply(e,[e]); 或者
fn.call(e,e);
}
this.i++;
}
}
this.i = null; //进行垃圾回收 删除引用标记
}catch(ex){
//do something
}
}; //调用我们自己的方法
arr.each(
function(item){
alert(item);
}
); //1 2 3 4 1 2 1 4 这里实现了遍历多维数组

JavaScript利用数组原型,添加方法实现遍历多维数组每一个元素的更多相关文章

  1. JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间

    涉及知识点:(1)原型的引入(2)构造函数.原型对象和实例对象之间的关系(3)__proto__和prototype的理解 直接举例:在自定义构造函数创建对象时,因为创建的对象使用的不是同一个方法,所 ...

  2. js中自己实现each方法来遍历多维数组

  3. JavaScript 遍历多维数组

    基于ECMAScript5提供遍历数组的forEach方法仅能遍历一维数组,没有提供循环遍历多维数组的方法,所以根据白鹤翔老师的讲解,实现如下遍历多维数组的each方法,以此遍历多维数组. <s ...

  4. 数组的三种方式总结 多维数组的遍历 Arrays类的常用方法总结

    一.数组的三种声明方式总结 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] tes ...

  5. JS高级---构造函数通过原型添加方法,原型的作用: 共享数据, 节省内存空间

    JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间 构造函数 //构造函数 function Person(sex, age) { this.sex = sex; thi ...

  6. js递归遍历多维数组并在修改数组的key后返回新的多维数组

    我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...

  7. PHP基础语法: echo,var_dump, 常用函数:随机数:拆分字符串:explode()、rand()、日期时间:time()、字符串转化为时间戳:strtotime()可变参数的函数:PHP里数组长度表示方法:count($attr[指数组]);字符串长度:strlen($a)

    PHP语言原理:先把代码显示在源代码中,再通过浏览器解析在网页上 a. 1.substr;  //用于输出字符串中,需要的某一部分 <?PHP $a="learn php"; ...

  8. for里面是采用setInterval遍历二维数组,for循环到最后一个数的时候,才执行setInterval的问题解决

    点击播放看效果 <!doctype html> <html lang="en"> <head> <meta charset="U ...

  9. C:指针遍历二维数组

    C 指针遍历二维数组 http://blog.csdn.net/lcxandsfy/article/details/55000033 C++ 字符串指针与字符串数组 https://www.cnblo ...

随机推荐

  1. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  2. Flume搭建

    [root@hadoop01 src]# mkdir flume [root@hadoop01 src]# ll 总用量 0 drwxr-xr-x. 2 root root  6 4月   7 201 ...

  3. Git 初体验

    第一次接触git的时候,一直在纳闷git和github的区别,解释下,git是版本管理工具,github是开源共享平台,个人这么理解,理解这么多就行了 先说git吧,下载git客户端,地址:http: ...

  4. web api 路由规则和接收数据

    1:默认是不带action的 所以再访问的时候 只需要 api/控制 2:加了action 就要 api/控制器/方法名字 接收方法  传参 json 序列化传参

  5. docker学习系列(五):使用docker创建集成服务--lnmp

    在掌握了docker的基本命令之后,我也是想着去用docker做一点实际的配套环境,就拿自己最常用的lnmp环境来做测试.配套环境运行的顺序依次是mysql->php->nginx,至于为 ...

  6. 你学会UI设计了吗?

    你学会UI设计了吗? UI设计师如何前驱? 关于产品 作为一个UI设计师,我们还在干巴巴的等着产品经理甚至交互提供的需求和原型再开始动手吗?这样被动的工作是永远无法提升自己的,当然你也永远只能拿到几千 ...

  7. 生成式模型之 GAN

    生成对抗网络(Generative Adversarial Networks,GANs),由2014年还在蒙特利尔读博士的Ian Goodfellow引入深度学习领域.2016年,GANs热潮席卷AI ...

  8. webpack安装入门

    这两天心血来潮,突然想研究下webpack,花了一天时间,看网上有很多教程,不过发现安装的都是比较老的版本.后来发现还是我太年轻了,找技术播客还不如找官方网站.下面是一个webpack的官方网站,里面 ...

  9. 【Django】模型层说明

    [Django模型层] 之前大概介绍Django的文章居然写了两篇..这篇是重点关注了Django的模型层来进行学习. ■ 模型定义 众所周知,Django中的模型定义就是定义一个类,其基本结构是这样 ...

  10. 【Python】 零碎知识积累 I

    大概也是出于初高中时学化学,积累各种反应和物质的习惯,还有大学学各种外语时一看见不认识的词就马上记下来的习惯,形成了一种能记一点是一点的零碎知识记录的癖好.这篇文章就是专门拿来记录这些零碎知识的,没事 ...