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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
javascript基础知识讲解
Jan 11 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
浅谈JavaScript 声明提升
Sep 14 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
Yii全局函数用法示例
2017/01/22 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
jQuery自动或手动图片切换效果
2017/10/11 jQuery
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python中zfill()方法的使用教程
2015/05/20 Python
python实现统计代码行数的方法
2015/05/22 Python
Python实现计算最小编辑距离
2016/03/17 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python安装pil库方法及代码
2019/06/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
大学生实习证明范本
2014/01/15 职场文书
聚美优品广告词改编
2014/03/14 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby