JavaScript内核与高级编程之：`JavaScript`的`Array toSpliced()`：其在 `JavaScript` 不可变数组切片中的新用法。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，大家好！我是今天的主讲人，咱们今天要聊聊JavaScript数组里一个比较新的家伙——toSpliced()。这玩意儿，说白了，就是来拯救我们这些强迫症患者的，让我们在修改数组的时候，还能保持原始数组的纯洁性。

开场白：数组的“不朽传说”

在JavaScript的世界里，数组就像我们手里的瑞士军刀，啥都能干。但是，用着用着，你有没有发现，有些数组方法用起来，简直就是“破坏狂”？比如splice()，它能直接把原始数组给改了！

这对于追求“纯函数”、喜欢“不可变数据”的程序员来说，简直就是噩梦。每次用splice()，都得小心翼翼地复制一份数组，生怕一不小心就把原始数据给污染了。

但是，现在好了！toSpliced()闪亮登场，它就像一个温柔的克隆大师，能帮你安全地修改数组，而不用担心原始数组受到任何伤害。

toSpliced()：不可变数组切片的福音

简单来说，toSpliced()方法会返回一个新的数组，这个新数组是原始数组的一个修改版本，但原始数组本身不会被改变。这就有点像我们拍照的时候，拍的是照片，不会把眼前的美景给“偷走”。

语法解析：toSpliced(start, deleteCount, ...items)

start: 指定开始修改数组的索引位置。如果start 超出数组长度，则从数组末尾开始添加内容；如果 start 为负值，则从数组末尾倒数start 的绝对值个元素开始（起始为-1）插入。如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。
deleteCount (可选): 一个整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 个元素）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它等于或大于start之后的数组的其余元素的数量)，那么start之后直到数组末尾的所有元素都将被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
...items (可选): 要添加到数组中替代被删除元素的元素。

用法详解：代码胜于雄辩

接下来，咱们用代码来好好地“调戏”一下toSpliced()。

1. 基本替换：替换指定位置的元素

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(2, 1, 6); // 从索引2开始，删除1个元素，并插入6
console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);       // 输出: 新数组: [1, 2, 6, 4, 5]

在这个例子中，我们从索引2（也就是数字3）开始，删除了一个元素（也就是数字3），然后插入了数字6。可以看到，原始数组originalArray 并没有受到任何影响，而newArray 则包含了修改后的结果。

2. 删除多个元素：批量清除

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(1, 3); // 从索引1开始，删除3个元素
console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);       // 输出: 新数组: [1, 5]

这里，我们从索引1开始，一口气删除了3个元素。是不是很方便？

3. 插入多个元素：扩充队伍

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(2, 0, 6, 7, 8); // 从索引2开始，删除0个元素，并插入6, 7, 8
console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);       // 输出: 新数组: [1, 2, 6, 7, 8, 3, 4, 5]

这次，我们从索引2开始，没有删除任何元素，而是插入了三个新元素。这就像在队伍中间插队一样，原有的元素都往后挪了挪。

4. 负数索引：倒着来

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(-2, 1, 6); // 从倒数第2个元素开始，删除1个元素，并插入6
console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);       // 输出: 新数组: [1, 2, 3, 6, 5]

toSpliced() 也支持负数索引，这让我们可以从数组的末尾开始操作。在这个例子中，我们从倒数第二个元素（也就是数字4）开始，删除一个元素，并插入数字6。

5. deleteCount 大于剩余元素数量

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(2, 10, 6); // 从索引2开始，删除10个元素(实际只有3个)，并插入6
console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);       // 输出: 新数组: [1, 2, 6]

当deleteCount 比从start开始剩余的元素数量还多的时候，toSpliced()会删除从start到数组末尾的所有元素。

与splice()的对比：冰与火之歌

特性	`splice()`	`toSpliced()`
修改原始数组	会直接修改原始数组	不会修改原始数组，返回一个新数组
返回值	返回被删除的元素组成的数组	返回修改后的新数组
适用场景	需要直接修改原始数组的场景	需要保持原始数组不变，并生成修改后的新数组的场景
不可变性	不支持不可变性	支持不可变性，符合函数式编程的原则
性能	在原地修改，理论上性能略高（但通常可以忽略）	创建新数组，性能略低（但通常可以忽略）

toSpliced()的优势：不可变性的魅力

数据安全： 避免了意外修改原始数据的风险，提高了代码的可靠性。
可预测性： 由于原始数据不会被修改，代码的行为更加可预测，更容易调试和维护。
函数式编程： toSpliced() 符合函数式编程的原则，可以与其他函数式编程技术更好地结合使用。
状态管理： 在React、Vue等框架中，使用 toSpliced() 可以更方便地进行状态管理，避免不必要的副作用。

实际应用场景：让代码更优雅

React/Vue状态管理： 在React或Vue等框架中，我们需要经常更新组件的状态。使用toSpliced() 可以确保状态的不可变性，从而避免一些潜在的问题。

// React示例
function reducer(state, action) {
  switch (action.type) {
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.toSpliced(action.index, 1) // 使用toSpliced创建新数组
      };
    default:
      return state;
  }
}

数据处理管道： 在数据处理管道中，我们需要对数据进行一系列的转换。使用toSpliced() 可以确保每个转换步骤都不会修改原始数据，从而保证数据的完整性。

const data = [1, 2, 3, 4, 5];
const processedData = data
  .toSpliced(0, 1)  // 删除第一个元素
  .toSpliced(2, 0, 6) // 在索引2处插入6
  .map(x => x * 2); // 每个元素乘以2
console.log(processedData); // 输出: [ 4, 6, 12, 8, 10 ]

撤销/重做功能： 在一些需要支持撤销/重做功能的应用中，我们可以使用toSpliced() 来记录每次修改后的状态，从而实现撤销和重做。

兼容性考量：新技术的代价

toSpliced() 是一个相对较新的方法，目前并非所有浏览器都完全支持。在使用之前，最好检查一下浏览器的兼容性。

现代浏览器： Chrome 110+, Firefox 115+, Safari 16+, Edge 110+ 都已经支持。
旧版本浏览器： 对于不支持 toSpliced() 的浏览器，可以使用polyfill来提供兼容性支持。可以使用例如core-js 这样的库来填充这个方法。

Polyfill示例：自己动手，丰衣足食

if (!Array.prototype.toSpliced) {
  Array.prototype.toSpliced = function (start, deleteCount, ...items) {
    const newArray = [...this]; // 创建原始数组的副本
    newArray.splice(start, deleteCount, ...items); // 在副本上执行splice
    return newArray; // 返回副本
  };
}

这段代码首先检查Array.prototype 上是否已经存在 toSpliced 方法。如果不存在，则创建一个新的方法，该方法会创建一个原始数组的副本，然后在副本上执行 splice 操作，并返回副本。

总结：拥抱不可变性，迎接更美好的未来

toSpliced() 的出现，为JavaScript数组操作带来了新的选择。它让我们在享受数组的强大功能的同时，也能保持数据的不可变性，从而编写出更加健壮、可维护的代码。虽然兼容性需要考虑，但它所带来的好处是显而易见的。让我们拥抱 toSpliced()，拥抱不可变性，迎接更美好的编程未来！

结束语：提问时间

好了，今天的讲座就到这里。不知道大家有没有听明白？现在是提问时间，欢迎大家踊跃提问，我会尽力解答。就算没听明白也没关系，毕竟罗马不是一天建成的，代码也不是一天写好的。多多练习，多多思考，你也能成为toSpliced() 的高手！谢谢大家！

发表回复 取消回复

发表回复取消回复