JS用splice修改数组并获取删除元素方法

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《js使用splice修改数组并获取删除项的方法》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

splice方法会直接修改原数组并返回被删除元素组成的数组；1. splice语法为array.splice(start, deleteCount, item1, ...)，start为起始索引，deleteCount指定删除元素个数，后续参数为插入的新元素；2. splice与slice的核心区别在于splice是“修改者”会改变原数组，而slice是“复制者”不修改原数组仅返回新数组；3. splice常见应用场景包括根据索引删除、插入或替换元素，但存在修改原数组导致副作用、循环中删除元素需注意索引变化、性能开销较大等潜在问题；4. 现代JavaScript中更推荐使用filter()删除、展开运算符或concat()添加、map()修改元素，这些方法遵循不可变性原则，避免副作用，提升代码可预测性和可维护性，但在需原地修改或性能敏感场景下splice仍具价值。

splice 方法在 JavaScript 中是一个非常强大的数组操作工具，它能直接修改原数组的内容——包括删除、替换或添加元素——并且，它会返回一个新数组，其中包含了所有被删除的元素。如果你没有删除任何元素，它会返回一个空数组。

解决方案

Array.prototype.splice() 的基本语法是 array.splice(start, deleteCount, item1, item2, ...)。

• start：必需。指定修改的起始索引。
• deleteCount：可选。要删除的元素数量。如果设置为 0，则不删除任何元素。如果省略，则从 start 到数组末尾的所有元素都会被删除。
• item1, item2, ...：可选。要添加到数组中的新元素，从 start 位置开始。

它的核心魅力在于，无论你删除多少个元素，甚至一个都不删，它都会把那些“被移除”的元素（如果有的话）打包成一个新数组返回给你。这在很多场景下都非常有用，比如你需要知道哪些数据被移除了，以便进行后续处理。

示例：删除并获取删除项

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.log('原始数组:', fruits); // 原始数组: ['apple', 'banana', 'cherry', 'date', 'elderberry']

// 从索引 2 开始，删除 2 个元素
let deletedFruits = fruits.splice(2, 2); 

console.log('删除后的数组:', fruits); // 删除后的数组: ['apple', 'banana', 'elderberry']
console.log('被删除的元素:', deletedFruits); // 被删除的元素: ['cherry', 'date']

// 尝试删除但只添加（deleteCount 为 0）
let numbers = [1, 2, 3, 4];
let addedItems = numbers.splice(2, 0, 99, 100); 
console.log('添加后的数组:', numbers); // 添加后的数组: [1, 2, 99, 100, 3, 4]
console.log('添加时被删除的元素 (空数组):', addedItems); // 添加时被删除的元素 (空数组): []

splice与slice的区别是什么？为什么我有时候会混淆？

这确实是个老生常谈的问题，我个人也经常看到开发者在两者之间摇摆，甚至我自己偶尔也会恍惚一下。核心原因在于它们的名字太像了，而且都和“切片”或“部分”有关。但它们的行为模式简直是天壤之别，理解了这一点，混淆就会大大减少。

简单来说，splice是“修改者”，它直接在原数组上动刀子，把数组搞得面目全非（如果你操作得够狠的话），并且它会把“被切掉”的部分还给你。而slice是“观察者”或“复制者”，它从不碰原数组一根毫毛，只是从原数组中“复制”一部分内容，然后生成一个新的数组给你，原数组纹丝不动。

想象一下，你有一块披萨：

• 用splice：你拿起刀，从披萨上切下一块，这块披萨就真的少了一部分。你切下来的那部分就是它的返回值。
• 用slice：你拿起手机给披萨拍了张照，照片上只有披萨的一部分。披萨本身还是完整的，你得到的是那张“部分披萨”的照片。

所以，当你需要：

• 修改原数组（删除、插入、替换元素），并且可能需要知道哪些元素被移除了时，用splice。
• 获取数组的一部分副本，同时不希望修改原数组时，用slice。

这种“原地修改”和“创建副本”的根本差异，是导致我们混淆的根源，也是我们选择它们时最关键的考量点。

在实际项目中，splice有哪些常见的应用场景和潜在的“坑”？

splice在实际项目中可谓是“老兵”一枚，它在需要直接操作数组内容时非常方便。

常见的应用场景：

1. 根据索引删除元素：比如在一个待办事项列表中，用户点击“删除”按钮，我们通常会知道该事项在数组中的索引，然后就可以用splice(index, 1)来移除它。

   let todos = ['学习JS', '写报告', '开会'];
   let indexToRemove = 1; // 假设要删除“写报告”
   let removedItem = todos.splice(indexToRemove, 1);
   console.log(todos); // ['学习JS', '开会']
   console.log('删除的事项:', removedItem[0]); // 删除的事项: 写报告

2. 在特定位置插入元素：比如在购物车中，用户想在某个商品前面插入一个赠品，或者在一个排序好的数组中插入新数据。

   let shoppingCart = ['牛奶', '面包'];
   shoppingCart.splice(1, 0, '鸡蛋'); // 在索引1处插入'鸡蛋'，不删除任何元素
   console.log(shoppingCart); // ['牛奶', '鸡蛋', '面包']

3. 替换数组中的元素：当你需要更新数组中某个或某几个元素时。

   let settings = ['主题:亮色', '字体:小', '语言:英文'];
   settings.splice(0, 1, '主题:暗色'); // 将第一个元素替换为'主题:暗色'
   console.log(settings); // ['主题:暗色', '字体:小', '语言:英文']

4. 实现某些队列或栈行为：虽然有更专业的push/pop/shift/unshift，但splice的灵活性有时也能派上用场，比如从中间移除元素。

潜在的“坑”（Gotchas）：

1. 修改原数组的副作用：这是最大的“坑”。如果你在不经意间对一个被多个地方引用的数组使用了splice，那么所有引用这个数组的地方都会受到影响，这可能导致难以追踪的bug，尤其是在复杂的组件或状态管理中。我见过不少因为共享数组被splice修改而导致UI不一致的问题。
2. 循环中删除元素时的索引问题：这是一个经典陷阱。如果你在一个for循环中从前往后遍历数组并使用splice删除元素，每次删除都会导致后续元素的索引前移，从而可能跳过某些元素或访问到不存在的索引。

   let numbers = [1, 2, 3, 4, 5];
   for (let i = 0; i < numbers.length; i++) {
       if (numbers[i] % 2 === 0) { // 如果是偶数就删除
           numbers.splice(i, 1);
           // i--; // 关键：删除后需要将索引减一，以检查新的当前位置的元素
       }
   }
   console.log(numbers); // 预期：[1, 3, 5]，实际（不加i--）：[1, 3, 5] (这个例子恰好对了，因为2被删，4前移到2的位置，i增加后跳过了4。如果删的是奇数，问题会更明显)
   // 正确的做法通常是倒序遍历：
   let numbersCorrect = [1, 2, 3, 4, 5];
   for (let i = numbersCorrect.length - 1; i >= 0; i--) {
       if (numbersCorrect[i] % 2 === 0) {
           numbersCorrect.splice(i, 1);
       }
   }
   console.log(numbersCorrect); // [1, 3, 5]

3. 性能考量：对于非常大的数组，splice的性能开销可能较大。因为它涉及到在内存中移动大量元素来填补被删除的空缺或为新元素腾出空间。在性能敏感的场景下，可能需要考虑其他算法或数据结构。
4. 参数的理解：deleteCount为0时是插入，省略deleteCount会删除到末尾，这些细节有时会让人困惑。

除了splice，还有哪些现代JavaScript方法可以更优雅地处理数组的增删改查？

虽然splice功能强大，但其“原地修改”的特性在现代前端开发中（尤其是React、Vue这类强调数据不可变性的框架）有时会成为一个障碍。为了避免副作用和提高代码可预测性，我们现在更倾向于使用那些不修改原数组、而是返回新数组的方法。

1. 删除元素：filter() 当你需要根据某个条件从数组中移除元素时，filter()是首选。它会遍历数组，对每个元素执行回调函数，并返回一个新数组，其中只包含回调函数返回true的元素。

   const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}];
   const updatedUsers = users.filter(user => user.id !== 2); // 移除id为2的用户
   console.log(updatedUsers); // [{id: 1, name: 'Alice'}, {id: 3, name: 'Charlie'}]
   console.log(users); // 原始数组未变：[{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]

   这比splice更具声明性，也更容易理解。

2. 添加元素：展开运算符 (...) 和 concat() 在数组的开头、中间或末尾添加元素，展开运算符提供了一种非常简洁且非破坏性的方式。

   const originalArray = [1, 2, 3];
   const newElement = 0;
   const addedAtBeginning = [newElement, ...originalArray]; // [0, 1, 2, 3]
   const addedAtEnd = [...originalArray, 4]; // [1, 2, 3, 4]
   const addedInMiddle = [originalArray[0], newElement, ...originalArray.slice(1)]; // 复杂一点，但可行
   // 更常见的中间插入，可以结合slice
   const middleIndex = 1;
   const addedInMiddleSlice = [...originalArray.slice(0, middleIndex), 99, ...originalArray.slice(middleIndex)];
   console.log(addedInMiddleSlice); // [1, 99, 2, 3]

   concat()也可以用于合并数组，同样不会修改原数组。

   const arr1 = [1, 2];
   const arr2 = [3, 4];
   const combined = arr1.concat(arr2); // [1, 2, 3, 4]

3. 修改/替换元素：map() 当你需要基于原数组生成一个新数组，其中某些元素被修改时，map()是理想选择。

   const products = [{id: 1, price: 10}, {id: 2, price: 20}];
   const updatedProducts = products.map(product => 
       product.id === 1 ? { ...product, price: 15 } : product // 修改id为1的产品的价格
   );
   console.log(updatedProducts); // [{id: 1, price: 15}, {id: 2, price: 20}]
   console.log(products); // 原始数组未变

这些方法之所以被称为“更优雅”，很大程度上是因为它们遵循了函数式编程中“不可变性”的原则。这意味着每次操作都会返回一个新数组，而不会触碰旧数组，这使得数据流向更清晰，调试更简单，尤其是在大型、复杂的状态管理应用中，能有效避免难以预料的副作用。当然，这并不是说splice就没有用武之地了，在某些性能要求极高或确实需要原地修改的场景下，splice依然是最高效的选择。关键在于理解它们的特性，并根据具体需求做出明智的选择。

今天关于《JS用splice修改数组并获取删除元素方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！