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

今天学习了用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. 如何提高windows的性能

    默认windows启用了很多的效果,我们可能平时没有注意到,比如什么淡入淡出效果之类的,其实在我看来,这些效果不仅难看,而且影响了windows的性能,下面我就来说说怎么通过关闭这些效果来提高wind ...

  2. yum安装puppet

    yum安装puppet author:headsen chen     2017-10-31  17:09:35 个人原创,转载请注明作者和出处,否则依法追究法律责任: 环境:centos 6.5 [ ...

  3. python 练完这些,你的函数编程就ok了

    文件处理相关 1,编码问题 (1)请问python2与python3中的默认编码是什么? python 2.x默认的字符编码是ASCII,默认的文件编码也是ASCII python 2.x默认的字符编 ...

  4. linux性能调试之vmstat

    linux性能监控调优工具vmstat: vmstat:用于监控.显示系统运行过程中的虚拟内存/CPU/磁盘状态. 简单示例(时间间隔2s,监控2次): 重要字段解释: r 表示运行队列(等待运行的进 ...

  5. 【Python】 日志管理logging

    logging *****本文参考了http://www.cnblogs.com/dkblog/archive/2011/08/26/2155018.html ■ 最最基本的用法 logging模块用 ...

  6. Java基础学习笔记十六 集合框架(二)

    List List接口的特点: 它是一个元素存取有序的集合.例如,存元素的顺序是11.22.33.那么集合中,元素的存储就是按照11.22.33的顺序完成的. 它是一个带有索引的集合,通过索引就可以精 ...

  7. 四则运算程序(java基于控制台)

    四则运算题目生成程序(基于控制台) 一.题目描述: 1. 使用 -n 参数控制生成题目的个数,例如 Myapp.exe -n 10 -o Exercise.txt 将生成10个题目. 2. 使用 -r ...

  8. C语言第六次博客作业--数据类型

    一.PTA实验作业 题目1:区位码输入法 1. 本题PTA提交列表 2. 设计思路 (1)定义整型变量code放区位码,areacode放区码,digitcode放位码,one放个位数,two放十位数 ...

  9. 【Alpha版本】冲刺阶段 - Day3 - 逆风

    今日进展 袁逸灏:右上角两个按键的添加与实现监听(5h) 刘伟康:继续借鉴其他 alpha 冲刺博客,由于我们组的App原型可以在 alpha 阶段完成,所以不需要墨刀工具展示原型(2h) 刘先润:更 ...

  10. 个人作业2:QQ音乐APP案例分析

    APP案例分析 QQ音乐 选择理由:毕竟作为QQ音乐九年的资深老用户以及音乐爱好者 第一部分 调研 1.第一次上手的体验    我算是很早期的QQ音乐的用户,用QQ音乐七八年,除了体验各方面还不错之外 ...