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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
JS实现的字符串数组去重功能小结
Jun 17 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
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP 错误处理机制
2015/07/06 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python类继承用法实例分析
2015/05/27 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
联谊活动总结范文
2015/05/09 职场文书
网吧管理制度范本
2015/08/05 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers