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

今天学习了用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. 创建Android项目及常见错误解决

    首先打开eclipse,点击右上角有一个这个小按钮,点击java然后OK 因为切换到这个视图来创建android程序更加方便,然后点击 Next Next 这个地方可以修改android应用程序的图标 ...

  2. centos上的grub文件修改

    centos上的grub文件修改 author:headsen chen 2017-10-10  17:36:42 个人原创,转载请注明作者和出处,否则追究法律责任 1,centos6上的修改:vim ...

  3. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  4. 黄金K线理论简述

    黄金K线理论简述 [Ⅰ]. 隐藏在K线背后的多空搏杀 黄金K线的多空搏杀理论,说到底,其核心就是研判K线时,必须从多空搏杀的角度去认知,否则仅仅从表面到表面,是无法掌握K线精髓的.具体来说,多方和空方 ...

  5. NGINX压力测试

    目录 1    硬件配置    3 1.1    型号    3 1.2    CPU    3 1.3    内存    3 2    软件环境    3 2.1    操作系统    3 2.2  ...

  6. Redis进阶实践之十九 Redis如何使用lua脚本

    一.引言               redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运行在任何平台上,也可以嵌入 ...

  7. Algorithm --> 树中求顶点A和B共同祖先

    树中求顶点A和B共同祖先 题目: 给定一颗树,以及两个顶点A和B,求最近的共同祖先,和包含的子顶点个数? 比如:给定如下图的树,以及顶点13和8,则共同祖先为3,以3为root的子顶点共有8个

  8. selenium + robotframework的运行原理

    1.点击ride界面启动用例执行时,首先会调用脚本 2.打开pybot脚本查看内容. 3.打开robot包下面的run文件,我们可以看到信息 run文件内容 程序启动的入口, sys.agv所表达的含 ...

  9. Android,资料分享(2015 版)

    Java 学习 我要再次强调,一定要有Java 基础(虽然现在使用其他语言也可以开发Android,但毕竟是很小众),也不要认为学习Java 两三周就可以不用管了,这会在以后的深入学习中暴露出问题,所 ...

  10. Wannafly交流赛1(施工中)

    A.有理数 签到题:直接用floor函数就行了,详细看代码 #define debug #include<stdio.h> #include<math.h> #include& ...