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
列印頁面
上一頁
下一頁
廣告