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 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
js友好的时间返回函数
Aug 24 Javascript
JS中常用的正则表达式
Sep 29 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
JavaScript async/await原理及实例解析
Dec 02 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
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
Javascript继承机制详解
2017/05/30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
浅谈python中真正关闭socket的方法
2018/12/18 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
python opencv实现证件照换底功能
2019/08/19 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
运动会广播稿300字
2014/01/10 职场文书
网络教育自我鉴定
2014/02/04 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
社团个人总结范文
2015/03/05 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python中for后接else的语法使用
2021/05/18 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python