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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
浅谈js中的this问题
Aug 31 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
create-react-app开发常用配置教程
Jun 25 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生成不重复标识符的方法
2014/11/21 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python的unittest测试类代码实例
2017/12/07 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
护士毕业生自荐信
2014/02/07 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
赡养老人协议书
2014/04/21 职场文书
给校长的建议书600字
2014/05/15 职场文书
质量月活动总结
2014/08/26 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server