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 css styleFloat和cssFloat
Mar 15 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
vue之debounce属性被移除及处理详解
Nov 13 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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中文件上传的安全问题
2006/10/09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP在线书签系统分享
2016/01/04 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python不同系统中打开方法
2020/06/23 Python
python excel和yaml文件的读取封装
2021/01/12 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
运动会口号8字
2014/06/07 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
相亲活动方案
2014/08/26 职场文书
软环境建设心得体会
2014/09/09 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2014年仓库工作总结
2014/11/20 职场文书
公务员年终个人总结
2015/02/12 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers