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 相关文章推荐
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
第一篇初识bootstrap
Jun 21 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue 注册组件的使用详解
May 05 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
isset和empty的区别
2007/01/15 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
Python单例模式实例分析
2015/01/14 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
利用python修改json文件的value方法
2018/12/31 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
初级Java程序员面试题
2016/03/03 面试题
销售顾问工作计划书
2014/09/15 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
单位委托书怎么写
2014/09/21 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2016年国培研修日志
2015/11/13 职场文书
创业计划书之酒吧
2019/12/02 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python