JavaScript - 数组 splice() 方法

JavaScript Array.splice() 方法用于修改数组的内容，方法是删除或替换现有元素，或者添加新元素。该方法接受的参数包括起始索引、待删除元素的数量以及待添加元素(可选)。返回一个包含已删除元素的数组。例如，array.splice(3, 5) 将从索引 3 开始删除 5 个元素。

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

语法

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

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

参数

此方法接受三个参数。下文同样描述 -

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

返回值

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

示例

示例 1

在下面的示例中，我们使用 JavaScript 数组 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