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实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 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面向对象类型约束用法分析
2019/06/12 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
Python中类型关系和继承关系实例详解
2015/05/25 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python树莓派红外反射传感器
2019/01/21 Python
linux环境下Django的安装配置详解
2019/07/22 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python线程threading模块用法详解
2020/02/26 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
美容院店长岗位职责
2014/04/08 职场文书
司机岗位职责说明书
2014/07/29 职场文书
死亡赔偿协议书
2015/01/28 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL