当前位置:首页 > 日记 > 正文

JavaScript数组push方法使用注意事项

JavaScript数组push方法使用注意事项

js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意:

引自 MDN

返回值

当调用该方法时,新的 length 属性值将被返回。

var sports = ["soccer", "baseball"];var total = sports.push("football", "swimming");console.log(sports); // ["soccer", "baseball", "football", "swimming"]console.log(total); // 4

数组push之后返回的是length,而不是新的数组,如果不清楚这点,在使用过程中回遇到很大的坑。

顺带记一下其他几个数组的方法返回值:

pop()

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

let a = [1, 2, 3];a.length; // 3a.pop(); // 3console.log(a); // [1, 2]a.length; // 2arr.pop()

返回值

从数组中删除的元素(当数组为空时返回undefined)。

shift()

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

let a = [1, 2, 3];let b = a.shift();console.log(a); // [2, 3]console.log(b); // 1返回值从数组中删除的元素; undefined 如果数组为空。arr.shift()

unshift()

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。let a = [1, 2, 3];a.unshift(4, 5);console.log(a);// [4, 5, 1, 2, 3]arr.unshift(element1, ..., elementN)参数列表element1, ..., elementN要添加到数组开头的元素。返回值当一个对象调用该方法时,返回其 length 属性值。

concat()

 concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

var arr1 = ['a', 'b', 'c'];var arr2 = ['d', 'e', 'f'];var arr3 = arr1.concat(arr2);// arr3 is a new array [ "a", "b", "c", "d", "e", "f" ]var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])参数valueN将数组和/或值连接成新数组。返回值新的 Array 实例。

splice()

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

slice()

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,原始数组不会被修改。

返回值:

一个含有提取元素的新数组

总结:

开头和结尾添加都是返回数组的长度;

开头和结尾的删除都是返回删除的元素;

splice()返回被删除的元素;

concat返回新的数组;

slice返回提取的数组;

以上所述是小编给大家介绍的JavaScript数组push方法使用注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!             

相关文章

word设置纸张大小的两种方法

word设置纸张大小的两种方法

方法,设置,纸张,大小,两种,  办公经常学要调节纸张大小,虽然常用,但偶尔还是会忘记如何调整纸张大小的方法,那么下面就由小编给大家分享下word设置纸张大小的技巧,希望能帮助到您。word设置纸张大小方法一步骤一:打开word软件,点击桌面快捷图标…

Visual Studio 2017正式版发布 Mac

Visual Studio 2017正式版发布 Mac

新功能,正式版,特性,有哪些,电脑软件, 期待已久的由微软推出的软件开发工具Visual Studio 2017正式版马上要推出了,而Visual Studio 2017 正式版发布时间和Mac版新特性有哪些呢?让我们见证一下Visual Studio 20周年纪念的倾情推荐吧。…

JavaScript基础之this详解

JavaScript基础之this详解

详解,基础,电脑软件,JavaScript,JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。如果对…

excel2010背景大小如何调整

excel2010背景大小如何调整

调整,教程,方法,显示,设置,  在excel中插图背景图片的时候,往往会因为图片太大或太小不合我们心意,要如何才能够调整过来呢。下面让小编为你带来excel2010设置背景大小的方法,希望对你有帮助!excel背景大小的设置方法方法一、直接缩小图像在e…

AI结合c4d设计三维立体文字和图案

AI结合c4d设计三维立体文字和图案

详细教程,文字,图案,三维立体,电脑软件,ai和c4d怎么将平面的文字快速转换成3维的立体效果呢?下面我们就来看看详细的教程,很简单,感兴趣的朋友可以进来参考一下。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:20…

基于javascript中的typeof和类型判

基于javascript中的typeof和类型判

类型,详解,电脑软件,javascript,typeof,typeofECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说t…

CorelDRAW2017怎么正确安装?

CorelDRAW2017怎么正确安装?

安装,正确,电脑软件,4月12日,CorelDRAW迎来了它的新版本--CorelDRAW Graphics Suite 2017。CorelDRAW 2017 的推出让最好的产品变得更好了,它是我们迄今最具创意的最新图形设计程序!作为一个强大的绘图软件,CorelDRAW 2017一经发布便吸引了众多…

ps怎么设计绚丽的彩色背景条效果图

ps怎么设计绚丽的彩色背景条效果图

效果图,绚丽,彩色,背景,电脑软件,ps中想要做一个彩色的斜条纹作为背景,该怎么设计呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建ps文件2、执行滤镜>渲染>云彩,效…

mac版微信账号登录方法

mac版微信账号登录方法

登录,方法,账号,电脑软件,mac,  Mac微信是腾讯的一款mac端的微信辅助软件,您可以通过登录mac微信来收取微信信息,不用频繁地查看手机信息,那么微信mac版怎么登录呢?下面就跟小编来了解一下吧!mac版微信账号登录方法  首先,您需要在电脑中下…

PS图层样式和图层叠加绘制Q版游戏

PS图层样式和图层叠加绘制Q版游戏

图层,叠加,绘制,样式,按钮,这篇教程教的朋友们使用PS绘制Q版游戏水晶按钮,教程主要介绍的知识点是使用PS图层样式和图层叠加来刻画质感。对于学习UI设计,或者是游戏设计的朋友来说还是挺实用的,推荐过来和的朋友们一起分享、一起学习了,我们先…

word2010设置页码的两种方法word20

word2010设置页码的两种方法word20

设置,方法,页码,两种,电脑软件,  我们编辑好一个word2010文档,如果需要插入页码,或者需要编辑目录,那么一定需要插入页码,那么下面就由小编给大家分享下word2010设置页码的技巧,希望能帮助到您。word2010设置页码方法一步骤一:打开或者新建一个…

js如何获取网页所有

js如何获取网页所有

网页,电脑软件,js,需求在网页中单击某张图片,图片能放大显示,且能按顺序切换图片,同时,一些小图标和不符合要求的图片不能放大。 由于网页是在app中打开,图片的放大与切换由移动端实现,因此,需要用js调用原生方法,并传递所有图片的url解决var img =…