JavaScript Array toSpliced 方法：高效处理数组的现代解决方案
toSpliced 是 JavaScript 数组的一个新方法，用于在不修改原数组的情况下，从数组中删除或替换部分元素，并返回一个新数组。该方法在处理数组时非常实用，尤其适合需要保持原始数据不变的场景。
快速解决
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toSpliced(2, 0, 99);
// 从索引 2 开始插入 99，不删除任何元素，返回 [1, 2, 99, 3, 4, 5]
常用方法
| 方法名称 | 说明 | 使用频率 | 示例用途 |
|---|---|---|---|
toSpliced |
返回新数组，支持插入/删除元素 | 高 | 替换数组中的一部分元素 |
slice |
提取数组的一部分并返回新数组 | 高 | 复制数组或提取子数组 |
splice |
修改数组内容，直接在原数组上操作 | 中 | 删除或替换数组中的元素 |
concat |
合并两个或多个数组 | 中 | 在数组末尾添加新元素 |
filter |
过滤出符合条件的元素 | 中 | 创建新数组，包含原数组的子集 |
map |
将数组元素转换为新的值 | 中 | 修改数组中每个元素的值 |
flat |
展平嵌套数组 | 低 | 将二维数组转换为一维数组 |
reduce |
累积器函数处理数组 | 低 | 计算数组总和或转换结构 |
详细说明
插入元素而不修改原数组
const arr = [1, 2, 3, 4];
const newArr = arr.toSpliced(2, 0, 99);
// 插入 99 到索引 2 的位置，不删除任何元素
// arr 仍然是 [1, 2, 3, 4]
// newArr 是 [1, 2, 99, 3, 4]
替换元素并返回新数组
const arr = [1, 2, 3, 4];
const newArr = arr.toSpliced(1, 2, 5, 6);
// 从索引 1 开始，删除 2 个元素 (2, 3)，并插入 5 和 6
// arr 仍然是 [1, 2, 3, 4]
// newArr 是 [1, 5, 6, 4]
删除元素并返回新数组
const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(2, 2);
// 从索引 2 开始，删除 2 个元素 (3, 4)
// arr 仍然是 [1, 2, 3, 4, 5]
// newArr 是 [1, 2, 5]
高级技巧
与函数配合使用，生成动态新数组
const numbers = [10, 20, 30, 40, 50];
const result = numbers.toSpliced(1, 2, ...[15, 25].map(n => n * 2));
// 删除索引 1 到 2 的元素 (20, 30)，并插入 30 和 50（15*2 和 25*2）
// result 是 [10, 30, 50, 40, 50]
批量替换多个位置的元素
const data = [1, 2, 3, 4, 5];
const modifiedData = data.toSpliced(1, 1, 11).toSpliced(3, 1, 44);
// 第一次替换索引 1 的元素 2 为 11，得到 [1, 11, 3, 4, 5]
// 第二次替换索引 3 的元素 4 为 44，得到 [1, 11, 3, 44, 5]
// data 仍然是 [1, 2, 3, 4, 5]
常见问题
Q1：toSpliced 和 splice 的区别是什么？
A：splice 会直接修改原数组，而 toSpliced 不会，它返回一个新数组，适用于不可变数据处理场景。
Q2：toSpliced 的参数含义是什么？
A：toSpliced(start, deleteCount, ...items)
start：开始修改的位置索引deleteCount：要删除的元素数量...items：要插入的新元素列表
Q3：如果 deleteCount 为 0 会怎样？
A：不会删除任何元素，只是在指定位置插入新元素，返回的新数组会包含这些插入的内容。
Q4：toSpliced 能否用于嵌套数组？
A：可以，但不会自动展开嵌套结构。如果需要展开，应结合 flat 方法使用。
总结
使用 JavaScript Array 的 toSpliced 方法，可以安全地修改数组内容并返回新数组，避免了原数组被污染的问题，是处理数组时非常实用的现代方法。