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


Posted in Javascript onOctober 30, 2017

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方法使用注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!             

Javascript 相关文章推荐
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
基于node.js之调试器详解
Aug 22 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
JavaScript Date对象应用实例分享
Oct 30 #Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
ES6 javascript中Class类继承用法实例详解
Oct 30 #Javascript
轻松理解vue的双向数据绑定问题
Oct 30 #Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
You might like
php读取msn上的用户信息类
2008/12/05 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
学习ExtJS Column布局
2009/10/08 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vue实现微信分享功能
2018/11/28 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python 调用钉钉机器人的方法
2019/02/20 Python
python开发入门——列表生成式
2020/09/03 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
JAVA程序员面试题
2012/10/03 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
公司端午节活动方案
2014/02/04 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
房屋维修申请报告
2015/05/18 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis