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

今天学习了用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. linux编程基础汇总贴

    linux编程基础汇总贴http://newzol.cn/forum.php?mod=viewthread&tid=67&fromuid=3(出处: newzol) 1.管道 http ...

  2. 开源自己用python封装的一个Windows GUI(UI Automation)自动化工具,支持MFC,Windows Forms,WPF,Metro,Qt

    首先,大家可以看下这个链接 Windows GUI自动化测试技术的比较和展望 . 这篇文章介绍了Windows中GUI自动化的三种技术:Windows API, MSAA - Microsoft Ac ...

  3. python趣味——与MS系列编译器一样强大的Unicode变量名支持

    中文变量名,中文函数名,中文类名等,可惜Python2不支持,但在Python3时代,这些都可以完美支持了. def 中文函数(): return 1

  4. PHP之取得当前时间函数方法

    PHP之取得当前时间函数方法 PHP之取得当前时间函数方法文章提供了php的几种获取当前时间的函数,date,time等,同时告诉我如何解决时区问题.php教程取得当前时间函数文章提供了php的几种获 ...

  5. BAT脚本/Dos 改ip地址

    BAT脚本/Dos 改ip 经常换地方上网,总改这些很麻烦,直接写三个bat,点一下就换了.需要管理员权限.之前用python的wmi写过,但是没起作用. ip:10.10.41.15 子网掩码:25 ...

  6. react-router简明学习

    前面的话 路由用来分发请求.后端是提供服务的,所以它的路由是在找controller,前端是显示页面的,所以它的路由是在找component.本文将详细介绍react-router-dom的内容 Ro ...

  7. ELK学习笔记(一)安装Elasticsearch、Kibana、Logstash和X-Pack

    最近在学习ELK的时候踩了不少的坑,特此写个笔记记录下学习过程. 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因 ...

  8. Flashing Back a Failed Primary Database into a Physical Standby Database(闪回FAILOVER失败的物理备库)

    文档操作依据来自官方网址:https://docs.oracle.com/cd/E11882_01/server.112/e41134/scenarios.htm#SBYDB4888 闪回FAILOV ...

  9. [BZOJ 1079][SCOI 2008]着色方案

    1079: [SCOI2008]着色方案 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2237  Solved: 1361[Submit][Stat ...

  10. 项目Alpha冲刺Day7

    一.会议照片 二.项目进展 1.今日安排 今天都是课,主要就是用空闲时间熟悉一下框架使用以及继续进行框架搭建. 2.问题困难 前台界面框架vue和element-ui的写法要适应. 3.心得体会 vu ...