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 new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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的多进程编程方法
2015/08/18 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
python获取糗百图片代码实例
2013/12/18 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python自动抢红包教程详解
2019/06/11 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python 制作简单的音乐播放器
2020/11/25 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
华为python面试题
2016/05/03 面试题
个人查摆问题自查报告
2014/10/16 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
护士旷工检讨书
2015/08/15 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL