JavaScript模拟push


Posted in Javascript onMarch 06, 2016

任务:首先我定义了一个变量var arr = [0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分钟思考,在思考之前请不要往下看。

分析:我们是想往这个数组的最后面添加东西对吧,关键点就在于我们如何才能找到元素最后的位置。先不去考虑最后一个位置,我们先来想想我们平时是怎么样访问一个数组的内容的,是不是这样arr[n],对不对,假如我们访问一个大于这个数组的索引,那么就是undefined,简单来说就是没有这个索引的话就是undefined,如果我们将这个数组的索引一直加1那么如果出现undefined是不是就是我们要找的位置,虽然这种方式可以,但是我有一个更好的方法就是利用length属性,length属性可以获取到这个数组的长度,那么这个长度就是这个数组的索引+1,刚好我们就是要往这个索引上添加内容。

代码:

var arr = [0,1,2,3,4,5];
arr.length 获取这个数组的最后位置

任务:现在我们获取到了数组的最后位置就可以给它添加内容了,那么怎么添加呢?给谁添加,怎么去添加。

分析:现在回想一下往一个数组里面添加内容有哪些方式?获取到的这个长度就是我们要添加的位置。

合成:

var arr = [0,1,2,3,4,5];
function Push(value){
arr[arr.length] = value;
}
Push(6);
console.log(arr); //[0, 1, 2, 3, 4, 5, 6]

任务:虽然现在可以往里面添加内容了,但是每次只能添加一个,怎么办呢?

分析:突然好想念我的老朋友for,对这位老朋友可以帮我们完成一些重复的事情,那我们快请他来帮帮忙吧。

代码:

分析:我们应该怎么写这个for?i到底小于多少呢?是不是就是我们添加几位就是几啊?那么我们到底要添加多少位呢?好像我们确实不知道,但是却有一位老朋友知道,他就是arguments,它可以获取到我们传入的参数,并且它是一个伪数组,意味着它也可以像数组一样使用length属性获取我们传入的实参长度。

代码:

for(var i=0;i<arguments.length;i++){}

分析:那么现在问题来了,我们把什么内容添加到哪里去,再回到我们任务,我们是不是想在某个数组的最后一个位置添加我们传进来的内容,对我们穿进来的,那么怎么获取我们传进来的内容呢,我们好像说过arguments可以获取它的内容。

代码:

var arr = [0,1,2,3,4,5];
function Push{
for(var i=0;i<arguments.length;i++){
arr[arr.length] = arguments[i];
}
}
Push(6,7,8);

完成。

课外扩展:有基础的朋友
ok,虽然这样已经完成了任务,但是现在的问题是,这段代码只能为arr这个数组服务,如果我们想为所以的数组提供这个功能就需要给Array的原型添加这个方法。

var arr = [0,1,2,3,4,5];

Array.prototype.Push = function{
for(var i=0;i<arguments.length;i++){
this[this.length] = arguments[i];
}
}
arr.Push(1,2,3)

把里面的arr修改成this,this表示谁调用就是谁,如果你想了解更多关于this的内容,可以看彻底理解js中this的指向,不必硬背这篇文章。

Javascript 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
jquery实现上传图片功能
Jun 29 jQuery
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 #Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 #Javascript
JS面向对象编程详解
Mar 06 #Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 #Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 #Javascript
You might like
php封装json通信接口详解及实例
2017/03/07 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
微信小程序排坑指南详解
2018/05/23 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
恒华伟业笔试面试题
2015/02/26 面试题
留学推荐信中文范文三篇
2014/01/25 职场文书
气象学专业个人求职信
2014/03/15 职场文书
党支部承诺书范文
2014/03/28 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
办公用品质量保证书
2015/05/11 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
frg-100简单操作(设置)说明
2022/04/05 无线电