JavaScriptsplice()方法详解与使用技巧

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript中Array.prototype.splice()方法用于修改数组内容，可以删除或添加元素。其基本用法为：array.splice(start, deleteCount, item1, ...)。其中，start指定起始索引，deleteCount表示要删除的元素个数，item1等为可选的新元素。例如，arr.splice(1, 1)会从索引1开始删除一个元素，而arr.splice(1, 0, 'a')则会在索引1处插入元素'a'。splice()方法返回被删除元素的数组。》，聊聊，希望可以帮助到正在努力赚钱的你。

Array.prototype.splice用于修改数组内容，可删除、替换或插入元素，直接改变原数组。1. splice通过指定start索引、deleteCount删除元素，并可添加item1等新元素；2. 返回被删除元素组成的数组；3. 与slice区别在于splice修改原数组，slice返回新数组不影响原数组；4. 插入元素时deleteCount设为0；5. 删除元素时不传入item参数；6. 替换元素时同时设置deleteCount和item；7. 处理大数组时避免频繁在中部操作，考虑批量操作或使用其他数据结构。

JavaScript的Array.prototype.splice方法，说白了，就是数组的“外科医生”。它能让你在数组的任何位置，精确地移除、替换现有元素，或者干脆插入新的元素。最关键的一点是，它会直接修改原数组，而不是返回一个新数组。所以，当你需要原地改变一个数组的内容时，splice就是你的首选工具。

解决方案

Array.prototype.splice() 方法通过删除或替换现有元素或者添加新元素来更改一个数组的内容。这个方法返回一个由被删除的元素组成的新数组。

基本语法：array.splice(start, deleteCount, item1, item2, ...)

• start: 必需。指定修改的开始位置（索引）。
  • 如果是负值，则表示从数组的末尾开始的偏移量。例如，-1 表示倒数第一个元素，-2 表示倒数第二个元素。
  • 如果start大于数组的长度，则实际开始位置会被设置为数组的长度，这意味着不会删除任何元素，只会添加元素到数组末尾。
• deleteCount: 可选。整数，表示要移除的数组元素的个数。
  • 如果deleteCount是 0 或负数，则不移除任何元素。
  • 如果省略了deleteCount，则从start位置开始到数组末尾的所有元素都将被删除。
  • 如果deleteCount大于从start位置到数组末尾的元素数量，那么从start位置到数组末尾的所有元素都将被删除。
• item1, item2, ...: 可选。要添加到数组中的元素。从start位置开始插入这些元素。如果没有指定任何item，splice就只会删除元素。

返回值： 一个包含被删除元素的数组。如果没有删除任何元素，则返回一个空数组。

splice 和 slice 有什么区别？什么时候用哪个？

这大概是初学者最容易混淆的一对方法了，甚至我有时候写代码太快，也会不小心搞错。简单来说，它们的核心区别在于：splice是“修改”原数组，而slice是“提取”新数组。

splice（就像前面说的）是直接在原数组上动刀子，增删改查都是在原地完成的。它的返回值是被“切掉”的那些元素，如果没切掉任何东西，就返回一个空数组。所以当你需要对现有数据结构进行“就地改造”时，splice是当仁不让的选择。比如，一个待办事项列表，你完成了某个任务要把它从列表中移除，或者想在中间插入一个新任务，那就用splice。

而slice则完全不同，它不会改变原数组。它只是从原数组中“复制”出一部分，生成一个新的数组返回给你。原数组安然无恙。它的参数是slice(startIndex, endIndex)，注意endIndex是不包含的。所以，当你只是想从一个大数组中“截取”一部分数据，而不希望影响到原始数据时，slice就是你的好帮手。比如，你有一个用户列表，只想展示前10个用户，但又不想真的从数据库里删掉他们，这时就用slice。

总结一下：

• splice: 破坏性操作，修改原数组，返回被删除的元素。用于原地修改。
• slice: 非破坏性操作，返回新数组，原数组不变。用于提取子集。

选择哪个，完全取决于你的业务需求：是想改变现有状态，还是只是想获取一个副本。

使用 splice 插入、删除和替换元素的具体场景和代码示例

splice的强大之处就在于它的多功能性。通过巧妙地组合deleteCount和item参数，你可以实现各种数组操作。

1. 插入元素： 如果你只想在某个位置插入元素而不删除任何现有元素，可以将deleteCount设为 0。

let fruits = ['apple', 'banana', 'cherry'];

// 在索引1（'banana'之前）插入'orange'
fruits.splice(1, 0, 'orange');
console.log(fruits); // 输出: ["apple", "orange", "banana", "cherry"]

// 在数组末尾插入'grape' (start = 数组长度)
fruits.splice(fruits.length, 0, 'grape');
console.log(fruits); // 输出: ["apple", "orange", "banana", "cherry", "grape"]

// 在开头插入多个元素
fruits.splice(0, 0, 'kiwi', 'mango');
console.log(fruits); // 输出: ["kiwi", "mango", "apple", "orange", "banana", "cherry", "grape"]

2. 删除元素： 如果你只想删除元素而不插入新的，可以省略item参数。

let numbers = [1, 2, 3, 4, 5];

// 删除从索引2开始的1个元素（即删除3）
numbers.splice(2, 1);
console.log(numbers); // 输出: [1, 2, 4, 5]

// 删除从索引1开始的2个元素（即删除2和4）
numbers.splice(1, 2);
console.log(numbers); // 输出: [1, 5]

// 从倒数第二个位置开始，删除所有元素（即删除5）
numbers.splice(-1); // 相当于 splice(-1, 1) 或 splice(1) 因为数组只剩两个元素
console.log(numbers); // 输出: [1]

// 清空数组（从索引0开始，删除所有元素）
let arrToClear = [10, 20, 30];
arrToClear.splice(0);
console.log(arrToClear); // 输出: []

3. 替换元素： 通过同时指定deleteCount和item参数，你可以删除现有元素并插入新的元素来替换它们。

let colors = ['red', 'green', 'blue', 'yellow'];

// 将'green'替换为'purple'
colors.splice(1, 1, 'purple');
console.log(colors); // 输出: ["red", "purple", "blue", "yellow"]

// 将'blue'和'yellow'替换为'black'和'white'
colors.splice(2, 2, 'black', 'white');
console.log(colors); // 输出: ["red", "purple", "black", "white"]

// 将'red'替换为多个元素：'pink', 'orange'
colors.splice(0, 1, 'pink', 'orange');
console.log(colors); // 输出: ["pink", "orange", "purple", "black", "white"]

在使用splice时，我个人觉得最容易犯的错误就是搞错start索引或者deleteCount。特别是负数索引，虽然方便，但一不小心就会算错。多练习，多打印中间结果，是避免这些小坑的有效方法。

splice 在处理大型数组时的性能考量和注意事项

当数组规模变得非常庞大时，比如几十万甚至上百万个元素，splice的性能问题就可能浮出水面了。这不是说splice本身有什么“坏”的设计，而是它底层的工作机制决定的。

splice的本质是修改数组的“连续内存块”。当你在数组中间插入或删除元素时，JavaScript引擎需要做的工作是：

1. 移动元素： 如果你是在中间插入元素，那么从插入点之后的所有元素都需要向后移动，为新元素腾出空间。反之，如果删除元素，从删除点之后的所有元素都需要向前移动，填补空缺。
2. 内存重新分配（可能）： 如果插入操作导致数组长度超出当前分配的内存，引擎可能需要为整个数组重新分配一块更大的内存，然后把所有元素复制过去。

这些“移动”和“复制”操作，对于小数组来说是微不足道的，毫秒级都算不上。但对于动辄数十万上百万元素的数组，每一次移动都意味着大量的内存操作。想象一下，在一个有100万个元素的数组的开头插入一个元素，这意味着需要将剩下的999,999个元素全部向后挪动一位！这显然会消耗显著的时间。

那么，在处理大型数组时，我们应该注意什么呢？

• 避免频繁在数组头部或中部进行splice操作： 如果你的业务逻辑要求频繁在数组开头或中间增删元素，并且数组规模巨大，那么splice可能不是最佳选择。
• 考虑其他数据结构：
  • Map 或 Object： 如果你的数据不需要严格的顺序，或者你需要通过键快速查找和删除，那么使用Map或普通对象可能更高效。它们的增删改查通常是O(1)或O(logN)级别，远优于数组中间操作的O(N)。
  • 链表结构（手动实现或使用库）： 在某些特定场景下，如果你真的需要频繁在任意位置插入删除，并且对内存占用有较高要求，可以考虑实现一个链表结构。链表在插入和删除节点时，只需要改变相邻节点的指针，不需要移动大量数据。但这会增加代码复杂性，且JavaScript原生数组在大多数情况下性能足够好，所以这通常是最后的优化手段。
• 批量操作： 如果你有很多个元素需要插入或删除，尝试一次性完成，而不是多次调用splice。例如，如果你要删除多个不连续的元素，可以先记录下它们的索引，然后从后往前删除，避免索引因删除而变化。
• 重新构建数组： 在某些极端情况下，如果你需要对一个大数组进行大量分散的修改，性能瓶颈非常明显，那么与其多次splice，不如考虑构建一个新的数组。例如，使用filter、map等非破坏性方法组合，最后得到一个全新的数组。虽然这会消耗额外的内存来存储新数组，但通常比反复移动内存块要快。

总的来说，对于绝大多数日常开发任务，splice的性能是完全可以接受的。只有当你遇到明显的性能瓶颈，并且通过分析工具（如浏览器开发者工具的性能面板）确认splice确实是罪魁祸首时，才需要深入考虑这些优化策略。过早优化是万恶之源，先保证代码可读性和功能正确性，再考虑性能。

以上就是《JavaScriptsplice()方法详解与使用技巧》的详细内容，更多关于的资料请关注golang学习网公众号！