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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python装饰器decorator介绍
2014/11/21 Python
python机器学习实战之树回归详解
2017/12/20 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python 格式化输出百分号的方法
2019/01/20 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
店长助理岗位职责
2013/12/13 职场文书
社区志愿者心得体会
2014/01/03 职场文书
责任担保书范文
2014/05/21 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
民事调解协议书
2016/03/21 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
浅析Python中的套接字编程
2021/06/22 Python