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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
vue.js循环radio的实例
Nov 07 Javascript
js实现课堂随机点名系统
Nov 21 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP微信API接口类
2016/08/22 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python实现的防DDoS脚本
2011/02/08 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python实现简易通讯录修改版
2018/03/13 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python实现图片添加文字
2019/11/26 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
美容院店长岗位职责
2014/04/08 职场文书
社会实践评语
2014/04/28 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis