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 相关文章推荐
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
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操作mysql数据库的基本类代码
2014/02/25 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
使用Python来开发微信功能
2018/06/13 Python
python3使用GUI统计代码量
2019/09/18 Python
python模块常用用法实例详解
2019/10/17 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
大学生村官座谈会发言材料
2014/05/25 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫