各位观众老爷，今天咱们来聊聊JavaScript里一个挺新鲜的玩意儿：Array.prototype.toSpliced()。 啥？你问我这玩意儿干啥的？简单来说，它就是数组界的“复制粘贴+剪切”加强版，而且最重要的是，它能帮你搞定不可变数组的操作，让你的代码更优雅、更安全。准备好了吗？咱们这就开讲！
一、splice()的那些事儿：老朋友，新问题
在深入toSpliced()之前，咱们先回顾一下老朋友splice()。这哥们儿的功能很强大，可以在数组里删除、插入、替换元素，简直是数组操作的一把瑞士军刀。
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 1, 'a', 'b'); // 从索引2开始，删除1个元素，插入'a'和'b'
console.log(arr); // 输出: [1, 2, 'a', 'b', 4, 5]
console.log(removed); // 输出: [3]看到没？splice()直接修改了原始数组arr。这在很多情况下是没问题的，甚至很方便。但是，在某些场景下，我们希望保持原始数组不变，创建一个新的数组，这就是问题所在了。
问题来了：不可变性！
不可变性（Immutability）是函数式编程的一个重要概念。它指的是数据一旦创建，就不能被修改。这样做的好处多多：
- 易于调试： 因为数据不会被意外修改，更容易追踪bug。
- 并发安全： 多个线程可以安全地访问不可变数据，无需担心数据竞争。
- 状态管理： 在React、Redux等框架中，不可变数据对于状态管理至关重要。
传统的JavaScript数组方法，比如splice()、push()、pop()等，都是会修改原始数组的。为了实现不可变性，我们通常需要手动复制数组，然后再进行操作，比较麻烦。
二、toSpliced()：不可变数组的救星
toSpliced()的出现，就是为了解决这个问题。它会返回一个新的数组，其中包含了经过删除、插入、替换操作后的结果，而原始数组保持不变。
语法如下：
newArray = array.toSpliced(start, deleteCount, ...items)start: 开始修改数组的索引位置。deleteCount: 可选，指定要删除的元素个数。如果为0，则不删除任何元素。...items: 可选，要添加到数组中的元素。
举个栗子：
const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(2, 1, 'a', 'b');
console.log(arr); // 输出: [1, 2, 3, 4, 5] (原始数组未被修改)
console.log(newArr); // 输出: [1, 2, 'a', 'b', 4, 5] (新数组)看到了吗？arr保持不变，newArr包含了新的结果。这就是toSpliced()的魅力！
三、toSpliced()的各种姿势：实战演练
光说不练假把式，咱们来几个实际的例子，看看toSpliced()在不同场景下的应用。
1. 删除元素：
const arr = ['apple', 'banana', 'cherry', 'date'];
const newArr = arr.toSpliced(1, 2); // 从索引1开始，删除2个元素
console.log(newArr); // 输出: ['apple', 'date']2. 插入元素：
const arr = [1, 2, 5, 6];
const newArr = arr.toSpliced(2, 0, 3, 4); // 从索引2开始，不删除元素，插入3和4
console.log(newArr); // 输出: [1, 2, 3, 4, 5, 6]3. 替换元素：
const arr = ['a', 'b', 'c', 'd'];
const newArr = arr.toSpliced(1, 2, 'x', 'y', 'z'); // 从索引1开始，删除2个元素，插入'x', 'y', 'z'
console.log(newArr); // 输出: ['a', 'x', 'y', 'z', 'd']4. 没有deleteCount：
如果你省略了deleteCount参数，toSpliced()会删除从start开始到数组末尾的所有元素。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(2); // 从索引2开始，删除到末尾
console.log(newArr); // 输出: [1, 2]5. start超出范围：
如果start大于数组的长度，toSpliced()会直接返回原数组的浅拷贝，不会进行任何修改。
const arr = [1, 2, 3];
const newArr = arr.toSpliced(5, 1, 'a');
console.log(newArr); // 输出: [1, 2, 3] (浅拷贝)
console.log(arr === newArr); // 输出: false (是不同的数组)6. 负数索引：
toSpliced()也支持负数索引，表示从数组末尾开始计数。 例如，-1表示数组的最后一个元素，-2表示倒数第二个元素，以此类推。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(-2, 1, 'a'); // 从倒数第二个元素开始，删除1个元素，插入'a'
console.log(newArr); // 输出: [1, 2, 3, 'a', 5]四、toSpliced() vs splice()：一场友好的PK
为了更好地理解toSpliced()，咱们把它和splice()放在一起比较一下。
| 特性 | splice() |
toSpliced() |
|---|---|---|
| 修改原始数组 | 是 | 否 |
| 返回值 | 被删除的元素组成的数组 | 修改后的新数组 |
| 不可变性 | 不支持 | 支持 |
| 应用场景 | 需要直接修改数组的场景 | 需要保持原始数组不变的场景 |
总结：
- 如果你需要直接修改数组，并且不需要保持原始数组不变，那么
splice()依然是一个不错的选择。 - 如果你需要保持原始数组不变，并且创建一个新的数组，那么
toSpliced()是更好的选择。
五、toSpliced()的兼容性：别高兴太早
虽然toSpliced()很香，但需要注意的是，它是一个相对较新的特性。截至目前 (2024年1月)，它已经被大多数现代浏览器支持，包括 Chrome 110+, Firefox 115+, Safari 16+, Edge 110+。
但是，对于一些老旧的浏览器，可能不支持toSpliced()。如果你需要兼容这些浏览器，可以使用polyfill。
polyfill方案：
if (!Array.prototype.toSpliced) {
Array.prototype.toSpliced = function (start, deleteCount, ...items) {
const arr = this.slice(); // 创建原始数组的浅拷贝
arr.splice(start, deleteCount, ...items); // 在拷贝的数组上执行 splice
return arr; // 返回修改后的拷贝数组
};
}这段代码首先检查Array.prototype上是否已经存在toSpliced方法。如果不存在，就定义一个toSpliced方法，它的实现方式是先创建一个原始数组的浅拷贝，然后在拷贝的数组上执行splice操作，最后返回修改后的拷贝数组。
六、toSpliced()与其他不可变数组操作：更上一层楼
除了toSpliced()，JavaScript还提供了一些其他的不可变数组操作方法，比如：
toReversed(): 反转数组，返回一个新数组。toSorted(): 排序数组，返回一个新数组。with(index, value): 替换指定索引位置的元素，返回一个新数组。
这些方法和toSpliced()一起，可以让你更方便地进行不可变数组操作，让你的代码更简洁、更易读。
举个例子：
const arr = [3, 1, 4, 1, 5, 9, 2, 6];
// 先排序，然后替换索引为2的元素
const newArr = arr.toSorted().with(2, 'x');
console.log(arr); // 输出: [3, 1, 4, 1, 5, 9, 2, 6] (原始数组未被修改)
console.log(newArr); // 输出: [1, 1, 'x', 2, 3, 4, 5, 6]七、使用场景：让你的代码更优雅
toSpliced()在以下场景中特别有用：
- React/Redux等框架中的状态管理： 保持状态的不可变性，避免意外修改。
- 函数式编程： 编写纯函数，避免副作用。
- 并发编程： 安全地访问共享数据，避免数据竞争。
- 撤销/重做功能： 保存历史状态，方便进行撤销/重做操作。
八、性能考量：鱼和熊掌不可兼得？
虽然toSpliced()带来了不可变性的好处，但需要注意的是，它会创建新的数组，这可能会带来一些性能上的开销。
- 空间复杂度： 需要额外的内存空间来存储新的数组。
- 时间复杂度： 复制数组需要一定的时间。
因此，在使用toSpliced()时，需要在不可变性和性能之间进行权衡。如果对性能要求非常高，并且可以接受修改原始数组，那么splice()可能更适合你。
九、总结：拥抱不可变性，拥抱toSpliced()
Array.prototype.toSpliced()是JavaScript数组操作的一个重要补充，它让我们可以更方便地进行不可变数组操作，提高代码的可维护性和安全性。虽然它可能会带来一些性能上的开销，但在很多场景下，不可变性带来的好处远大于性能上的损失。
所以，下次你在处理数组时，不妨考虑一下toSpliced()，让你的代码更上一层楼！
好了，今天的讲座就到这里。希望大家有所收获，咱们下期再见！