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

列印頁面