JavaScript push() 方法详解

时间: 2018-10-25阅读: 21081标签: 函数

push定义和用法

push() 方法主要用于向数组的末尾添加一个或多个元素,其返回值为添加后新的长度,即push后的数组长度,该值为number类型。

注意:

1.一定是在数组的末尾添加
2.该方法会改变原数组的长度
3.如果需要在数组起始位置添加元素请使用 unshift() 方法


push函数语法

str.push(newele1,newele2,....,neweleX)

参数值说明:

参数描述
newele1必需。要添加到数组的第一个元素。
newele2可选。要添加到数组的第二个元素。
neweleX可选。可添加多个元素。


说明

push() 方法是把它的参数按顺序进行添加到原数组的尾部,它直接修改了原数组的长度,并不会创建一个新的数组;利用push实现数组进栈功能,出栈可以使用pop方法。


实例

1.一个数组中添加新元素 :

var arr=['红','橙','黄'];
var result=arr.push('绿','蓝');
console.log(arr);//输出arr数组内容:["红", "橙", "黄", "绿", "蓝"]
console.log(result);//输出push返回的结果:5
console.log(typeof result);//结果类型:number


2.小技巧,把一个数组的值赋值到另一个数组上:

var arr1=['红','橙','黄'];
var arr2=[];
arr2.push(...arr1);//这样arr1中的值就赋值给了arr2上了
console.log(arr2);//输出:["红", "橙", "黄"]

备注:这里使用了es6的扩展运算符(...),它主要是将一个数组转为用逗号分隔的参数序列。console.log(...[ '红','橙','黄'  ])等价于:console.log('红','橙','黄'  )


3.高级知识,在对象中使用push

a:在对象中需要添加push的属性,其值为数组原型链的push方法,如下:

var obj = {
   name:'fly63',   
   push:Array.prototype.push
};
obj.push('测试');
console.log(obj[0]);//输出:测试
console.log(obj);//输出:{0: "测试", name: "fly63", length: 1, push: ƒ}
console.log(obj.length);//输出:1,对象默认是没有length属性的,这里使用了push方法,则会创建一个length属性

备注:这里push进去的值默认为第一个,这是由于push是根据 length 属性来决定从哪里开始插入给定的值,上述例子中并未声明length属性,则会创建length属性。验证一下:

var obj = {
   name:'fly63',  
   length:2,//'2'也可以,只有length能被转换为数值即可
   push:Array.prototype.push
};
obj.push('测试');
console.log(obj[2]);//输出:测试
console.log(obj);//输出:{2: "测试", name: "fly63", length: 3, push: ƒ}

由此可见:push会根据对象length属性的值去确定插入的位置,当length不存在,或者不能被转为一个数值的时候,则插入的元素索引默认为 0


b.利用call() 或 apply() ,如下:

var obj = {
   name:'fly63', 
};
Array.prototype.push.call(obj,'测试');
//或者Array.prototype.push.apply(obj,['测试']);
console.log(obj[0]);//测试

call和apply的不懂的请点这个链接。[地址:http://www.fly63.com/article/detial/450]


完结~~~~~~~~

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1187

关闭

javascript中的匿名方法(函数)是什么?

方法(method)是通过对象调用的javascript函数。也就是说,方法也是函数,只是比较特殊的函数。JavaScript中的匿名方法即匿名函数是没有函数名称的函数。

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

JS常用函数原理的实现

本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。实现一个call函数;实现一个apply函数

JS高阶编程技巧--惰性函数

在vue、react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListener(),因为兼容性,还有:

工作中常用的JavaScript函数片段

返回已 size 为长度的数组分割的原数组;检查数组中某元素出现的次数;扁平化数组默认 depth 全部展开;对比两个数组并且返回其中不同的元素

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

JS的Math()_四舍五入、向下取整等

Math 对象并不像 Date 和 String 那样是对象的类,JS的Math():四舍五入round、向下取整floor、向上取整ceil、随机数random、绝对值abs、最小值min、最大值max

用 await/async 正确链接Js中的多个函数

在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function

js中函数的原型

js中每一个构造函数都有一个prototype的属性,prototype指向一个对象,而这个对象的属性和方法都会被构造函数的实例所继承,因此,需要一些共享的属性和方法可以写在构造函数的原型中

Vue 中的 computed 和 methods 的使用

computed:在computed中的函数,是在dom加载后马上执行的;methods:在methods中的函数,必须要有一定的触发条件,才会执行 ,Vue.js 将绑定表达式限制为一个表达式,如果想要实现绑定多于一个表达式的逻辑

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!