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 刷新全集常用代码
Nov 22 Javascript
jquery cookie的用法总结
Nov 18 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript错误处理
Feb 03 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
smarty简单应用实例
2015/11/03 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python缩进和冒号详解
2016/06/01 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
解决python对齐错误的方法
2020/07/16 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
讲解员培训方案
2014/05/04 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
西柏坡观后感
2015/06/08 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
python非标准时间的转换
2021/07/25 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle