关闭

JavaScript push() 方法详解

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

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

什么是函数的副作用——理解js编程中函数的副作用

函数副作用是指当调用函数时,除了返回函数值之外,还对主调用函数产生附加的影响。副作用的函数不仅仅只是返回了一个值,而且还做了其他的事情

什么场景不适合箭头函数

这些年来,ES6 将 JS 的可用性提升到一个新的水平时: 箭头函数、类等等,这些都很棒。箭头函数是最有价值的新功能之一,有很多好文章描述了它的上下文透明性和简短的语法。

工作中常用的JavaScript函数片段

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

浅析js中的纯函数、高阶函数、记忆函数、偏函数

上周分享文档中遇到几个关键名称,纯函数、高阶函数、记忆函数、偏函数....,这里做一下解析与举例,纯函数是函数式编程中非常重要的一个概念,简单来说,就是一个函数的返回结果只依赖于它的参数

浅谈async函数await用法

async和await相信大家应该不陌生,让异步处理变得更友好。其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段。用法很简单,看代码吧。

JavaScript中怎么调用函数?

JavaScript怎么调用函数?其实在JavaScript中函数有4种调用方式。下面本篇文章就来给大家介绍一下JavaScript函数的4种调用方式,希望对大家有所帮助。

Js map、reduce、filter 等高阶函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter

Vue源码中用到的工具函数

以下摘取的函数,在 shared 目录下公用的工具方法。提取了一些常用通用的函数进行剖析,主要包含以下内容创建一个被冻结的空对象:判断是否是 undefined 或 null,判断是否不是 undefined 和 null

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

js函数常见的写法以及调用方法

本文详细的介绍了5种js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考

点击更多...

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