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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
js实现简易聊天对话框
Aug 17 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 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 如何获取数组第一个值
2013/08/06 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python 实现链表实例代码
2017/04/07 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
浅析python内置模块collections
2019/11/15 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Django封装交互接口代码
2020/07/12 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
Internet体系结构
2014/12/21 面试题
财政专业求职信范文
2014/02/19 职场文书
信用卡工资证明范本
2014/10/17 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
晶体管来复再生式二管收音机
2021/04/22 无线电