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实现的UBB编码函数
Mar 09 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
react 路由Link配置详解
Nov 11 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查询域名状态whois的类
2006/11/25 PHP
SSI指令
2006/11/25 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python 实现有道翻译功能
2021/02/26 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
高中体育教学反思
2014/01/29 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
中学生英语演讲稿
2014/04/26 职场文书
和睦家庭事迹
2014/05/14 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
护士个人总结范文
2015/02/13 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python