因为本系列文章属于思维类,所以不做基础方法的讲解。

任务:首先我定义了一个变量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 获取这个数组的最后位置

任务:现在我们获取到了数组的最后位置就可以给它添加内容了,那么怎么添加呢?给谁添加,怎么去添加。

分析:现在回想一下往一个数组里面添加内容有哪些方式?获取到的这个长度就是我们要添加的位置。

arr[arr.length] = value;

合成:

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(var i=0;i<?;i++)

分析:我们应该怎么写这个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的指向,不必硬背这篇文章。

如果你有好的建议可以和我联系,期待下次和你见面。

JS思维之路菜鸟也能有大能量(1)--模拟push的更多相关文章

  1. JS思维之路菜鸟也能有大能量(2)--模拟数组合并concat

    我们有两个这样的数组 var arr1 = [1,2,3]; var arr2 = [4,5,6]; 任务:合并成这样,请至少提供两种思路. var arr1 = [1,2,3,4,5,6]; 思路一 ...

  2. JS思维之路菜鸟也能有大能量-序幕

    准备写一类关于Js的开发思想的文章,这系列文章需要有一定的js基础,在这里不会去说太多的js基础知识,因为这系列文章不是写基础东西,而是一种编程思想,如果你还是js新手,那么建议你有一定基础后再看. ...

  3. [JS]Cookie精通之路

    [JS]Cookie精通之路 转http://blog.163.com/neu_pdh1983/blog/static/572407020077310528915/ 发布:Cary 媒体:www.Ju ...

  4. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  5. [js高手之路]从原型链开始图解继承到组合继承的产生

    基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...

  6. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  7. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  8. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  9. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

随机推荐

  1. Java null String

    In Java, the String will have different usage. Example: public class Test { public static void main( ...

  2. python中os和sys模块的详解

    平时在工作中经常会用到os模块和sys模块的一些特性,下面是这些特性的一些相关解释,希望对大家有所帮助 os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os. ...

  3. IBM的IT战略规划方法论

    IBM的IT战略规划方法论 http://wenku.baidu.com/view/42489e21aaea998fcc220e92.html?re=view http://wenku.baidu.c ...

  4. iphone6 plus 为什么打印出的宽度是375

    首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...

  5. Python:IOError: image file is truncated 的解决办法

    代码如下: #coding:utf-8 from PIL import Image import pytesseract def test(): im = Image.open(r"pic. ...

  6. 用于主题检测的临时日志(b2d5c7b3-e3f6-4b0f-bfa4-a08e923eda9b - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    这是一个未删除的临时日志.请手动删除它.(1c773d57-4f35-40cf-ad62-bd757d5fcfae - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

  7. InteliJ IDEA15 安装jrebel破解文件

    使用InteliJ IDEA这个工具感觉比eclipse好用,例如它在没有源码的情况下自动反编译源码等,但是在使用的时,有个很不爽的地方就是不能实时编译,导致java代码更改了一点代码就需要重启项目, ...

  8. crond: unrecognized service 无crond解决办法

    运行计划任务时:service crond restart提示:crond: unrecognized service安装计划任务:yum -y install vixie-cron 另外附计划任务的 ...

  9. 查看mysql版本的四种方法

    1:在终端下:mysql -V. 以下是代码片段: [shengting@login ~]$ mysql -V mysql Ver 14.7 Distrib 4.1.10a, for redhat-l ...

  10. LDO/DC-DC区别总结(转)

    电源是一个电子系统中不可缺少的非常重要的一部分.但是外接的电源通常不能够完全提供系统中需要的所有的电源种类.因此带来了电源电压的变换问题.常用的电源电压的变换芯片包括LDO和DC-DC两种.下面对这两 ...