slice() 和 splice() 终极对比指南
一句话总结
👉 slice()：提取数组片段（不改变原数组）
👉 splice()：修改数组（增删改元素，改变原数组）
1. splice() - 修改数组
功能
在数组中添加/删除/替换元素（直接修改原数组）。
语法
array.splice(start, deleteCount, item1, item2, ..., itemN)
参数说明
| 参数 | 说明 |
|---|---|
start | 起始索引（负数表示从末尾倒数） |
deleteCount | 要删除的元素数量（省略则删除从 start 到末尾所有元素） |
item1...itemN | 要插入的新元素（可选） |
返回值
被删除元素组成的数组（若无删除则返回空数组）。
示例
const arr = ["A", "B", "C", "D"];
// 在索引1处插入元素（不删除）
arr.splice(1, 0, "X");
// arr → ["A", "X", "B", "C", "D"]
// 删除索引2起的1个元素，并插入"Y"
arr.splice(2, 1, "Y");
// arr → ["A", "X", "Y", "C", "D"]
// 删除最后2个元素
arr.splice(-2);
// arr → ["A", "X"]，返回被删除的["Y","C"]
2. slice() - 提取数组片段
功能
浅拷贝数组的一部分（不改变原数组）。
语法
array.slice([start], [end])
参数说明
| 参数 | 说明 |
|---|---|
start | 起始索引（含，负数表示从末尾倒数） |
end | 结束索引（不含，省略则截取到末尾） |
返回值
新数组（包含提取的元素）。
示例
const arr = ["A", "B", "C", "D"];
arr.slice(1); // → ["B", "C", "D"]（索引1到末尾）
arr.slice(1, 3); // → ["B", "C"]（索引1到3，不含3）
arr.slice(-2); // → ["C", "D"]（倒数第2位到末尾）
arr.slice(); // → 浅拷贝整个数组 ["A", "B", "C", "D"]
核心区别总结
| 特性 | splice() | slice() |
|---|---|---|
| 功能 | 增删改数组元素 | 提取数组片段 |
| 原数组 | 直接修改 | 不修改 |
| 返回值 | 被删除的元素组成的新数组 | 提取的元素组成的新数组 |
| 参数 | (start, deleteCount, items) | (start, end) |
| 使用场景 | 动态修改数组内容 | 安全获取子数组 |
记忆技巧
-
名字联想
splice→ "剪接"（像剪接电影，修改原内容）slice→ "切片"（像切蛋糕，取走一部分但不破坏原蛋糕）
-
参数关键
splice有deleteCount（强调删除操作）slice有end（强调截取范围）
-
副作用
splice会改变原数组（谨慎使用！）slice绝对安全（纯读取操作）
何时使用？
- 需要 删除/插入/替换 元素 →
splice() - 需要 复制子数组 或 避免修改原数组 →
slice()
掌握这两者的区别，JavaScript 数组操作再无困惑！ 🚀
