JavaScript利用数组原型,添加方法实现遍历多维数组每一个元素
原型就是提供给我们为了让我们扩展更多功能的。
今天学习了用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利用数组原型,添加方法实现遍历多维数组每一个元素的更多相关文章
- JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间
涉及知识点:(1)原型的引入(2)构造函数.原型对象和实例对象之间的关系(3)__proto__和prototype的理解 直接举例:在自定义构造函数创建对象时,因为创建的对象使用的不是同一个方法,所 ...
- js中自己实现each方法来遍历多维数组
- JavaScript 遍历多维数组
基于ECMAScript5提供遍历数组的forEach方法仅能遍历一维数组,没有提供循环遍历多维数组的方法,所以根据白鹤翔老师的讲解,实现如下遍历多维数组的each方法,以此遍历多维数组. <s ...
- 数组的三种方式总结 多维数组的遍历 Arrays类的常用方法总结
一.数组的三种声明方式总结 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] tes ...
- JS高级---构造函数通过原型添加方法,原型的作用: 共享数据, 节省内存空间
JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间 构造函数 //构造函数 function Person(sex, age) { this.sex = sex; thi ...
- js递归遍历多维数组并在修改数组的key后返回新的多维数组
我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...
- PHP基础语法: echo,var_dump, 常用函数:随机数:拆分字符串:explode()、rand()、日期时间:time()、字符串转化为时间戳:strtotime()可变参数的函数:PHP里数组长度表示方法:count($attr[指数组]);字符串长度:strlen($a)
PHP语言原理:先把代码显示在源代码中,再通过浏览器解析在网页上 a. 1.substr; //用于输出字符串中,需要的某一部分 <?PHP $a="learn php"; ...
- for里面是采用setInterval遍历二维数组,for循环到最后一个数的时候,才执行setInterval的问题解决
点击播放看效果 <!doctype html> <html lang="en"> <head> <meta charset="U ...
- C:指针遍历二维数组
C 指针遍历二维数组 http://blog.csdn.net/lcxandsfy/article/details/55000033 C++ 字符串指针与字符串数组 https://www.cnblo ...
随机推荐
- python 全栈开发,Day5
python之函数初识 一.什么是函数? 现在有这么个情况:python中的len方法不让用了,你怎么办? 来测试一下'hello word' 的长度: 用for循环实现 s1 = "hel ...
- Git分支(1/5) -- 基本命令
把所有的变化都放在master分支并不是最好的做法. 建议的做法是把变化放在分支里面. 至少应该准备一个feature分支之类的, 把变化都隔离开来, 然后等到所有的功能都稳定之后再合并到master ...
- Python基础-week04
本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...
- 利用github协作开发步骤
项目使用IDEA开发,IDEA上可以加载很多的插件(而且下载很快),安装github插件,安装git 首先一个成员需要创建好代码库,这个代码库存放项目,所有的开发提交代码都是向这个库提交,在githu ...
- Java集合详解及List源码分析
对于数组我们应该很熟悉,一个数组在内存中总是一块连续的存储空间,数组的创建使用new关键字,数组是引用类型的数据,一旦第一个元素的位置确定,那么后面的元素位置也就确定了,数组有一个最大的局限就是数组一 ...
- 笔记:JDBC 数据库
数据库 URL 在连接数据库时,我们必须使用各种与数据库类型相关的参数,例如主机名.端口号和数据库名称等,JDBC使用了一种与普通URL相类似的语法来描述数据库,JDBC URL 一般语法为: jdb ...
- Java语法基础(1)
Java语法基础(1) 1. Java是一门跨平台(也就是跨操作系统)语言,其跨平台的本质是借助java虚拟机 (也就是JVM(java virtual mechinal))进行跨平台使用. ...
- 如何图形化创建oracle数据库
需要注意的几点 1.如果用oracle客户端访问服务器的话必须把服务器的主机名写成(计算机的名称)Oracle创建数据库的方法 2.navigate如何远程oracle数据库 E:\app\lenov ...
- kvm之六:配置kvm虚拟机通过VNC访问
1.网络安装的snale2没有添加VNC访问方式,配置如下 [root@kvm ~ ::]#virsh edit snale2 插入如下配置: <graphics type=' autoport ...
- Spring MVC核心技术
目录 异常处理 类型转换器 数据验证 文件上传与下载 拦截器 异常处理 Spring MVC中, 系统的DAO, Service, Controller层出现异常, 均通过throw Exceptio ...