【JavaScript】splice() 和 slice() 方法详解

在 JavaScript 中，splice() 和 slice() 是两个常见的数组操作方法。它们的名字相似，但用途却完全不同。本文将详细介绍 splice() 和 slice() 方法的作用、用法、返回值以及它们在实际开发中的应用场景。

一、splice() 方法详解

1. 方法介绍

splice() 方法用于添加、删除或替换数组中的元素，并且会直接修改原数组。其基本语法如下：

array.splice(start, deleteCount, item1, item2, ...)

• start（必填）：指定要修改的起始索引。
• deleteCount（可选）：指定要删除的元素个数。
• item1, item2, ...（可选）：要插入到数组中的新元素。

2. 基本用法

（1）删除数组中的元素

let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(2, 2);
console.log(arr);      // [1, 2, 5]
console.log(removed);  // [3, 4]

splice(2, 2) 表示从索引 2 开始删除 2 个元素，返回被删除的 [3, 4]，同时修改原数组为 [1, 2, 5]。

（2）插入新元素

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 3, 4, 5]

splice(2, 0, 'a', 'b') 表示从索引 2 开始，不删除元素，而是插入 'a' 和 'b'。

（3）替换数组中的元素

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 2, 'x', 'y');
console.log(arr); // [1, 2, 'x', 'y', 5]

splice(2, 2, 'x', 'y') 表示从索引 2 开始删除 2 个元素，并插入 'x' 和 'y' 进行替换。

3. splice() 的特点

• 会修改原数组。
• 返回被删除的元素（如果没有删除元素，则返回空数组）。
• 可以同时进行删除、插入和替换操作。

二、slice() 方法详解

1. 方法介绍

slice() 方法用于从原数组中提取部分元素，但不会修改原数组。其基本语法如下：

array.slice(start, end)

• start（必填）：提取的起始索引。
• end（可选）：提取的结束索引（不包含 end 位置的元素）。

2. 基本用法

（1）截取数组的一部分

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 4);
console.log(sliced); // [2, 3, 4]
console.log(arr);    // [1, 2, 3, 4, 5]（原数组不变）

slice(1, 4) 提取索引 1 到 3（不包含 4），返回 [2, 3, 4]。

（2）从某个索引开始截取到数组末尾

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(2);
console.log(sliced); // [3, 4, 5]

slice(2) 省略了 end，表示从索引 2 开始一直提取到数组末尾。

（3）使用负数索引

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(-3, -1);
console.log(sliced); // [3, 4]

slice(-3, -1) 表示从倒数第 3 个元素开始，到倒数第 1 个元素之前（不包含倒数第 1 个元素）。

3. slice() 的特点

• 不会修改原数组。
• 返回一个新数组。
• 适用于获取数组的部分数据。

三、splice() vs slice() 的区别

方法	作用	是否修改原数组	返回值
splice()	删除/添加/替换数组元素	✅ 是	被删除的元素数组
slice()	提取数组的一部分	❌ 否	提取的元素数组

四、应用场景

1. splice() 适用场景

• 删除数组中的元素：当需要在数组中移除一个或多个元素时，可以使用 splice()。
• 插入新元素：在数组中的某个位置插入新元素。
• 替换数组中的元素：用新元素替换旧元素。

2. slice() 适用场景

• 获取数组的一部分数据：从数组中提取部分数据，而不会影响原数组。

• 复制数组：如果不传 start 和 end，slice() 可以用于创建数组的浅拷贝：

  let arr = [1, 2, 3];
  let copy = arr.slice();
  console.log(copy); // [1, 2, 3]
  

  slice() 在复制数组时常用于避免直接修改原数组。

推荐：

• JavaScript
• react
• vue

---