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 相关文章推荐
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
javascript中this指向详解
2016/04/23 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
Python 中的with关键字使用详解
2016/09/11 Python
vscode 远程调试python的方法
2017/12/01 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python函数超时自动退出的实操方法
2020/12/28 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
Ajax的优点和缺点
2014/11/21 面试题
见习期自我鉴定
2013/11/07 职场文书
司机辞职报告范文
2014/01/20 职场文书
主题教育活动总结
2014/05/05 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
家长通知书家长意见
2014/12/30 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android