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 prototype属性深入介绍
Nov 27 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
原生js实现选项卡功能
Mar 08 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
react中的DOM操作实现
Jun 30 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
数据库相关问题
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
php 日期时间处理函数小结
2009/12/18 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
js hover 定时器(实例代码)
2013/11/12 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python 实现字符串下标的输出功能
2020/02/13 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python同时迭代多个序列的方法
2020/07/28 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
防灾减灾宣传标语
2014/10/07 职场文书
离婚财产分割协议书
2015/08/11 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技