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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
javascript 常见功能汇总
Jun 11 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
使用Python生成XML的方法实例
2017/03/21 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Django admin美化插件suit使用示例
2017/12/12 Python
django站点管理详解
2017/12/12 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python程序 创建多线程过程详解
2019/09/23 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
Android笔试题总结
2014/11/29 面试题
合作经营协议书范本
2014/09/16 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
遗嘱范文
2015/08/07 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL