JavaScript - Array toSpliced() 方法

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

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

语法

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

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

参数

此方法采用以下参数：

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

返回值

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

示例

示例 1

在以下示例中，我们使用 JavaScript Array 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

打印页面