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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
javascript Excel操作知识点
Apr 24 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 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重定向的3种方式
2013/03/07 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
python 容器总结整理
2017/04/04 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python微信撤回监测代码
2019/04/29 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
美国滑板店:Tactics
2020/11/08 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
保洁主管岗位职责
2013/11/20 职场文书
公司授权委托书范本
2014/09/18 职场文书
接待员岗位职责
2015/02/13 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书