JavaScript toSpliced 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 JavaScript 中的 toSpliced 方法来操作数组。

数组拼接

数组拼接是指从数组中删除、替换或添加元素的操作。toSpliced 方法是传统 splice 方法的非破坏性替代方法。它返回一个带有更改的新数组，而原始数组保持不变。

此方法在 ECMAScript 2023 中作为数组复制方法的一部分引入。它提供了一种不可变的方式来修改数组，这在函数式编程和状态管理中特别有用。原始数组在操作后保持不变。

toSpliced 方法接受三个参数：起始索引、删除计数和可选的要插入的项。与 splice 不同，它不会修改原始数组，并且始终返回一个带有更改的新数组。

toSpliced 基本示例

以下示例演示了 toSpliced 方法的基本用法。

main.js

const fruits = ['apple', 'banana', 'cherry'];
const newFruits = fruits.toSpliced(1, 1);

console.log(fruits);    // Original array unchanged
console.log(newFruits); // New array with changes

我们创建一个数组并使用 toSpliced 删除索引为 1 的一个元素。原始数组保持不变。该方法返回一个移除了指定元素的新数组。

$ node main.js
[ 'apple', 'banana', 'cherry' ]
[ 'apple', 'cherry' ]

删除多个元素

toSpliced 方法可以一次删除多个元素。

main.js

const numbers = [1, 2, 3, 4, 5, 6];
const newNumbers = numbers.toSpliced(2, 3);

console.log(numbers);
console.log(newNumbers);

我们从索引 2 开始删除三个元素。原始数组保持完整。新数组包含除要删除的范围中指定的元素之外的所有元素。

$ node main.js
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 6 ]

使用 toSpliced 添加元素

toSpliced() 方法也可以在不删除任何元素的情况下插入新元素。

main.js

const colors = ['red', 'green', 'blue'];
const newColors = colors.toSpliced(1, 0, 'yellow', 'orange');

console.log(colors);
console.log(newColors);

我们在索引 1 处插入两个新颜色，不删除任何元素。删除计数设置为 0。新元素将插入到新数组的指定位置。

$ node main.js
[ 'red', 'green', 'blue' ]
[ 'red', 'yellow', 'orange', 'green', 'blue' ]

替换元素

toSpliced 方法可以通过在一个操作中删除和添加元素来替换元素。

main.js

const letters = ['a', 'b', 'c', 'd', 'e'];
const newLetters = letters.toSpliced(1, 2, 'x', 'y', 'z');

console.log(letters);
console.log(newLetters);

我们用三个新元素替换从索引 1 开始的两个元素。原始数组保持不变。新数组将指定元素替换为新值。

$ node main.js
[ 'a', 'b', 'c', 'd', 'e' ]
[ 'a', 'x', 'y', 'z', 'd', 'e' ]

使用负索引

toSpliced 方法接受负索引，这些索引从数组的末尾开始计数。

main.js

const animals = ['cat', 'dog', 'elephant', 'fox'];
const newAnimals = animals.toSpliced(-2, 1, 'bear');

console.log(animals);
console.log(newAnimals);

我们使用负索引 (-2) 从倒数第二个元素开始。我们将一个元素 ('elephant') 替换为 'bear'。负索引使处理数组末尾附近的元素变得容易。

$ node main.js
[ 'cat', 'dog', 'elephant', 'fox' ]
[ 'cat', 'dog', 'bear', 'fox' ]

来源

数组 toSpliced - 语言参考

在本文中，我们演示了如何使用 toSpliced() 方法在 JavaScript 中操作数组，而不会修改原始数组。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。自 2007 年以来，我一直在撰写编程文章。迄今为止，我撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出所有 JS 数组函数。