/

如何從 JavaScript 陣列中移除項目

如何從 JavaScript 陣列中移除項目

在 JavaScript 中，有很多方法可以從陣列中移除項目。學習使用官方推薦的方式，並瞭解其他可以選擇的選項。

以下是一些使用 JavaScript 移除陣列項目的方法。

所有下列方法都不會改變原始陣列，而是創建一個新的陣列。

如果你知道項目的索引

假設你有一個陣列，想要移除位於索引 i 的項目。

一種方法是使用 slice()：

1
2
3
4
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() 是一個很好的選擇，它提供了更加聲明式的方式：

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

這裡使用了 ES6 的箭頭函式。你可以使用傳統函式來支援舊版瀏覽器：

1
2
3
4
5
6
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，以便使其在舊版瀏覽器中也可執行。

移除多個項目

如果你不僅想要移除單個項目，還想要移除多個項目，可以找到最簡單的解決方案。

根據索引

你可以創建一個函式，依次移除項目：

1
2
3
4
5
6
7
8
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"]

根據值

你可以在回調函式中檢查是否包含在內：

1
2
3
4
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() 混淆）會改變原始陣列，應該避免使用。

tags: [“JavaScript”, “Array”, “Remove Item”, “Slice”, “Filter”]