数组操作大师班：slice 与 splice 的那些事儿

大家好，欢迎来到今天的“数组操作大师班”！今天我们要深入探讨两个非常重要的数组方法：slice 和 splice。这两个方法虽然名字相似，但功能和用法却大不相同。通过今天的课程，你将彻底掌握它们的区别，并能够在实际开发中灵活运用。

1. 初识 slice 和 splice

1.1 什么是 slice？

slice 是一个非常优雅的方法，它的作用是从数组中提取一部分元素，并返回一个新的数组，而不会修改原数组。你可以把它想象成“切片”，就像你从一块蛋糕上切下一片，剩下的蛋糕还是完整的。

语法：

array.slice(start, end)

• start: 开始提取的索引（包含）。
• end: 结束提取的索引（不包含）。如果不提供 end，则会一直提取到数组末尾。

示例：

const fruits = ['🍎', '🍊', '🍌', '🍇', '🍉'];
const slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // ['🍊', '🍌']
console.log(fruits);       // ['🍎', '🍊', '🍌', '🍇', '🍉'] (原数组未变)

1.2 什么是 splice？

splice 则是一个更强大的工具，它不仅可以从数组中删除元素，还可以在指定位置插入新元素。你可以把它想象成“手术刀”，既能切除部分组织，又能植入新的东西。最重要的是，splice 会直接修改原数组。

语法：

array.splice(start, deleteCount, item1, item2, ...)

• start: 开始操作的索引。
• deleteCount: 要删除的元素个数。如果为 0，则只插入元素，不删除任何元素。
• item1, item2, ...: 可选参数，表示要插入的新元素。

示例：

const veggies = ['🥕', '🥔', '🌶️', '🥦', '🥒'];
const removedVeggies = veggies.splice(1, 2, '🌽', '🧅');
console.log(removedVeggies); // ['🥔', '🌶️'] (被删除的元素)
console.log(veggies);        // ['🥕', '🌽', '🧅', '🥦', '🥒'] (原数组被修改)

2. 深入理解 slice 和 splice

2.1 slice 的特点

• 不会修改原数组：slice 只是复制了一部分数组，原数组保持不变。
• 可以处理负索引：如果你传入负数作为 start 或 end，JavaScript 会从数组末尾开始计算。例如，-1 表示最后一个元素，-2 表示倒数第二个元素。

示例：

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.slice(-3, -1)); // [3, 4]

• 返回值：slice 返回一个新数组，包含从 start 到 end 之间的元素（不包括 end 本身）。

2.2 splice 的特点

• 会修改原数组：splice 直接对原数组进行操作，删除或插入元素后，原数组会发生变化。
• 返回被删除的元素：splice 的返回值是一个数组，包含所有被删除的元素。如果没有删除任何元素，返回一个空数组。
• 可以同时删除和插入：splice 不仅可以删除元素，还可以在同一位置插入新元素，这使得它非常灵活。

示例：

const letters = ['a', 'b', 'c', 'd', 'e'];
letters.splice(2, 0, 'x', 'y'); // 在索引 2 处插入 'x' 和 'y'
console.log(letters); // ['a', 'b', 'x', 'y', 'c', 'd', 'e']

3. 实战演练：slice vs splice

为了更好地理解这两个方法的区别，我们来做一个简单的对比表格：

特性	slice	splice
修改原数组	否	是
返回值	新数组	被删除的元素组成的数组
是否支持负索引	是	否
主要用途	提取数组的一部分	删除、插入或替换数组中的元素
参数	start, end	start, deleteCount, item1, …

3.1 场景 1：从数组中提取部分元素

假设你有一个包含 10 个元素的数组，你想从中提取第 3 到第 7 个元素。你应该使用 slice，因为它不会修改原数组，而且操作简单。

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const extractedData = data.slice(2, 7); // 从索引 2 到 6
console.log(extractedData); // [3, 4, 5, 6, 7]
console.log(data);          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] (原数组未变)

3.2 场景 2：更新数组中的某些元素

假设你有一个任务列表，用户想要删除第 2 个任务，并在同一个位置添加一个新的任务。这时你应该使用 splice，因为它可以直接修改原数组并返回被删除的任务。

const tasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4'];
const removedTask = tasks.splice(1, 1, 'New Task');
console.log(removedTask); // ['Task 2'] (被删除的任务)
console.log(tasks);       // ['Task 1', 'New Task', 'Task 3', 'Task 4'] (原数组被修改)

4. 进阶技巧：结合使用 slice 和 splice

有时候，你可能需要先提取一部分数据，然后再对原数组进行修改。这种情况下，你可以结合使用 slice 和 splice。例如，假设你有一个购物车，用户想要查看前 3 个商品，并且移除第 4 个商品。

const cart = ['Apple', 'Orange', 'Banana', 'Grapes', 'Watermelon'];

// 使用 slice 提取前 3 个商品
const firstThreeItems = cart.slice(0, 3);
console.log(firstThreeItems); // ['Apple', 'Orange', 'Banana']

// 使用 splice 移除第 4 个商品
cart.splice(3, 1);
console.log(cart); // ['Apple', 'Orange', 'Banana', 'Watermelon']

5. 总结

今天我们学习了两个非常重要的数组操作方法：slice 和 splice。slice 是一个安全的操作，它只会返回数组的一部分，而不会影响原数组；splice 则是一个更强大的工具，它可以删除、插入或替换数组中的元素，但它会直接修改原数组。

在实际开发中，选择合适的方法非常重要。如果你只是想提取数据而不改变原数组，slice 是你的最佳选择；如果你需要对数组进行修改，splice 将是你的好帮手。

希望今天的课程对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言讨论。下次见！ 🚀

---

参考资料：

• MDN Web Docs: Array.prototype.slice
• MDN Web Docs: Array.prototype.splice
• JavaScript.info: Array methods