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各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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 clearstatcache()函数详解
2010/03/02 PHP
php实现天干地支计算器示例
2014/03/14 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
python搭建微信公众平台
2016/02/09 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
python绘制热力图heatmap
2020/03/23 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
心得体会怎么写
2013/12/30 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
二胎满月酒致辞
2015/07/29 职场文书
高二英语教学反思
2016/03/03 职场文书
golang json数组拼接的实例
2021/04/28 Golang