JS Array方法详解之如何区分slice和splice
作者：要加油哦～
在JavaScript中splice()和slice()是两个用于操作数组的方法,尽管它们的名字相似,但功能和用途却截然不同,这篇文章主要介绍了JS Array方法详解之如何区分slice和splice,需要的朋友可以参考下
省流总结：
slice(起, 终)，切片 ，复制，返回新数组，不改原数组
splice(起, 删几个, 插入哪几个)，增删改，改 原数组，返回被改后的原数组。
一、 slice()：不改变原数组 ，返回“切片”
功能：
从原数组中提取部分元素，返回一个新数组，原数组不变。
语法：
array.slice(start, end)
start：起始索引（包含）end：结束索引（不包含）
例子：
const arr = [10, 20, 30, 40, 50]; const newArr = arr.slice(1, 4); console.log(newArr); // [20, 30, 40] console.log(arr); // 原数组不变 [10, 20, 30, 40, 50]
特点：
适合“复制数组”：
const copy = arr.slice();不破坏原数组，返回值是新的数组
二、splice()：直接修改原数组
功能：
删除元素
插入元素
替换元素
语法： array.splice(起始索引, 删除数量, 插入的新元素)
array.splice(start, deleteCount, item1, item2, ...)
start：开始修改的位置索引deleteCount：要删除的元素数量item1...：要插入的新元素（可选）
删除元素示例：
const arr = [1, 2, 3, 4, 5]; arr.splice(2, 2); // 从索引 2 开始删除 2 个元素 console.log(arr); // [1, 2, 5]
插入元素示例：
const arr = [1, 2, 5]; arr.splice(2, 0, 3, 4); // 在索引 2 位置插入 3 和 4 console.log(arr); // [1, 2, 3, 4, 5]
替换元素示例：
const arr = [1, 2, 3]; arr.splice(1, 1, 'a', 'b'); // 把索引1的 1 个元素换成 'a' 和 'b' console.log(arr); // [1, 'a', 'b', 3]
特点：
原地修改原数组；
返回值是被删除的元素组成的新数组。
slice vs splice 对比表：
| 特性 | slice() | splice() |
|---|---|---|
| 原数组是否改变 | ❌ 否（不改变） | ✅ 是（原地修改） |
| 返回值 | 提取的新数组 | 被删除的元素数组 |
| 用于 | 拷贝、截取 | 删除、插入、替换 |
| 是否支持插入 | ❌ 不支持 | ✅ 支持 |
常用通用写法总结：
拷贝数组：
const newArr = arr.slice();
提取最后三个元素：
const last3 = arr.slice(-3);
清空数组（splice）：
arr.splice(0, arr.length); // 原数组变为空
插入新元素到中间：
arr.splice(2, 0, '新元素');
总结
到此这篇关于JS Array方法详解之如何区分slice和splice的文章就介绍到这了,更多相关JS Array方法区分slice和splice内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！