splice的用法和深浅响应式拷贝

splice() 方法是 JavaScript 数组的一个非常强大的方法，它可以在数组的任何位置添加或删除项目，并返回被删除的项目（如果没有删除项目，则返回一个空数组）。splice() 方法会直接修改原数组。

语法

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

• start（必需）：指定修改的开始位置（从该位置开始删除或添加元素）。如果超出了数组的长度，则会从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（例如，-2 表示数组倒数第二个元素）。

• deleteCount（可选）：整数，表示要移除的数组元素的个数。如果 deleteCount 被省略了，或其值大于等于 array.length - start（也就是说，如果它大于或等于 start 之后的所有元素的数量），那么 start 之后数组的所有元素都会被删除。如果 deleteCount 是 0 或负数，则不会删除元素。这种情况下，至少应添加一个新元素。

• item1, item2, ...（可选）：要添加进数组的元素，从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。

• 返回值为一个包含被删除的元素的新数组，如果没有删除元素则返回空数组。

示例

删除元素

javascript复制代码

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];  
// 从索引 2 的位置开始删除 1 个元素  
let removed = myFish.splice(2, 1);  
  
// 数组现在是 ['angel', 'clown', 'sturgeon']  
// 被删除的元素是 ['mandarin']  
// removed 的值是 ['mandarin']

添加元素

javascript复制代码

let myFish = ['angel', 'clown', 'sturgeon'];  
// 从索引 2 的位置开始删除 0 个元素，然后添加 'drum'  
myFish.splice(2, 0, 'drum');  
  
// 数组现在是 ['angel', 'clown', 'drum', 'sturgeon']  
// 没有元素被删除，所以返回空数组

替换元素

javascript复制代码

let myFish = ['angel', 'clown', 'drum', 'sturgeon'];  
// 从索引 2 的位置开始删除 1 个元素，然后添加 'trumpet'  
myFish.splice(2, 1, 'trumpet');  
  
// 数组现在是 ['angel', 'clown', 'trumpet', 'sturgeon']  
// 被删除的元素是 ['drum']

splice() 方法非常灵活，可以通过不同的参数组合来实现多种数组操作。然而，由于它会修改原数组，所以在某些情况下，你可能需要先创建一个数组的副本，然后再在这个副本上进行操作，以避免影响原数组。

二

在Vue（或类似的前端框架，如React的useState/useReducer，或Angular的响应式表单）中，如果你从响应式数据源（如Vue的响应式数据对象、React的状态等）中直接赋值给一个非响应式的变量，并且之后对这个非响应式变量进行了修改，那么原始响应式数据源本身是不会被影响的。但是，如果你期望的是不改变原始响应式数据源，同时又能基于它进行一些操作或展示，你应该采取一些措施来确保这一点。

Vue 示例

在Vue中，如果你有一个响应式数组typeData_show.value，并且你希望基于这个数组创建一个新的数组sortArr，同时不希望对sortArr的修改影响到typeData_show.value，你可以使用数组的浅拷贝或深拷贝。

浅拷贝

浅拷贝只复制数组的第一层，如果数组中包含的是对象或数组等引用类型，那么这些内部引用类型仍然是共享的。

javascript复制代码

let sortArr = [...typeData_show.value]; // 使用扩展运算符进行浅拷贝  
// 或者  
let sortArr = typeData_show.value.slice(); // 使用slice()方法进行浅拷贝

深拷贝

如果你需要完全独立的副本，包括内部的对象和数组，那么你需要进行深拷贝。

javascript复制代码

let sortArr = JSON.parse(JSON.stringify(typeData_show.value)); // 使用JSON方法进行深拷贝  
// 注意：这种方法有局限性，比如不能处理函数、undefined、循环引用等

或者使用一些库如lodash的_.cloneDeep()方法进行深拷贝。

javascript复制代码

import _ from 'lodash';  
let sortArr = _.cloneDeep(typeData_show.value);

注意事项

• 当你对sortArr进行修改时，这些修改不会反映到typeData_show.value上，因为它们是两个独立的数组。
• 如果你使用的是Vue 3的Composition API中的ref或reactive，并且想要基于这些响应式数据创建新的响应式引用，你可以使用ref或reactive再次包裹你的拷贝数据，但这通常不是必要的，除非你需要在Vue的模板或计算属性中自动跟踪这些变化。
• 深拷贝和浅拷贝的选择取决于你的具体需求。深拷贝会消耗更多的内存和计算资源，因为它需要复制所有嵌套的对象和数组。如果你确定不需要内部数据的独立副本，浅拷贝就足够了。