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 批量上传图片实现代码
Jan 28 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
vue实现登录拦截
Jun 29 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
如何实现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 strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python3多线程操作简单示例
2018/05/22 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
2014年党务公开实施方案
2014/02/27 职场文书
党员创先争优活动总结
2014/05/04 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS