JS 数组 `splice()` 方法：从入门到精通，这篇就够了！39

大家好，我是你们的中文知识博主！在 JavaScript 的世界里，数组（Array）是我们日常开发中使用频率最高的数据结构之一。而要玩转数组，就不得不提到一个功能强大到堪称“瑞士军刀”的方法——`()`。它能让你对数组进行增、删、改等各种操作，而且非常灵活。但正因为其功能强大，也常常让初学者感到困惑。别担心，今天这篇超详细的文章，我将带你从零开始，一步步深入理解 `splice()` 的所有奥秘，保证你读完就能精通它！

首先，我们来认识一下 `splice()` 方法的基本语法。它的定义是这样的：
`(start, deleteCount, item1, item2, ...)`
乍一看参数有点多，是不是有点懵？别急，我们来逐个解析：

`start` (必需)：整数，指定修改的起始索引。

如果为正数，表示从该索引位置开始。
如果为负数，表示从数组末尾开始的索引。例如，`-1` 表示倒数第一个元素，`-2` 表示倒数第二个元素。
如果 `start` 大于数组的长度，则会从数组末尾开始添加或删除。


`deleteCount` (可选)：整数，指定要删除的元素数量。

如果省略，或者其值大于或等于从 `start` 到数组末尾的所有元素数量，则从 `start` 位置到数组末尾的所有元素都将被删除。
如果为 `0` 或负数，则不删除任何元素。在这种情况下，至少应指定一个 `item` 参数用于添加新元素。


`item1, item2, ...` (可选)：要添加到数组中的新元素。这些元素会从 `start` 位置开始插入。

是不是觉得有点复杂？没关系，我们通过具体的代码示例来让它变得清晰明了。`splice()` 的强大之处在于，它通过这三个参数的组合，能够实现多种不同的数组操作。

一、删除数组元素
这是 `splice()` 最常见的用法之一。当你只想删除数组中的一部分元素，而不想添加任何新元素时，只需设置 `start` 和 `deleteCount` 参数。

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
// 1. 从索引 2 开始，删除 1 个元素 ('cherry')
let removedFruits1 = (2, 1);
(fruits); // 输出: ['apple', 'banana', 'date', 'elderberry']
(removedFruits1); // 输出: ['cherry'] （`splice()` 返回被删除的元素组成的数组）
// 2. 从索引 1 开始，删除 2 个元素 ('banana', 'date')
let removedFruits2 = (1, 2);
(fruits); // 输出: ['apple', 'elderberry']
(removedFruits2); // 输出: ['banana', 'date']
// 3. 使用负数索引：从倒数第 1 个元素开始，删除 1 个 ('elderberry')
fruits = ['orange', 'grape', 'kiwi'];
let removedFruits3 = (-1, 1);
(fruits); // 输出: ['orange', 'grape']
(removedFruits3); // 输出: ['kiwi']
// 4. 从索引 1 开始，删除到数组末尾的所有元素 (如果 deleteCount 大于或等于剩余元素数量)
fruits = ['lemon', 'mango', 'nectarine', 'papaya'];
let removedFruits4 = (1); // 省略 deleteCount，默认删除所有剩余元素
(fruits); // 输出: ['lemon']
(removedFruits4); // 输出: ['mango', 'nectarine', 'papaya']

二、添加数组元素
当你需要在数组的某个位置插入新元素，而不想删除任何现有元素时，只需将 `deleteCount` 设置为 `0`，并提供 `item` 参数。

let colors = ['red', 'green', 'blue'];
// 1. 在索引 1 处（'green' 之前）添加一个元素 'yellow'
(1, 0, 'yellow');
(colors); // 输出: ['red', 'yellow', 'green', 'blue']
// 2. 在数组末尾添加多个元素（start 等于数组长度）
(, 0, 'purple', 'orange');
(colors); // 输出: ['red', 'yellow', 'green', 'blue', 'purple', 'orange']
// 3. 在数组开头添加元素（start 为 0）
(0, 0, 'black');
(colors); // 输出: ['black', 'red', 'yellow', 'green', 'blue', 'purple', 'orange']

三、替换数组元素
这是 `splice()` 最具“瑞士军刀”特性的用法！通过同时指定 `deleteCount` 大于 `0` 和提供 `item` 参数，你可以实现替换操作。替换元素的数量可以与删除元素的数量不同。

let animals = ['dog', 'cat', 'bird', 'fish'];
// 1. 替换单个元素：从索引 1 开始，删除 1 个 ('cat')，然后添加 'rabbit'
let replacedAnimals1 = (1, 1, 'rabbit');
(animals); // 输出: ['dog', 'rabbit', 'bird', 'fish']
(replacedAnimals1); // 输出: ['cat']
// 2. 替换多个元素，且新旧数量不一致：从索引 2 开始，删除 2 个 ('bird', 'fish')，然后添加 'snake', 'turtle', 'lizard'
let replacedAnimals2 = (2, 2, 'snake', 'turtle', 'lizard');
(animals); // 输出: ['dog', 'rabbit', 'snake', 'turtle', 'lizard']
(replacedAnimals2); // 输出: ['bird', 'fish']
// 3. 替换多个元素，新元素比删除的少：从索引 1 开始，删除 2 个 ('rabbit', 'snake')，然后添加 'hamster'
let replacedAnimals3 = (1, 2, 'hamster');
(animals); // 输出: ['dog', 'hamster', 'turtle', 'lizard']
(replacedAnimals3); // 输出: ['rabbit', 'snake']

四、`splice()` 的返回值
划重点！`splice()` 方法会返回一个由被删除的元素组成的新数组。如果没有元素被删除，它会返回一个空数组 `[]`。这个特性在某些场景下非常有用，例如需要获取被删除的元素以便进行后续处理时。在上面的例子中，我们已经看到了 `removedFruits` 和 `replacedAnimals` 变量所捕获的返回值。

五、`splice()` 会修改原数组（原地修改）
这是 `splice()` 最重要的特点之一，也是初学者最容易混淆的地方。`splice()` 方法是一个破坏性（mutating）操作，它会直接改变调用它的原始数组。这意味着，如果你在操作之后仍然需要原始数组的副本，你需要在调用 `splice()` 之前手动创建一个副本（例如使用 `slice()` 或扩展运算符 `...`）。

let originalArray = [10, 20, 30, 40];
let modifiedArray = (1, 2); // 删除了 20, 30
(originalArray); // 输出: [10, 40] - 注意，originalArray 已经被改变了！
(modifiedArray); // 输出: [20, 30]

六、`splice()` 与 `slice()` 的区别
既然提到了 `splice()` 会原地修改，就不得不把它和另一个长得很像、但行为完全相反的方法 `slice()` 进行对比。这几乎是前端面试的必考题！

`splice()`：

改变原数组 (原地修改)。
返回 被删除的元素组成的新数组。
用于增、删、改数组元素。
参数是 `(start, deleteCount, item1, ...)`。


`slice()`：

不改变原数组，而是返回一个包含被提取元素的新数组。
返回 一个从原数组中选取的新数组，原数组不变。
用于提取数组的子集（浅拷贝）。
参数是 `(start, end)`，`end` 不包含在内。



简单来说，`splice()` 是“剪切并粘贴”，而 `slice()` 是“复制并粘贴”。

七、实际应用场景
`splice()` 因为其强大的增删改能力，在实际开发中有着非常广泛的应用：

购物车管理： 添加商品、删除商品、修改商品数量（替换）。
任务列表/待办事项： 添加新任务、完成任务（删除）、修改任务内容。
游戏背包系统： 增加物品、使用物品（删除）、替换物品。
动态表格或列表： 删除某一行数据、在某个位置插入新数据。
数据清洗： 移除数组中不符合条件的项。

总结一下，`()` 方法是 JavaScript 数组操作中一颗璀璨的明珠。掌握了它，你就掌握了对数组进行精确增删改的能力。记住它的核心：`start` 定义起点，`deleteCount` 控制删除，`item` 负责添加，并且它会原地修改原数组，并返回一个包含被删除元素的新数组。多加练习，将这些概念内化于心，你就能在面对各种数组操作需求时游刃有余。希望这篇详细的解析能帮助你彻底理解并精通 `splice()` 方法！如果你有任何疑问，或者有其他想要了解的知识点，欢迎在评论区留言交流！

2025-11-19

下一篇：ECShop JavaScript深度解析：从用户体验到二次开发，电商前端的秘密武器！