JS数组的常用10种方法详解


Posted in Javascript onMay 08, 2020

数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法:

在数组末尾插入元素

arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度。

例如:

let arr=[1,2,3,4,5]
var longth=arr.push(6,7);
console.log(arr, longth);

数组的arr的值变为arr[1,2,3,4,5,6,7];

length接收返回的是修改后数组的长度7;

删除数组末尾的元素

arr.pop()删除索引值最大的元素,并返回被删除的元素。

let arr=[1,2,3,4,5]
var delElement=arr.pop();
console.log(arr, delElement);

arr的值为[1,2,3,4] ,delElement的值为5

arr.pop()的与arr.length--的效果一样,但arr.length--没有返回值;

在数组的头部插入元素

unshift(value);在数组的头部添加一个或多个元素,并返回数组的新长度

let arr=[1,2,3,4,5]
var length= unshift(0);
console.log(arr,length);//arr的值为[0,1,2,3,4,5];length的值为更改后数组的长度6;

删除数组的头部元素

shift();删除索引为0的元素,并返回删除的元素

let arr=[1,2,3,4,5]
var delElement= unshift();
console.log(arr, delElement);

arr的值为[2,3,4,5];delElement的值为被删除的元素1;

数组和数组(或元素)的合并

concat()合并数组或元素,返回新的数组,原数组不会改变

let arr=[1,2,3,4,5]
let newArr=arr.concat([6,7,8],9,10);
console.log(newArr,arr);

newArr的值为[1,2,3,4,5,6,7,8,9,10];

arr的值还是原来的[1,2,3,4,5];

concat()还可以复制一个新数组;

let copyArr=arr.concat();//copyArr的值和arr的相同

在数组中添加删除或替换元素

splice();在任意位置添加或删除元素,返回删除或被替换的值,如果没有被删除或替换则返回空数组;

splice()方法会修改原数组的值;

只有一个值时,从当前位置删除到数组末尾

let arr=[1,2,3,4,5];
let num1=arr.splice(1)
console.log(num1;arr)//num=[2,3,4,5];arr=[1];

有两个值时,第一个值为删除的位置,第二个值为删除的个数;

let arr=[1,2,3,4,5];
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1;arr);// num1=[3,4,5],arr=[1,2]

有三个或者多个值时,第一个值为插入元素的位置,第二个值为替换的个数,后面的值都为插入的新元素;

let arr=[1,2,3,4,5];
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素,并且插入6,7,8

//如果第二个值为0,则不替换,直接插入6,7,8;
console.log(num2;arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

截取复制数组指定位置的内容

slice(开始位置,结束位置);第二个参数不写默认到尾部,只能从前往后截取;返回的值为截取到的内容形成的新数组;

let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组;
let arr=[1,2,3,4,5];
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr);//newArr=[2,3];arr=[1,2,3,4,5];

slice()方法不会更改到原数组的值

指定字符连接字符串

join();数组的每个元素以指定的字符连接形成新字符串返回;

let arr=[1,2,3,4,5];

let newArr=arr.join()//默认用逗号连接
console.log(newArr);//newArr=1,2,3,4,5;

//如果连接符为空字符串,则会无缝连接
console.log(arr.join(“”));//输出为12345;

将数组进行排序

sort()将数组进行排序(升序),返回新数组,原数组也会改变;

let arr=[2,3,5,1,4];
let newArr=arr.sort();
console.log(newArr,arr);//newArr=[1,2,3,4,5]; arr r=[1,2,3,4,5]

将数组进行倒序

reverse();可以将数组进行倒序,并返回新数组,原数组也会随之改变;

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr);//newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

综上为数组的常用方法!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
重置Redux的状态数据的方法实现
Nov 18 Javascript
js中实现继承的五种方法
Jan 25 Javascript
如何实现js拖拽效果及原理解析
May 08 #Javascript
JS图片预加载三种实现方法解析
May 08 #Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
You might like
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
初识Node.js
2015/03/20 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
视图的作用
2014/12/19 面试题
高级Java程序员面试题
2016/06/23 面试题
就业意向书范文
2014/04/01 职场文书
安全例会汇报材料
2014/08/23 职场文书
债务授权委托书范本
2014/10/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
校车司机安全责任书
2015/05/11 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python