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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
使用微信SDK自定义分享的方法
Jul 03 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
模仿OSO的论坛(一)
2006/10/09 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
怎么清空javascript数组
2013/05/11 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
异步传递消息系统的作用
2016/05/01 面试题
小学少先队活动方案
2014/02/18 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
工作能力自我评价2015
2015/03/05 职场文书
学生会自荐信
2019/05/16 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
教你部署vue项目到docker
2022/04/05 Vue.js