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 相关文章推荐
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
JavaScript实现筛选数组
2021/03/02 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python使用django获取用户IP地址的方法
2015/05/11 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
对python 命令的-u参数详解
2018/12/03 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
事业单位考核材料
2014/05/21 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS