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 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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创建多级目录代码
2008/06/05 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python使用tkinter实现简单计算器
2018/01/30 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
道歉情书大全
2015/05/12 职场文书
合作意向书范本
2019/04/17 职场文书
Golang的继承模拟实例
2021/06/30 Golang