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 面向对象编程(1) 基础
May 18 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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超级全局变量
2010/01/26 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Django中的AutoField字段使用
2020/05/18 Python
详解anaconda安装步骤
2020/11/23 Python
十佳文明家庭事迹
2014/05/25 职场文书
校运会口号
2014/06/18 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
中标通知书格式
2015/04/17 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS