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版本的代码
Sep 03 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
Vue左滑组件slider使用详解
Aug 21 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中养成7个面向对象的好习惯
2010/01/28 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
社区母亲节活动记录
2014/03/06 职场文书
节约电力资源的建议书
2014/03/12 职场文书
协议书格式
2014/04/23 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
数学教师求职信范文
2015/03/20 职场文书