slice 与 splice 区别

问题

Array.slice() 与 Array.splice() 的区别？

解答

slice - 截取数组

slice 用于截取数组的一部分，不修改原数组，返回新数组。

const arr = [1, 2, 3, 4, 5];

// slice(start, end) - 从 start 到 end（不包含 end）
const result1 = arr.slice(1, 3);
console.log(result1); // [2, 3]
console.log(arr);     // [1, 2, 3, 4, 5] - 原数组不变

// 只传 start，截取到末尾
const result2 = arr.slice(2);
console.log(result2); // [3, 4, 5]

// 负数索引，从末尾计算
const result3 = arr.slice(-2);
console.log(result3); // [4, 5]

// 常用于复制数组
const copy = arr.slice();
console.log(copy); // [1, 2, 3, 4, 5]

splice - 删除/插入/替换

splice 用于删除、插入或替换元素，会修改原数组，返回被删除的元素。

const arr = [1, 2, 3, 4, 5];

// splice(start, deleteCount, ...items)

// 删除元素
const deleted = arr.splice(1, 2); // 从索引 1 开始删除 2 个
console.log(deleted); // [2, 3] - 返回被删除的元素
console.log(arr);     // [1, 4, 5] - 原数组被修改

// 插入元素
arr.splice(1, 0, 'a', 'b'); // 从索引 1 开始，删除 0 个，插入 'a', 'b'
console.log(arr); // [1, 'a', 'b', 4, 5]

// 替换元素
arr.splice(1, 2, 'x'); // 从索引 1 开始，删除 2 个，插入 'x'
console.log(arr); // [1, 'x', 4, 5]

对比示例

const original = [1, 2, 3, 4, 5];

// slice - 纯函数，不影响原数组
const sliced = original.slice(1, 3);
console.log(sliced);   // [2, 3]
console.log(original); // [1, 2, 3, 4, 5]

// splice - 会修改原数组
const spliced = original.splice(1, 2);
console.log(spliced);  // [2, 3]
console.log(original); // [1, 4, 5]

关键点

• slice 不修改原数组，splice 会修改原数组
• slice(start, end) 截取范围，splice(start, deleteCount, ...items) 删除并插入
• slice 返回截取的新数组，splice 返回被删除的元素数组
• slice 常用于复制数组或取子数组，splice 用于增删改操作
• 记忆：splice 有 p，表示 “plus”（添加）功能