slice和splice区别全解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《slice和splice区别详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

slice和splice的核心区别在于是否修改原数组：1.slice是非破坏性的，返回新数组且不改变原数组；2.splice是破坏性的，直接修改原数组。slice适用于需要保留原始数据并获取子数组的场景，如分页或复制数组；splice用于需直接增删改原数组的场景，如删除元素、插入元素或替换元素。选择slice时，适合遵循不可变数据原则或需保留原数据；选择splice时，适合对性能要求高且明确需修改原数组的情况。两者各有适用场景，核心依据是对原数组是否进行修改。

JavaScript中的slice和splice方法，最核心的区别在于它们对原数组的操作方式：slice方法是‘非破坏性’的，它会返回一个新数组，而不会修改原数组；splice方法则是‘破坏性’的，它会直接在原数组上进行添加、删除或替换操作。

解决方案

简单来说，如果你只是想从数组中“截取”一部分内容，并且不希望影响到原始数据，那么slice就是你的首选。它就像是拍了一张照片，原件还在那里。而splice呢，它更像是在做“外科手术”，直接在原数组上动刀子，无论是删除、插入还是替换，都会让原数组面目一新。

slice()方法详解：

• 作用： 从现有数组中返回选定的元素。
• 返回值： 一个包含提取元素的新数组。
• 对原数组的影响： 不会修改原数组。
• 参数： slice(startIndex, endIndex)
  • startIndex：可选，从该索引处开始提取。如果省略，则从索引0开始。负数索引表示从数组末尾开始计数。
  • endIndex：可选，在该索引处停止提取（不包含endIndex处的元素）。如果省略，则提取到数组末尾。负数索引也表示从数组末尾开始计数。

示例：

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.slice(1, 4); // 从索引1开始，到索引4之前结束
console.log(newArray); // 输出: [2, 3, 4]
console.log(originalArray); // 输出: [1, 2, 3, 4, 5] (原数组未变)

const allElements = originalArray.slice(); // 不传参数，复制整个数组
console.log(allElements); // 输出: [1, 2, 3, 4, 5]

splice()方法详解：

• 作用： 通过删除现有元素和/或添加新元素来更改一个数组的内容。
• 返回值： 一个包含被删除元素的数组。如果没有删除任何元素，则返回一个空数组。
• 对原数组的影响： 会直接修改原数组。
• 参数： splice(startIndex, deleteCount, item1, item2, ...)
  • startIndex：必需，从该索引处开始修改数组。
  • deleteCount：可选，要删除的元素数量。如果设置为0，则不删除任何元素。如果省略，则从startIndex到数组末尾的所有元素都将被删除。
  • item1, item2, ...：可选，要添加到数组中的新元素。

示例：

const originalArray2 = ['a', 'b', 'c', 'd', 'e'];

// 删除操作
const removed1 = originalArray2.splice(1, 2); // 从索引1开始删除2个元素
console.log(removed1); // 输出: ['b', 'c']
console.log(originalArray2); // 输出: ['a', 'd', 'e'] (原数组已变)

const originalArray3 = ['x', 'y', 'z'];
// 添加操作 (deleteCount为0)
const removed2 = originalArray3.splice(1, 0, 'new1', 'new2'); // 在索引1处插入'new1', 'new2'
console.log(removed2); // 输出: [] (没有元素被删除)
console.log(originalArray3); // 输出: ['x', 'new1', 'new2', 'y', 'z'] (原数组已变)

const originalArray4 = [10, 20, 30, 40];
// 替换操作 (删除并添加)
const removed3 = originalArray4.splice(1, 1, 25); // 从索引1开始删除1个元素，并插入25
console.log(removed3); // 输出: [20]
console.log(originalArray4); // 输出: [10, 25, 30, 40] (原数组已变)

slice()的常见用法和应用场景是什么？

在我日常开发中，slice()用的最多大概就是为了“安全”地获取数组的一部分，或者干脆就是为了复制一个数组。因为它不修改原数组这个特性，在很多场景下简直是太方便了。

比如说，你想在前端展示一个很长的列表，但一次性只显示其中的一小部分，比如分页功能。你就可以用slice()来截取当前页的数据，而不用担心把原始的完整数据列表弄乱。

const fullList = Array.from({length: 100}, (_, i) => `Item ${i + 1}`);
const pageSize = 10;
const currentPage = 2; // 第二页

const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;

const itemsToShow = fullList.slice(startIndex, endIndex);
console.log(itemsToShow); // 打印 Item 11 到 Item 20
// fullList 依然是完整的100项，没有被修改

再比如，在React、Vue这类框架里，当你需要更新一个数组状态时，为了遵循“不可变数据”的原则，我们通常不会直接修改旧数组，而是创建一个新数组。slice()就是实现这种“浅复制”的利器。someArray.slice()不带任何参数，就能完美地复制一份原数组，然后你就可以在新数组上做任何操作，而不用担心副作用。这在我看来，是编写更可预测、更易维护代码的关键一步。

splice()在实际开发中如何进行数组元素的增删改？

splice()在实际开发中，就属于那种“刀子嘴豆腐心”的工具，它直接、粗暴，但效率是真的高。当你的需求是“原地”修改数组，或者说，你明确知道并希望原数组被改变时，splice()就派上用场了。

删除元素： 这是splice()最直观的用法之一。如果你需要从数组中移除特定数量的元素，比如，用户删除了购物车里的某件商品。

let cartItems = ['Laptop', 'Mouse', 'Keyboard', 'Monitor'];
const itemToRemoveIndex = cartItems.indexOf('Mouse'); // 找到要删除的商品的索引
if (itemToRemoveIndex !== -1) {
    cartItems.splice(itemToRemoveIndex, 1); // 从该索引开始删除1个元素
}
console.log(cartItems); // 输出: ['Laptop', 'Keyboard', 'Monitor']

这里有个小细节，splice会返回被删除的元素。有时候，你可能需要这些被删除的元素做后续处理，比如记录日志或者撤销操作，这个返回值就挺方便的。

添加元素： 当deleteCount参数设置为0时，splice()就变成了纯粹的插入工具。比如，在某个特定位置插入新的数据。

let todoList = ['Buy groceries', 'Clean house', 'Pay bills'];
// 在'Clean house'和'Pay bills'之间插入'Walk dog'
todoList.splice(2, 0, 'Walk dog');
console.log(todoList); // 输出: ['Buy groceries', 'Clean house', 'Walk dog', 'Pay bills']

替换元素： 这其实是删除和添加的组合拳。先删除指定数量的元素，然后立即在同一个位置插入新的元素。

let userRoles = ['Admin', 'Editor', 'Viewer'];
// 将'Editor'替换为'Moderator'
userRoles.splice(1, 1, 'Moderator');
console.log(userRoles); // 输出: ['Admin', 'Moderator', 'Viewer']

这种直接修改原数组的特性，在某些场景下确实非常高效，比如处理一个大型数据集，避免创建新的数组可以节省内存和提高性能。但说实话，它也带来了潜在的副作用，尤其是在处理共享数据时，稍不留神就可能引发一些难以追踪的bug。这也是为什么很多现代JavaScript开发模式更倾向于使用不可变操作的原因。

什么时候应该选择slice，什么时候选择splice？

选择slice还是splice，这事儿真不是拍脑袋决定的，得看你的具体需求和对数据完整性的考量。

选择slice的情况：

• 当你需要一个新数组，并且不想修改原数组时。 这是最核心的判断标准。比如，你只是想展示数组的一部分内容，或者需要对数组进行某种转换但又希望保留原始数据以备后续使用。
• 当你遵循不可变数据原则时。 在函数式编程或者使用React/Vue等框架进行状态管理时，为了避免副作用和提高组件的可预测性，我们通常会创建数据的副本而不是直接修改它们。slice()在这里就显得尤为重要，因为它能轻松地生成一个新数组。
• 当你需要复制一个数组时。 最简单的arr.slice()（不带参数）就能实现一个数组的浅复制，这比手动遍历复制要简洁得多。
• 当调试和错误追踪是你的优先考量时。 不修改原数组意味着你的数据流向更清晰，更容易追踪问题。

选择splice的情况：

• 当你明确需要直接修改原数组时。 如果你的应用逻辑就是要求数据“原地”变动，比如，一个内部的数据缓存，或者一个只需要在内存中维护一份最新状态的列表。
• 当你对性能有极致要求，并且数组非常大，创建新数组的开销成为瓶颈时。 虽然现代JavaScript引擎对slice的优化已经很好了，但在极端场景下，splice的直接操作可能确实能带来微小的性能优势。不过，我个人觉得，对于大多数应用来说，这种性能差异通常可以忽略不计，代码的可读性和可维护性往往更重要。
• 当你的操作是删除、插入或替换数组中的元素，并且你不需要保留原数组的旧版本时。 比如，一个待办事项列表，当任务完成并被删除后，你就不再需要它存在于列表中了。

总而言之，如果你对数据“纯洁性”有要求，希望避免副作用，那就用slice。如果你追求效率，并且明确知道并接受原数组会被修改，那splice就是你的好帮手。在实际开发中，我通常会优先考虑slice，只有当明确需要修改原数组，或者有非常充分的性能理由时，才会考虑splice。毕竟，可预测的代码，比那些“聪明”但难以捉摸的代码，要让人安心得多。

到这里，我们也就讲完了《slice和splice区别全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！