JS思维之路菜鸟也能有大能量(1)--模拟push

时间：2023-12-25 13:30:37

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

任务：首先我定义了一个变量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的指向，不必硬背这篇文章。

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

相关文章