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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
extract-text-webpack-plugin用法详解
Feb 14 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 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三种方式实现链式操作详解
2017/01/21 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
jquery replace方法去空格
2017/05/08 jQuery
微信小程序开发之map地图实现教程
2017/06/08 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Keras实现DenseNet结构操作
2020/07/06 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
奖学金自我鉴定范文
2013/10/03 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
法制教育主题班会
2015/08/13 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
python基础之文件操作
2021/10/24 Python