JavaScript slice() vs. splice()：深入解析差异与最佳实践
在 JavaScript 的世界里，数组是最基础且最重要的数据结构之一。我们经常需要对数组进行各种操作，例如提取部分元素、添加新元素、删除现有元素或替换某些元素。为了满足这些需求，JavaScript 提供了两个功能强大但名称相似、容易混淆的方法：slice() 和 splice()。虽然它们都作用于数组，并且名称只有一字之差，但它们的核心功能、行为方式、对原数组的影响以及返回值却截然不同。
对于初学者乃至一些有经验的开发者来说，精确区分 slice() 和 splice() 的用途和影响是编写健壮、可维护代码的关键一步。错误地使用其中一个可能导致难以追踪的 bug，尤其是在涉及状态管理或数据流的应用中。本文旨在深入剖析 slice() 和 splice() 这两个方法，详细阐述它们的语法、参数、行为、返回值，并通过丰富的示例和场景分析，帮助您彻底理解它们的差异，掌握在不同情境下的最佳实践策略。
一、深入理解 slice()：数组的非破坏性切片
slice() 方法的核心思想是提取数组的一部分，并返回一个新的数组，而不会修改原始数组。这使得 slice() 成为一个“非破坏性”或“不可变”操作，这在现代 JavaScript 开发中尤其受到推崇，因为它有助于避免副作用，使代码更易于推理和测试。
1. 语法
javascript
array.slice(begin, end)
2. 参数详解
-
begin(可选):- 指定开始提取的位置（索引）。
- 如果省略，则默认为 0，表示从数组的第一个元素开始提取。
- 如果为正数，则表示从该索引（包含该索引处的元素）开始提取。
- 如果为负数，则表示从数组末尾算起的偏移量。例如，
-1指的是数组最后一个元素，-2指的是倒数第二个元素，以此类推。如果begin是负数，则实际开始索引是array.length + begin。 - 如果
begin超出数组范围（大于或等于array.length），则返回一个空数组。
-
end(可选):- 指定结束提取的位置（索引），但不包含该索引处的元素。这是
slice()中一个非常关键的点：结束索引是排他性的。 - 如果省略，则提取从
begin开始到数组末尾的所有元素。 - 如果为正数，则表示在该索引（不包含该索引处的元素）之前结束提取。
- 如果为负数，则也表示从数组末尾算起的偏移量。例如，
-1指的是数组最后一个元素。如果end是负数，则实际结束索引是array.length + end。 - 如果
end表示的位置在begin之前或与之相同，则返回一个空数组。
- 指定结束提取的位置（索引），但不包含该索引处的元素。这是
3. 返回值
slice() 方法返回一个新的数组，其中包含了从原始数组中提取的元素。这个新数组是一个浅拷贝 (Shallow Copy)。这意味着：
* 对于原始数组中的原始类型值（如数字、字符串、布尔值），新数组会复制这些值。修改新数组中的这些值不会影响原数组。
* 对于原始数组中的对象或数组引用，新数组会复制这些引用。也就是说，新数组和原数组中的对应元素将指向同一个对象或数组。因此，如果通过新数组修改了这个被引用的对象或数组内部的属性或元素，那么这种修改也会反映在原始数组中（反之亦然）。
4. 示例
“`javascript
const originalArray = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 1. 基本用法：提取索引 1 到 3 (不含 3) 的元素
const sliced1 = originalArray.slice(1, 3);
console.log(sliced1); // Output: [‘b’, ‘c’]
console.log(originalArray); // Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’] (原数组未改变)
// 2. 省略 end 参数：从索引 2 开始提取到末尾
const sliced2 = originalArray.slice(2);
console.log(sliced2); // Output: [‘c’, ‘d’, ‘e’, ‘f’]
// 3. 省略 begin 和 end 参数：创建整个数组的浅拷贝
const shallowCopy = originalArray.slice();
console.log(shallowCopy); // Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]
console.log(shallowCopy === originalArray); // Output: false (是新数组，不是同一个引用)
// 4. 使用负数索引：提取最后三个元素
const sliced3 = originalArray.slice(-3);
console.log(sliced3); // Output: [‘d’, ‘e’, ‘f’]
// 5. 结合使用正负索引：从索引 1 开始，到倒数第二个元素 (不含) 结束
const sliced4 = originalArray.slice(1, -1);
console.log(sliced4); // Output: [‘b’, ‘c’, ‘d’, ‘e’]
// 6. begin 大于或等于 end：返回空数组
const sliced5 = originalArray.slice(3, 1);
console.log(sliced5); // Output: []
const sliced6 = originalArray.slice(3, 3);
console.log(sliced6); // Output: []
// 7. begin 超出范围：返回空数组
const sliced7 = originalArray.slice(10);
console.log(sliced7); // Output: []
// 8. 浅拷贝示例
const nestedArray = [1, 2, [3, 4]];
const slicedNested = nestedArray.slice();
slicedNested[0] = 100; // 修改原始类型值
slicedNested[2][0] = 300; // 修改嵌套数组中的值
console.log(slicedNested); // Output: [100, 2, [300, 4]]
console.log(nestedArray); // Output: [1, 2, [300, 4]] (原始数组的嵌套数组也被修改了)
“`
5. slice() 的关键特性总结
- 非破坏性: 不修改调用它的原始数组。
- 返回新数组: 结果是一个全新的数组实例。
- 浅拷贝: 如果数组成员是对象或数组，则拷贝的是引用，不是深层复制。
- 用途: 主要用于获取数组的子集，或者创建数组的浅拷贝副本。
二、深入理解 splice()：数组的破坏性编辑
与 slice() 不同，splice() 方法的核心目标是修改原始数组本身。它可以用来删除元素、插入新元素，或者同时进行替换（删除一些元素并插入另一些）。由于它直接改变了调用它的数组，因此 splice() 是一个“破坏性”或“可变”操作。
1. 语法
javascript
array.splice(start, deleteCount, item1, item2, ...)
2. 参数详解
-
start:- 必需参数。指定修改开始的位置（索引）。
- 如果为正数，表示从该索引（包含）开始修改。
- 如果为负数，表示从数组末尾算起的偏移量。例如，
-1指的是数组最后一个元素。实际开始索引是array.length + start。 - 如果
start超出数组长度，则实际开始索引会被设置为array.length（相当于在末尾操作）。 - 如果
start是负数且其绝对值大于数组长度，则实际开始索引会被设置为 0（相当于在开头操作）。
-
deleteCount(可选):- 指定要从
start位置开始删除的元素数量。 - 如果省略，或者其值大于或等于从
start到数组末尾的元素数量，则会删除从start开始的所有后续元素。 - 如果为 0 或负数，则不会删除任何元素。这种情况下，
splice()主要用于插入新元素。
- 指定要从
-
item1, item2, ...(可选):- 表示要添加到数组中的一个或多个元素。
- 这些元素会从
start参数指定的位置开始插入。 - 如果没有指定任何要插入的元素，
splice()就只执行删除操作。
3. 返回值
splice() 方法返回一个包含被删除元素的数组。
* 如果删除了元素，返回值就是这些被删除的元素组成的新数组。
* 如果没有删除任何元素（例如 deleteCount 为 0，或者 start 超出范围且未插入元素），则返回一个空数组 []。
注意： splice() 的返回值不是修改后的数组，而是被移除的部分。这是一个常见的混淆点。如果你需要修改后的数组，直接使用原数组变量即可，因为它已经被原地修改了。
4. 示例
“`javascript
let originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 1. 删除元素：从索引 2 开始，删除 2 个元素 (‘c’, ‘d’)
const deleted1 = originalArraySplice.splice(2, 2);
console.log(deleted1); // Output: [‘c’, ‘d’] (被删除的元素)
console.log(originalArraySplice); // Output: [‘a’, ‘b’, ‘e’, ‘f’] (原数组已被修改)
// 重置数组方便后续示例
originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 2. 插入元素：在索引 1 的位置，不删除任何元素 (deleteCount=0)，插入 ‘x’, ‘y’
const deleted2 = originalArraySplice.splice(1, 0, ‘x’, ‘y’);
console.log(deleted2); // Output: [] (没有删除元素)
console.log(originalArraySplice); // Output: [‘a’, ‘x’, ‘y’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]
// 重置数组
originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 3. 替换元素：从索引 3 开始，删除 1 个元素 (‘d’)，并插入 ‘z’
const deleted3 = originalArraySplice.splice(3, 1, ‘z’);
console.log(deleted3); // Output: [‘d’]
console.log(originalArraySplice); // Output: [‘a’, ‘b’, ‘c’, ‘z’, ‘e’, ‘f’]
// 重置数组
originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 4. 使用负数 start 索引：从倒数第二个元素 (-2) 开始，删除 1 个元素 (‘e’)
const deleted4 = originalArraySplice.splice(-2, 1);
console.log(deleted4); // Output: [‘e’]
console.log(originalArraySplice); // Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘f’]
// 重置数组
originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 5. 删除从某个位置到末尾的所有元素 (省略 deleteCount)
const deleted5 = originalArraySplice.splice(2);
console.log(deleted5); // Output: [‘c’, ‘d’, ‘e’, ‘f’]
console.log(originalArraySplice); // Output: [‘a’, ‘b’]
// 重置数组
originalArraySplice = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
// 6. start 超出范围：在末尾插入元素
const deleted6 = originalArraySplice.splice(10, 0, ‘g’, ‘h’);
console.log(deleted6); // Output: []
console.log(originalArraySplice); // Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, ‘g’, ‘h’]
// 重置数组
originalArraySplice = [‘a’, ‘b’, ‘c’];
// 7. 负数 start 绝对值大于长度：在开头插入
const deleted7 = originalArraySplice.splice(-5, 0, ‘x’);
console.log(deleted7); // Output: []
console.log(originalArraySplice); // Output: [‘x’, ‘a’, ‘b’, ‘c’]
“`
5. splice() 的关键特性总结
- 破坏性: 直接修改调用它的原始数组（增、删、改）。
- 返回被删除元素: 返回一个包含被移除元素的数组。
- 多功能: 可用于删除、插入或替换数组元素。
- 用途: 主要用于需要直接修改数组内容的场景。
三、slice() vs. splice()：核心差异对比
为了更清晰地理解两者的区别，我们可以通过一个表格来总结它们的核心特性：
| 特性 | slice() |
splice() |
|---|---|---|
| 主要目的 | 提取数组的一个片段 | 修改数组内容（添加、删除、替换元素） |
| 对原数组的影响 | 不修改 (非破坏性) | 修改 (破坏性) |
| 返回值 | 包含提取元素的新数组 (浅拷贝) | 包含被删除元素的数组 |
| 参数 | (start?, end?) |
(start, deleteCount?, item1?, item2?, ...) |
| 是否产生新数组 | 是 (返回的是新数组) | 否 (修改原数组；返回值是删除元素的数组，不是修改后的数组) |
| 用途场景 | 获取子数组副本；创建数组浅拷贝；函数式编程 | 在数组特定位置插入/删除/替换元素；需要原地修改数组 |
| 链式调用 | 返回新数组，适合链式调用进行进一步的数组操作 | 返回删除元素，若要基于修改后的数组链式调用，需使用原数组 |
| 常见误解 | 认为它会修改原数组；深拷贝与浅拷贝的混淆 | 认为它返回修改后的数组；对 deleteCount 为 0 的理解 |
四、最佳实践与选择策略
理解了 slice() 和 splice() 的根本区别后，选择使用哪个方法就取决于你的具体需求和编码风格偏好。
1. 何时使用 slice()?
- 当你需要数组的一部分，但不想改变原始数组时。 这是最常见的用例。例如，你需要显示数组的前 10 个项目，或者处理某个范围的数据，但原始数据源必须保持不变。
- 当你需要创建数组的（浅）拷贝时。 使用
array.slice()是创建数组浅拷贝的一种简洁方式。这在你想对数组副本进行操作，以避免影响原始状态时非常有用。 - 当你在遵循函数式编程范式时。 函数式编程强调不可变性。
slice()不产生副作用，返回一个新的数组，完美契合这一思想。在 React、Redux、Vuex 等状态管理库中，通常推荐使用非破坏性方法来更新状态，slice()（结合扩展运算符...或concat()等）是实现这一目标的常用工具。 - 当你希望代码意图更清晰地表达“获取片段”时。
slice这个词本身就暗示了切割、获取一部分的意思，有助于代码可读性。
示例：在 React 中安全地更新数组状态
“`javascript
// 假设有一个状态数组 const [items, setItems] = useState([‘apple’, ‘banana’, ‘cherry’]);
// 错误的方式 (直接修改状态 – 反模式)
// function removeItemAtIndex(index) {
// items.splice(index, 1); // 直接修改了 state，可能导致 React 无法正确检测变化
// setItems(items); // 传入的是同一个数组引用
// }
// 正确的方式 (使用 slice 或其他非破坏性方法)
function removeItemAtIndex(index) {
// 使用 slice 创建前后两部分的副本，然后合并
const newItems = [
…items.slice(0, index), // index 之前的元素
…items.slice(index + 1) // index 之后的元素
];
// 或者使用 filter
// const newItems = items.filter((_, i) => i !== index);
setItems(newItems); // 传入一个全新的数组实例
}
“`
2. 何时使用 splice()?
- 当你明确需要直接修改原始数组时。 如果你的逻辑要求原地修改数组（例如，直接从数据结构中移除一个项，并且所有持有该数组引用的地方都应看到这个变化），那么
splice()是最直接的选择。 - 当你需要在数组的任意位置插入、删除或替换元素时。
splice()提供了强大的灵活性来精确控制数组内容的变更。 - 当你需要获取被删除的元素以进行后续处理时。
splice()的返回值是被删除的元素数组，这在某些场景下可能很有用，比如实现一个撤销/重做功能，或者将被删除的项移动到另一个列表。 - 当性能是极端重要的考量，且原地修改优于创建新数组时（需谨慎）。 虽然现代 JavaScript 引擎对数组操作进行了优化，但在处理极大数组且频繁操作时，原地修改（
splice）有时可能比不断创建新数组副本（slice及相关操作）开销略小。但这通常是微优化，除非性能分析明确指出这是瓶颈，否则优先考虑代码的可读性和可维护性（即倾向于不可变操作）。
示例：直接修改数组以反映实时变化
“`javascript
let shoppingCart = [‘Milk’, ‘Bread’, ‘Eggs’];
function removeItemFromCart(itemName) {
const index = shoppingCart.indexOf(itemName);
if (index > -1) {
// 直接从购物车数组中移除该项
const removedItems = shoppingCart.splice(index, 1);
console.log(Removed ${removedItems[0]} from cart.);
// 此处 shoppingCart 变量已被直接修改
} else {
console.log(${itemName} not found in cart.);
}
}
removeItemFromCart(‘Bread’);
console.log(shoppingCart); // Output: [‘Milk’, ‘Eggs’]
“`
3. 性能考量
slice(): 创建新数组涉及内存分配和元素（或引用）的复制。对于非常大的数组，这可能有一定的开销，但通常很快。splice(): 修改原数组可能涉及移动数组中的大量元素（尤其是在数组开头附近插入或删除时），这可能导致 O(n) 的时间复杂度。然而，它避免了创建全新数组的开销。
在绝大多数日常应用场景中，slice() 和 splice() 的性能差异通常可以忽略不计。现代 JavaScript 引擎非常高效。首要原则应该是根据需求（是否需要修改原数组）和代码清晰度来选择方法。 只有在遇到实际性能瓶颈，并通过性能分析工具（profiling）确认数组操作是关键路径时，才需要深入考虑两者之间微小的性能差异。
4. 代码可读性与维护性
- 使用
slice()的代码通常更容易理解其意图——获取数据而不产生副作用。 - 使用
splice()的代码需要开发者意识到它会改变原始数据，这可能在复杂的代码库中引入潜在的难以追踪的 bug，特别是当数组被多处共享引用时。如果使用splice()，建议添加注释或通过清晰的变量命名来表明其破坏性行为。
五、注意事项与常见陷阱
slice()的浅拷贝: 牢记slice()执行的是浅拷贝。如果数组包含对象或其它数组，修改拷贝后数组中的这些嵌套结构会影响原始数组。如果需要完全独立的深拷贝，需要使用其他方法（如JSON.parse(JSON.stringify(array))或专门的深拷贝库如 Lodash 的_.cloneDeep())。splice()的返回值: 切勿将splice()的返回值误认为是修改后的数组。它返回的是被删除的元素。如果需要修改后的数组，请继续使用原始数组变量。splice()在循环中的使用: 在for循环中遍历数组并同时使用splice()删除元素时要格外小心。删除元素会改变数组的长度和后续元素的索引，可能导致跳过某些元素或出现索引越界。通常建议使用反向循环 (for (let i = array.length - 1; i >= 0; i--)) 或者使用filter()等非破坏性方法来代替。
示例：splice() 在循环中的问题
“`javascript
let numbers = [1, 2, 3, 4, 5, 6];
// 错误示例：正向循环中删除偶数
// for (let i = 0; i < numbers.length; i++) {
// if (numbers[i] % 2 === 0) {
// numbers.splice(i, 1); // 当删除一个元素时，下一个元素的索引会变成当前的 i，循环的下一次迭代会跳过它
// // i–; // 一种修正方法是回退索引，但不推荐，代码复杂
// }
// }
// console.log(numbers); // Output: [1, 3, 5, 6] (数字 6 被跳过了)
// 正确示例：使用 filter
numbers = [1, 2, 3, 4, 5, 6];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]
// 正确示例：反向循环
numbers = [1, 2, 3, 4, 5, 6];
for (let i = numbers.length – 1; i >= 0; i–) {
if (numbers[i] % 2 === 0) {
numbers.splice(i, 1); // 从后往前删除，不影响前面元素的索引
}
}
console.log(numbers); // Output: [1, 3, 5]
“`
六、结论
JavaScript 中的 slice() 和 splice() 是两个强大但截然不同的数组操作方法。它们的核心区别在于：
slice()是非破坏性的，它返回一个包含所选元素片段的新数组（浅拷贝），原始数组保持不变。它主要用于提取数据和创建副本。splice()是破坏性的，它直接修改原始数组（添加、删除或替换元素），并返回一个包含被删除元素的数组。它主要用于需要原地修改数组内容的场景。
掌握这两个方法的差异对于编写清晰、可靠且易于维护的 JavaScript 代码至关重要。选择哪个方法取决于你的具体目标：
- 如果需要保持原始数组不变，或者在函数式编程风格下工作，优先选择
slice()（或其他非破坏性方法）。 - 如果确实需要直接修改数组，并且理解其副作用，或者需要获取被删除的元素，那么
splice()是合适的工具。
通过理解它们的机制、参数、返回值和潜在陷阱，并结合实际场景需求，你就能自信地在 slice() 和 splice() 之间做出正确的选择，提升你的 JavaScript 编程能力。记住，清晰的意图和对可变性影响的认识是关键。