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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
PHP PDO操作总结
Nov 17 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Open and Print a Word Document
2007/06/15 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
python连接mysql调用存储过程示例
2014/03/05 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
一行python实现树形结构的方法
2019/08/09 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
护士自我鉴定
2013/10/23 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
餐饮加盟计划书
2014/01/10 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书