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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
PassWord输入框代码分享
Jun 07 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
关于Python的一些学习总结
2018/05/25 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
装配出错检讨书
2014/09/23 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
护士先进个人总结
2015/02/13 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Nginx四层负载均衡的配置指南
2021/06/11 Servers
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers