如何從JavaScript中的數組中刪除項目

JavaScript提供了許多從數組中刪除項目的方法。學習規範的方法,並使用普通的JavaScript找出所有可用的選項

這裡有幾種方法使用JavaScript從數組中刪除項目

所有描述的方法不要改變原始數組,而是創建一個新的。

如果您知道項目的索引

假設您有一個數組,並且想要刪除一個位置適當的項目i

一種方法是使用slice()

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 2
const filteredItems = items.slice(0, i).concat(items.slice(i + 1, items.length))
// ["a", "b", "d", "e", "f"]

slice()使用接收到的索引創建一個新數組。我們從頭到要刪除的索引創建一個新數組,並從刪除後的第一個位置到數組的末尾連接另一個數組。

如果你知道價值

在這種情況下,一個不錯的選擇是使用filter(),它提供了更多陳述式的方法:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]

這使用了ES6箭頭功能。您可以使用傳統功能來支持較舊的瀏覽器:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})
// ["a", "b", "d", "e", "f"]

或者,您可以使用Babel並將ES6代碼重新編譯回ES5,以使其更易於被舊的瀏覽器使用,但仍可以在代碼中編寫現代的JavaScript。

刪除多個項目

如果要刪除多個項目而不是單個項目怎麼辦?

讓我們找到最簡單的解決方案。

按索引

您可以只創建一個函數並刪除一系列項:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) => items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3) filteredItems = removeItem(filteredItems, 5) //[“a”, “b”, “d”, “e”]

按價值

您可以在回調函數中搜索包含項:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

避免突變原始數組

splice()(不要與slice())更改原始數組,應避免使用。

免費下載我的JavaScript初學者手冊


更多js教程: