JavaScript 数组常用操作方法详解

作者:半夏时间:2026-10-23 18:07:35浏览:431

本文详细解析JavaScript中数组的10种核心操作方法,涵盖push、pop、unshift、shift等基础增删,以及splice、slice、concat、join、sort、reverse等高级处理技巧。通过具体代码示例,讲解各方法的参数用法、返回值及原数组影响,帮助开发者高效掌握数组处理技能。

JavaScript数组常用操作方法详解

数组是JavaScript中最常用的数据结构之一,掌握数组的增、删、改操作对于前端开发至关重要。本文将系统介绍数组的常用操作方法。

在数组末尾插入元素

在数组末尾插入元素

使用 arr.push(value) 方法,可以在数组末尾添加一个或多个元素,该方法会返回修改后数组的新长度。

示例如下:

let arr=[1,2,3,4,5] var longth=arr.push(6,7); console.log(arr, longth);

执行后,arr 的值变为 [1,2,3,4,5,6,7]。

变量 longth 接收到的返回值是修改后数组的长度,即 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-- 不会返回被删除的元素值。

在数组头部插入元素

在数组头部插入元素

使用 arr.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;

删除数组的头部元素

删除数组的头部元素

arr.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中数组的常用操作方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章