JavaScript数组增删改查核心方法详解

JavaScript数组操作概述

JavaScript提供了丰富的数组操作方法，本文将详细介绍如何高效地对数组执行增加、删除、修改和查找功能。

数组元素增加方法

一、增加元素

1. push() 方法

该方法可以接收任意数量的参数，并将它们依次添加到数组末尾，同时返回修改后数组的长度。例如：

var arr = [];
var len = arr.push(1);
console.log(arr); // [1]
console.log(len); // 1
len = arr.push(2,3);
console.log(arr); // [1,2,3]
console.log(len); // 3

2. unshift() 方法

此方法与 push() 类似，同样接收任意数量参数，但会将参数依次添加到数组前端，并返回新数组的长度。基于上述示例继续演示：

var len = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len = arr.unshift(-2,-1);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(len);  // 6

3. concat() 方法

concat() 与 push() 类似，都是向数组末尾添加元素，但区别在于它不会修改原数组，而是返回一个包含原数组元素及新添加元素的新数组。具体用法如下：

① 不传递参数时，返回当前数组的一个副本。

② 传递一个或多个数组时，会将这些数组中的每一项添加到结果数组中。

③ 传递非数组参数时，这些参数会直接添加到结果数组的末尾。

继续基于上述示例：

var arr1 = arr.concat(4,[5,6]);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(arr1);  // [-2, -1, 0, 1, 2, 3, 4, 5, 6]

从结果可以看出，原数组保持不变，新数组 arr1 在末尾添加了 4、5、6 三个元素。

4. splice() 方法

前三种方法仅支持在数组头部或尾部添加元素，局限性较大。而 splice() 方法则更加灵活强大，它不仅可以向数组任意位置添加元素，还具备删除和替换元素的功能（后续章节将详细讲解）。

splice() 可以向数组指定位置添加任意数量的元素，调用时需至少传入三个参数：起始位置、要删除的元素个数（此处为0）以及要添加的元素。

继续基于上述示例：

arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]

可以看出，splice() 与 push() 和 unshift() 一样，是直接修改原数组的。

数组元素删除方法

二、删除元素

1. pop() 方法

pop() 通常与 push() 配合使用，用于构建后进先出的栈结构。该方法从数组末尾删除最后一项，并返回被删除的该项。

基于上例继续：

var item = arr.pop();
console.log(item);  // 3
console.log(arr);  // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

2. shift() 方法

shift() 通常与 push() 配合使用，用于构建先进先出的队列结构。该方法删除数组的第一项，并返回被删除的该项。

继续基于上例：

var item = arr.shift();
console.log(item); // -2
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

3. slice() 方法

与 concat() 类似，slice() 也返回一个新数组而不影响原数组，但它用于裁剪数组，返回被裁剪下来的部分。具体用法如下：

slice() 可以接受一个或两个参数，分别指定返回项的起始和结束位置。若只传一个参数，则返回从该位置开始到数组末尾的所有项；若传两个参数，则返回起始和结束位置之间的项（不包含结束位置的项）。

继续基于上述示例：

var arr2 = arr.slice(2,6);
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2); // [0.2, 0.4, 0.6, 0.8]

4. splice() 方法

接下来继续讲解这个“万能”方法。

前文提到，添加元素时需传入三个以上参数，其中第二个参数指定删除元素的个数（当时传的是0）。若仅需删除元素，只需传入两个参数：第一个参数指定要删除的第一项的位置，第二个参数指定要删除元素的个数。

继续基于上例：

arr.splice(2,4);
console.log(arr); // [-1, 0, 1, 2]

从索引为 2 的位置开始删除 4 个元素，最终结果为 [-1, 0, 1, 2]。

数组元素修改方法

三、修改元素

修改数组最灵活的方式莫过于使用强大的 splice() 方法。通过前文对该方法的解析，我们可以大致了解其修改数组元素的基本原理。

其原理简单明了：在指定位置插入任意数量的元素，同时删除任意数量的元素。

继续基于上例：

arr.splice(2,1,0.5,1,1.5);
console.log(arr);  // [-1, 0, 0.5, 1, 1.5, 2]

数组元素查找方法

四、查找元素

indexOf() 和 lastIndexOf()

这两个方法均接收两个参数：要查找的项和可选的起始索引。其中，indexOf() 从数组开头（索引 0）向后查找，lastIndexOf() 则从数组末尾向前查找。

例如：

var index = arr.indexOf(0);
console.log(index);  // 1
index = arr.indexOf(3,0);
console.log(index);  // -1

当未找到该元素时，返回 -1，lastIndexOf() 方法的返回值逻辑同理。

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