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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 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
珊瑚虫IP库浅析
2007/02/15 PHP
php实现mysql数据库备份类
2008/03/20 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django如何重置migration的几种情景
2021/02/24 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
环境科学专业个人求职信
2013/12/15 职场文书
网吧消防安全制度
2014/01/28 职场文书
2015年组织部工作总结
2015/04/03 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
python blinker 信号库
2022/05/04 Python