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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
如何从头实现一个node.js的koa框架
Jun 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
php cookies中删除的一般赋值方法
2011/05/07 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
js计数器代码
2006/11/04 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
js实现小时钟效果
2020/03/25 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
详解python基础之while循环及if判断
2017/08/24 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Django实现文件上传下载
2019/10/06 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
Java基础知识面试要点
2016/07/29 面试题
生态学毕业生自荐信
2013/10/27 职场文书
销售团队口号大全
2014/06/06 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
推广普通话主题班会
2015/08/17 职场文书