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的一个拖拽到指定区域内的效果
Sep 21 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
JS请求servlet功能示例
Jun 01 Javascript
Vue渲染函数详解
Sep 15 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
小程序自定义日历效果
Dec 29 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 基础教程之闭包的使用方法
2017/09/29 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python Celery定时任务的示例
2018/03/13 Python
如何通过python画loss曲线的方法
2019/06/26 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
英国著名书店:Foyles
2018/12/01 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
中国梦读书活动总结
2014/07/10 职场文书
暑期培训心得体会
2014/09/02 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2014年党委工作总结
2014/11/22 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python中%格式表达式实例用法
2021/06/18 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS