JavaScript 数组 splice() 方法

JavaScript splice() 语法

splice() 是 JavaScript 数组的一个方法，它用于修改数组（包括添加、删除或替换元素）。

语法：

arr.splice(start, n, item1, item2, ..., itemN)

说明：

splice() 方法主要接收 3 种参数。

• start（必选）：表示修改的开始下标（从 0 开始）。start 的值可以是负数，表示从结尾倒数的索引。
  • 如果 start 大于数组的长度，则实际开始下标会被设置为数组的长度（即从数组末尾开始添加）。
  • 如果 start 是负数，则从数组末尾开始计算下标。例如，-1 表示倒数第一个元素，-2 表示倒数第二个元素，以此类推。如果计算后的下标小于 0，则实际开始下标会被设置为 0。
• n（可选）：表示删除 n 个元素。如果 n 省略，则表示删除下标为 start 的元素以及它后面的所有元素。
  • 如果 n 为 0，则不删除任何元素。
  • 如果 n 是负数，则视为 0。
• item1、item2、...、itemN（可选）：表示往数组添加的新元素。

splice() 方法是有返回值的，它会返回一个包含被删除元素的数组。如果未删除任何元素，则返回一个空数组。

JavaScript splice() 摘要

JavaScript splice() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript splice() 方法是如何使用的。

示例 1：splice() 只有 1 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.splice(2);

console.log(arr);
console.log(result);

运行结果如下。

['红', '橙']
[ '黄', '绿', '青', '蓝', '紫' ]

分析：

splice(2) 表示删除下标为 2（第 3 个元素）以及后面所有的元素。此外可以看到，splice() 会修改原数组，并且返回被删除的数组部分。

示例 2：splice() 只有 2 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(2, 1);
console.log(arr);

运行结果如下。

 ['红', '橙', '绿', '青', '蓝', '紫']

分析：

splice(2, 1) 表示只删除下标为 2（第 3 个元素）这一个元素。如果想要删除第 3、4、5 个元素，可以这样写：splice(2, 3)。

示例 3：splice() 有 3 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(2, 1, "yellow");
console.log(arr);

运行结果如下。

['红', '橙', 'yellow', '绿', '青', '蓝', '紫']

分析：

splice(2, 1, "yellow") 表示删除第 3 个元素，然后紧接着加上 "yellow" 作为新元素插入。

示例 4：splice() 有 n 个参数（n≥3）

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(2, 2, "yellow", "green");
console.log(arr);

运行结果如下。

['红', '橙', 'yellow', 'green', '青', '蓝', '紫']

分析：

splice(2, 2, "yellow", "green") 表示删除第 3 和第 4 个元素，然后紧接着加上 "yellow" 和 "green" 这两个作为新元素插入。

示例 5：splice() 开始下标为负数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(-1, 1, "purple");
console.log(arr);

运行结果如下。

 ['红', '橙', '黄', '绿', '青', '蓝', 'purple']

分析：

splice(-1, 1, "purple") 表示删除最后一个元素，然后在其位置添加 "purple" 作为新元素。

示例 6：splice() 结合负数下标添加多个元素

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(-1, 2, "blue", "purple");
console.log(arr);

运行结果如下。

['红', '橙', '黄', '绿', '青', '蓝', 'blue', 'purple']

分析：

虽然这里 splice() 的 start 参数是负数，但是添加的新元素顺序是从左到右的。

splice() 与 slice() 的区别

splice() 与 slice() 这 2 个方法看着相似，其实它们有着本质上的区别：

• splice()：会修改原数组，它主要用于修改数组的一部分（通过添加、删除或替换元素）。splice() 会返回一个包含被删除元素的新数组（如果没有删除元素，则返回空数组）。
• slice()：不会修改原数组，而是截取数组的一部分，然后返回一个新数组。

简单来说，当需要 “修改” 原数组时（例如删除或添加元素），我们应该使用 splice()。当需要 “复制” 或 “提取” 数组的一部分而不影响原数组时，我们应该使用 slice()。

“破坏性” 方法 vs “非破坏性” 方法

在 JavaScript 中，数组的 “破坏性” 方法以及它们对应的 “非破坏性” 方法，总结如下表所示。