有多種方法可以從 Javascript 中的數組中刪除元素。我們涵蓋了本教程中可以使用的所有方法。

JavaScript 是一種靈活的編程語言，幾乎可以在任何地方運行。您可以在 Web 瀏覽器中運行 JavaScript 應用程序，構建可以在終端中運行的命令行應用程序，可以使用 Cordova 等平台構建移動應用程序，並且可以在 Node.js 等平台上編寫服務器進程。自然地，Linux 是許多 JavaScript 開發人員的首選環境，非常適合學習 Node.js 等工具以及在完成後託管給最終用戶。

JavaScript 數組

數組 是一種 JavaScript 變量，可以在某個位置的列表中保存其他變量或對其他變量的引用。數組構成了大多數應用程序的支柱——它們可能包含待辦事項列表項或多人遊戲中團隊中每個玩家的引用。在閱讀本文之前，我建議閱讀我們關於檢查數組中是否存在值的文章。

使用 splice() 從數組中刪除一個或多個元素 方法

下面是一個包含顏色列表的數組。我們可以使用 splice() 刪除一個或多個連續的項目 方法。 splice 方法在刪除時接受 2 個選項 - 開始和結束索引（位置）。如果它們相同，則將刪除單個項目：

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.splice(3, 3); // Remove item at index 3 
console.log(colours); // Returns ["red", "green", "blue", "orange", "pink"] 
console.log(removed); // Returns ["purple"]

注意：

• 請記住，索引從 0 開始計算，而不是 1：所以“紅色”在索引 0 處，“藍色”在索引 3 處
• 我們指的是元素 和價值 – 元素是數組中的項目。它有一個索引（位置）和一個值。您可以在不同位置擁有多個具有相同值的元素
• console.log() 方法用於將結果的值輸出到控制台，以便查看
• 我們添加了一條評論：// 之後的文本 不會被 JavaScript 解釋，因此您可以在代碼中留下自己的註釋
• 拼接() 已返回一個包含已刪除值的數組，該數組已分配給名為 removed 的變量
• 顏色 數組不再包含值為“purple”的元素
• 你沒有有 要將刪除的值分配給變量，您只需調用 array.splice() 無需將其分配給任何東西即可簡單地刪除和丟棄項目
• 小心！當使用 splice() 從數組中刪除元素時 ，其餘元素的索引將隨著它們的位置變化而變化！

使用 splice() 刪除多個順序項

要刪除多個項目，請提供開始索引和結束索引：

var colours = ["red", "green", "blue", "purple", "orange", "pink"];
var removed = colours.splice(3, 5);// Remove items at indexes 3 to 5
console.log(colours); // Returns ["red", "green", "blue"]
console.log(removed); // Returns  ["purple", "orange", "pink"]

使用 pop() 從數組中刪除最後一個元素 方法

要刪除數組中的最後一項，請調用數組 pop() 方法。 pop() 方法將返回刪除的元素，因此可以選擇將其分配給另一個變量：

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["red", "green", "blue", "purple", "orange"] 
console.log(removed); // Returns "pink"

• 不同於 splice() , pop() 單獨返回已刪除項目的值，而不是在數組中
• 如果數組為空，則值為 undefined 將由 pop() 返回 因為沒有刪除任何值

使用 shift() 從數組中刪除第一個元素 方法

shift() 方法的工作方式與 pop() 幾乎相同 方法，只是它刪除並返回數組的第一個元素：

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["green", "blue", "purple", "orange", "pink"]
console.log(removed); // Returns "red"

• 小心（再次）！當使用 shift() 從數組中移除元素時 ，其餘元素的索引將隨著它們的位置變化而變化！

使用 filter() 根據值從數組中刪除元素

如果要根據一組條件從數組中刪除項目，可以使用 filter() 方法。 filter() 方法接受一個函數，該函數將用於測試數組中的每個項目。例如，您可能希望從數組中刪除所有奇數，或者從數組中刪除超過一定長度的所有字符串：

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours = colours.filter(word => word.length <= 4); // Removes all strings with more than 4 letters 
console.log(colours); // Returns ["red", "blue", "pink"]

• filter() 方法不 更新數組的值，所以我們重新分配 使用 colours = 將顏色數組的值作為其過濾器函數的結果 – 注意 var 不再使用，因為我們已經在上面的行中定義了變量——我們只是在更新它的值。
• word => word.length <= 4 是一個（非常短的）JavaScript 函數，用於測試單詞是否超過 4 個字符。它將每個數組元素作為一個名為 word 的變量傳遞 ，然後檢查該字符串的長度是否等於或小於 4。
• 如果元素值包含 4 個或更少字符，則比較返回 TRUE，並保留數組元素。否則，它被丟棄。
  • 小心（再次，再次）！當使用 filter() 從數組中刪除元素時 ，其餘元素的索引將隨著它們的位置變化而變化！

使用 delete 從數組中刪除單個元素

如果您想從數組中刪除一個元素，但不希望其他元素的索引發生變化 使用刪除 JavaScript 運算符

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
delete colours[3]; 
console.log(colours); // Returns ["red", "green", "purple", "orange", "pink"]

• 上面返回的數組看起來和 if splice() 一樣 被使用了，但不是！
• 在 splice() 的例子中 使用時，值為“purple”的元素的索引為2
• 在上面的例子中刪除 被使用時，值為“purple”的元素的索引仍然是 3，就像它在原始數組中一樣。 數組中存在“藍色”值之前的空白

通過改變數組的長度來移除數組末尾的多個值

從數組末尾刪除多個項目的快捷方式是更改長度 數組的屬性：

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours.length = 3; 
console.log(colours); // Returns ["red", "green", "blue]

• 數組現在只包含 3 個元素，因為它的 長度 設置為 3
• 這些元素位於索引 0、1 和 2 處——我們設置了 長度 使用總數，但索引仍然從 0 開始！

結論

從數組中刪除元素是您在開發應用程序和管理正在收集和生成的數據時日常使用的基本 JavaScript 函數之一。有多種方法可以做到這一點，您選擇使用哪一種取決於結果數組的外觀。要了解有關 JavaScript 數組和函數的更多信息，請查看其他 JavaScript 文章！