JavaScript模拟push

 更新时间:2016年03月06日 14:29:29   投稿:mrr  
这篇文章主要介绍了JavaScript模拟数组合并concat的相关资料,需要的朋友可以参考下

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

相关文章

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下
    2014-05-05
  • 使用js判断控件是否获得焦点

    使用js判断控件是否获得焦点

    本篇文章主要是对使用js判断控件是否获得焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 深入分析javascript中console命令

    深入分析javascript中console命令

    console对象是JavaScript的原生对象,它有点像Unix系统的标准输出stdout和标准错误stderr,可以输出各种信息用来调试程序,而且还提供了很多额外的方法,供开发者调用。它的常见用途有两个。显示网页代码运行时的错误信息。提供了一个命令行接口,用来与网页代码互动。
    2016-08-08
  • JS轮播图实现简单代码

    JS轮播图实现简单代码

    这篇文章主要为大家详细介绍了JS轮播图实现简单代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript 操作table的特性

    javascript 操作table的特性

    javascript操作table的特性,大家可以看下,发挥下,实现更多的功能。
    2009-09-09
  • JavaScript仿小米实现球体分解动画

    JavaScript仿小米实现球体分解动画

    用过小米手机的应该见过它的垃圾清理ui界面吧,本文将利用JavaScript模拟这一界面实现球体分解动画,感兴趣的小伙伴可以学习一下
    2022-06-06
  • 从零开始做一个pagination分页组件

    从零开始做一个pagination分页组件

    从零开始做一个pagination分页组件,这篇文章主要介绍了pagination分页组件的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • js控件Kindeditor实现图片自动上传功能

    js控件Kindeditor实现图片自动上传功能

    这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js获取本机操作系统类型的两种方法

    js获取本机操作系统类型的两种方法

    这篇文章主要介绍了js获取本机操作系统类型的方法,需要的朋友可以参考下
    2015-12-12
  • javascript将json格式数组下载为excel表格的方法

    javascript将json格式数组下载为excel表格的方法

    下面小编就为大家分享一篇javascript将json格式数组下载为excel表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12

最新评论