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 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Bootstrap插件全集
Jul 18 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
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
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
google地图的路线实现代码
2009/08/20 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
高一学生期末评语
2014/04/25 职场文书
感恩的演讲稿
2014/05/06 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
高中学生自我评价范文
2014/09/23 职场文书
事业单位考察材料范文
2014/12/25 职场文书
销售工作决心书
2015/02/04 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript