splice, toSpliced

撰写时间：2024-03-10

最新修订：2024-03-10

splice, toSpliced

删除数组元素的同时，添加数组元素。

splice直接在原数组上操作。
toSpliced在原数组的一个副本上操作。原数组不受影响。

原型

*[]splice

numberstart
numberdeleteCount
...numberitems

*[]toSpliced

numberstart
numberdeleteCount
...numberitems

参数

start: 开始删除的元素索引值。

deleteCount: 指定要删除多少个元素。

...items: 要添加的多个数组元素。

返回值

返回由被删除的元素所组成的数组。

如果只有1个元素被删除，则也会返回1个数组，只不过该数组只有1个的元素。

如果没有元素被删除，则也会返回1个数组，只不过该数组是没有任何元素的空数组。

splice方法直接操作原数组，所返回的数组是原数组的引用。
toSpliced在原数组的一个副本上进行操作，原数组未受影响。该方法所返回的数组是新数组。

说明

splice方法最基本的用法，是在原数组中直接删除连续的数组元素。

而在删除数组元素的同时，如果愿意，还可以在删除位置直接添加任意数量的新的数组元素。此时的行为类似于String的replace方法，只不过splice方法根据数组索引值来定位所删除的位置，可自由指定要删除的元素数量，并以可变长参数来插入任意数量的数组元素。

splice方法的价值在于可灵活、高效地重新组合原有数组。

例子

最简单用法

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.splice(6);

从索引值为6的元素开始删除，一直删到最后。

查看原数组：

console.log(arr); // [0, 1, 2, 3, 4, 5]

原数组已经发生改变，说明splice方法是在原数组上直接删除。对此点需多加小心。

splice方法返回值是所删除的元素所组成的数组：

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let deleted = arr.splice(6); console.log(deleted); // [6, 7, 8, 9, 10]

利用这个贴心的功能，我们得以随时再次访问所删除的元素。

参数start的不同情况

首先，参数start并非可选，但却可省略。但省略时，则不会有任何效果。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(); console.log(arr); // [0, 1, 2, 3, 4, 5]

第二，若参数start为正数，且所指定的索引位置超出数组范围，则不会删除任何元素。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(50); // [0, 1, 2, 3, 4, 5]

第三，参数start可为负数，表示从倒数第n个元素删起。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(-2); console.log(arr); // [0, 1, 2, 3]

第四，如果负数的值太小了，超出了数组的范围，则将导致删除所有的元素。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(-20); console.log(arr); // [] empty array

上面代码的效果等同于从第0个元素开始删除：

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(0);

参数deleteCount

参数deleteCount可指定总共需要删除的元素数量。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(1, 3); // [0, 4, 5]

从第1个元素开始删除，共删除3个元素，因此剩下[0, 4, 5]。

如果deleteCount小于或等于0，表示要删除-n或0个元素，则不会删除任何元素。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(1, -5); // [0, 1, 2, 3, 4, 5]

如果deleteCount超出数组元素数量范围，则删除从start开始的所有元素。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(2, 50); // [0, 1]

在删除的同时添加元素

splice在删除数组元素的同时，还可以通过可变长参数items添加任意数量的元素。

let arr = [0, 1, 2, 3, 4, 5]; arr.splice(2, 3, 10, 20, 30); // [0, 1, 10, 20, 30, 5]

先从数组中删除[2, 3, 4]，然后再在被删除的位置添加[10, 20, 30]。

协同展开操作符工作

splice已经足够灵活，但我们还可以协同展开操作符...，让它们如虎添翼。

下面的代码，先删除一部分的数组元素，再添加一组新元素，并将所删除的元素移动原数组的后面。

let itemsToInsert = [10, 20, 30]; let arr = [0, 1, 2, 3, 4, 5]; let deleted = arr.splice(2, 2, ...itemsToInsert); arr = [...arr, ...deleted]; console.log(arr); // [0, 1, 10, 20, 30, 4, 5, 2, 3]

上面，itemsToInsert是来自其他地方的一个数组，由于splice的参数items只接受可变长的元素，因此，上面使用展开操作符...itemsToInsert将该数组元素展开为各个具体的元素，从而满足了splice方法的要求。

deleted记下了原数组中已删除的元素。

而在第5行代码，再次通过展开操作符，我们将已经删除并添加数组元素的数组，再与原已删除的元素进行组合。

参见

参考资源

ECMA 262: Array Objects