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脚本实现Web页面信息交互
Dec 21 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JQuery教学之性能优化
May 14 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
面试常见的js算法题
Mar 23 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
初中体育教学反思
2014/01/14 职场文书
网络技术专业求职信
2014/05/02 职场文书
工作散漫检讨书
2014/09/16 职场文书
合作意向协议书
2015/01/29 职场文书
2015年暑期见闻
2015/07/14 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis