JavaScript - 数组 toSpliced() 方法

在 JavaScript 中，Array.toSpliced() 方法用于通过删除或替换现有元素和/或添加新元素来修改数组。此方法类似于 JavaScript 的 Array.splice() 方法。

toSpliced() 方法可修改多个数组元素:它从数组中从给定索引处开始删除给定数量的元素，然后在同一索引处插入给定元素。此方法不会修改/覆盖原始数组;而是返回一个新数组。

语法

以下是 JavaScript Array.toSpliced() 方法的语法 -

toSpliced(start, deleteCount, item1, item2, ..., itemN)

参数

此方法接受以下参数 -

• start - 开始更改数组的索引。
• deleteCount(可选)- 要删除的元素数量。如果省略或为 0，则不会删除任何元素。
• item1、item2、...、itemN(可选)- 要添加到数组起始索引处的元素。

返回值

此方法返回一个包含修改后元素的新数组。

示例

示例 1

在下面的示例中，我们使用 JavaScript 数组的 toSpliced() 方法删除从索引位置 2 开始的所有数组元素。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2);
      document.write(result);
   </script>
</body>
</html>

执行程序后，索引位置 2 的所有元素都将被删除。

输出

apple,banana

示例 2

如果 toSpliced() 方法的 'deleteCount' 参数设置为 0，则不会从 animals 数组中删除任何元素。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0);
      document.write(result);
   </script>
</body>
</html>

输出

正如输出所示，数组中没有元素被删除。

apple,banana,cherry,dates

示例 3

以下程序删除索引位置 2 之前的 0(零)个元素，并插入新元素"Pineapple"。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0, "Pineapple");
      document.write(result);
   </script>
</body>
</html>

输出

正如输出所示，元素 Pineapple 被插入到索引位置 2，且未移除任何现有元素。

apple,banana,Pineapple,cherry,dates

示例 4

以下程序移除索引位置 2 之前的 0(零)个元素，并插入两个新元素，即 Pineapple 和 Grapes。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0, "Pineapple", "Grapes");
      document.write(result);
   </script>
</body>
</html>

元素 Pineapple 和 Grapes 被插入到索引位置 2，而不会移除任何现有元素。

输出

apple,banana,Pineapple,Grapes,cherry,dates

示例 5

在下面的示例中，我们从索引位置 2 开始移除 2 个元素。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 2);
      document.write(result);
   </script>
</body>
</html>

程序执行后，从数组中删除了 cherry 和 dates。

输出

apple,banana

示例 6

这里，我们删除了索引位置 2 处的 1 个元素，并插入一个新元素 Grapes。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 1, "Grapes");
      document.write(result);
   </script>
</body>
</html>

执行程序后，元素 cherry 将被移除，并将 Grapes 插入到该索引中。

输出

apple,banana,Grapes,dates

示例 7

在此示例中，我们移除索引位置 2 处的 1 个元素，并插入两个新元素 Grapes 和 Pineapple。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 1, "Grapes", "Pineapple");
      document.write(result);
   </script>
</body>
</html>

程序执行后，元素 cherry 将被移除，元素 Grapes 和 Pineapple 将被插入。

输出

apple,banana,Grapes,Pineapple,dates

示例 8

这里，我们从索引 -2(从数组末尾开始计数)处移除 1 个元素。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(-2, 1);
      document.write(result);
   </script>
</body>
</html>

程序执行后，元素 cherry 将被删除。

输出

apple,banana,dates

示例 9

这里，我们从索引 -2(从数组末尾开始计数)处删除 1 个元素，并插入两个新元素 Pineapple 和 Grapes。

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(-2, 1, "Pineapple", "Grapes");
      document.write(result);
   </script>
</body>
</html>

执行程序后，元素 cherry 将被删除，Pineapple 和 Grapes 也将被删除。

输出

apple,banana,Pineapple,Grapes,dates