JavaScript - Array splice() 方法

JavaScript 的 Array.splice() 方法用于通过删除或替换现有元素或添加新元素来修改数组的内容。它接受参数作为起始索引、要删除的元素数量以及要添加的元素（可选）。然后它返回一个包含已删除元素的数组。例如，array.splice(3, 5) 从索引 3 开始删除五个元素。

此方法不会为结果创建新数组，而是覆盖原始数组。

语法

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

array.splice(start, deleteCount, item1, item2, ..., itemN)

参数

此方法接受三个参数。下面描述了相同的内容：

start − 要添加或删除元素的索引。如果为负数，则从数组末尾开始计数。
deleteCount − 指定要从数组中删除的元素数量。如果为 0，则不删除任何元素。
item1, ..., itemN − 要添加到数组的元素，从起始索引开始。

返回值

此方法返回一个包含已删除元素的数组。如果未删除任何元素，则返回一个空数组。

示例

示例 1

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

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

输出

Lion,Cheetah

示例 2

如果 splice() 方法的“deleteCount”参数提供为 0，则不会从 animals 数组中删除任何元素。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2, 0);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

输出

Lion,Cheetah,Tiger,Elephant,Dinosaur

示例 3

以下程序在索引位置 2 之前删除 0（零）个元素，并插入新元素“Elephant”。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 0, "Elephant");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

输出

如我们所见，元素“Elephant”在索引位置 2 插入，而无需删除任何现有元素。

Lion,Cheetah,Elephant,Tiger

示例 4

以下程序在索引位置 2 之前删除 0（零）个元素，并插入两个新元素，即“Elephant”和“Dinosaur”。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 0, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

输出

如我们所见，元素“Elephant”和“Dinosaur”在索引位置 2 插入，而无需删除任何现有元素。

Lion,Cheetah,Elephant,Dinosaur,Tiger

示例 5

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2, 2);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

执行程序后，splice() 方法将从数组中删除“Tiger”和“Dinosaur”。

输出

Lion,Cheetah,Dinosaur

示例 6

在这里，我们正在删除索引位置 2 处的 1 个元素，并插入一个新元素“Elephant”。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 1, "Elephant");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

执行程序后，将删除元素“tiger”，并将“elephant”插入该索引。

输出

Lion,Cheetah,Elephant

示例 7

在这里，我们正在删除索引位置 2 处的 1 个元素，并插入两个新元素“Elephant”和“Dinosaur”。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 1, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

执行程序后，将删除元素“tiger”，并将元素“elephant”和“Dinosaur”插入。

输出

Lion,Cheetah,Elephant,Dinosaur

示例 8

在下面的示例中，我们正在从索引 -2（从数组末尾开始计数）删除 1 个元素。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(-2, 1);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

执行程序后，将删除元素“Elephant”。

输出

Lion,Cheetah,Tiger,Dinosaur

示例 9

在这里，我们正在从索引 -2（从数组末尾开始计数）删除 1 个元素，并插入两个新元素“Elephant”和“Dinosaur”。

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(-2, 1, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

执行程序后，将删除元素“Cheetah”，并将“Elephant”和“Dinosaur”删除。

输出

Lion,Elephant,Dinosaur,Tiger

打印页面