JavaScript中slice与splice的区别及用法详解

核心要点速览：

slice(start, end)：用于截取数组片段，生成并返回一个新数组，原数组保持不变。

splice(start, deleteCount, items...)：用于修改原数组，支持元素的增、删、替换操作，直接改变原数组内容，并返回被删除的元素组成的数组。

一、 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(start, deleteCount, item1, item2, ...)

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 与 splice 对比总结：

常见通用写法汇总：

完整拷贝数组：

const newArr = arr.slice(); 

提取数组末尾三个元素：

const last3 = arr.slice(-3); 

清空数组内容（使用splice）：

arr.splice(0, arr.length); // 原数组变为空 

在数组中间位置插入新元素：

arr.splice(2, 0, '新元素');

总结

以上就是关于JavaScript中Array方法slice和splice区别的详细解析，更多相关JS Array方法区分slice和splice内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！