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

 更新时间:2017年10月30日 11:57:40   投稿:mrr  
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; // 3
a.pop(); // 3
console.log(a); // [1, 2]
a.length; // 2
arr.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方法使用注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!             

相关文章

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    这篇文章主要介绍了js仿微博实现统计字符和本地存储功能的相关资料,需要的朋友可以参考下
    2015-12-12
  • JavaScript实现简单贪吃蛇效果

    JavaScript实现简单贪吃蛇效果

    这篇文章主要为大家详细介绍了JavaScript实现简单贪吃蛇效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 再谈javascript 动态添加样式规则 W3C校检

    再谈javascript 动态添加样式规则 W3C校检

    Ruby's Louvre blog都是一些精品内容,下面这个是介绍javascript 动态添加样式规则,而且最后的函数,可以让你的css通过w3c的验证。
    2009-12-12
  • JavaScript实现手风琴效果

    JavaScript实现手风琴效果

    这篇文章主要为大家详细介绍了JavaScript实现手风琴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 深入理解js promise chain

    深入理解js promise chain

    下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js查错流程归纳

    js查错流程归纳

    归纳是为了更好的理解。平时同事有问题找我帮忙解决问题,往往都是很小的问题,这种情况他们并不是缺乏解决问题的知识,而是需要找到问题的办法
    2012-05-05
  • 用js一次改变多个input的readonly属性值的方法

    用js一次改变多个input的readonly属性值的方法

    这篇文章主要介绍了用js一次改变多个input的readonly属性值的方法,需要的朋友可以参考下
    2014-06-06
  • 微信小程序实现电子签名并导出图片

    微信小程序实现电子签名并导出图片

    这篇文章主要为大家详细介绍了微信小程序实现电子签名,并导出图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 微信小程序实现抖音播放效果的实例代码

    微信小程序实现抖音播放效果的实例代码

    这篇文章主要介绍了微信小程序实现抖音播放效果的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Bootstrap基本组件学习笔记之按钮组(8)

    Bootstrap基本组件学习笔记之按钮组(8)

    这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之按钮组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论