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 相关文章推荐
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
Mar 01 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JavaScript变量基本使用方法实例分析
Nov 15 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
js实现打字小游戏
2019/12/17 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python中for循环详解
2014/01/17 Python
python单线程实现多个定时器示例
2014/03/30 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
大学生实习鉴定评语
2014/04/25 职场文书
设备管理实施方案
2014/05/31 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS