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 this关键字使用分析
Oct 21 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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创建基本身份认证站点的方法详解
2013/06/08 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
基于node实现websocket协议
2016/04/25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
JS Math对象与Math方法实例小结
2019/07/05 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
学校介绍信范文
2014/01/14 职场文书
家长对孩子评语
2014/01/30 职场文书
学术会议主持词
2014/03/17 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
祝酒词范文
2015/08/12 职场文书
运动会广播稿300字
2015/08/19 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android