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

上週，我們研究了在 JavaScript 中向數組添加項目的不同方法。今天，您將學習如何在 JavaScript 中從數組中刪除單個和多個元素。

JavaScript 提供了許多從數組中刪除元素的方法。您可以刪除一個項目：

• 按其數字索引。
• 按其價值。
• 從數組的開頭和結尾。

按索引刪除元素

如果您已經知道數組元素索引，只需使用 Array.splice() 方法將其從數組中刪除。此方法通過刪除或替換現有元素來修改原始數組，並返回已刪除的元素（如果有）。

假設您有以下數組，並且您想要刪除索引 2 處的元素 (Cherry ):

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 1);

console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana']
console.log(removed); // ['Cherry']

想要移除多個 項目？只需將計數傳遞給 Array.splice() 如下：

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 2);

console.log(fruits); // ['Apple', 'Orange', 'Banana']
console.log(removed); // ['Cherry', 'Mango']

Array.splice() 的第二個參數 是要刪除的元素數。請記住 Array.splice() 就地修改數組並返回一個包含已刪除元素的新數組。

按值刪除元素

如果你知道元素值，首先使用 Array.indexOf() 方法找到數組中元素的索引，然後使用 Array.splice() 刪除它。

這是一個例子：

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const index = fruits.indexOf('Mango');

if (index > -1) {
    fruits.splice(index, 1);
}

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Banana']

注意 Array.indexOf() 方法返回第一個匹配元素的索引。如果數組包含多個具有相同值的元素，則只會刪除第一個元素。

要從數組中過濾掉所有具有相同值的元素，請使用 Array.filter() 替代方法：

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const filtered = fruits.filter(fruit => fruit !== 'Mango');

console.log(filtered); // ['Apple', 'Cherry', 'Banana']

Array.filter() 方法創建一個新數組，其中填充了所有通過特定條件的數組元素。此方法不會修改原始數組。查看本文以了解有關 Array.filter() 的更多信息 方法。

從數組末尾刪除一個元素

Array.pop() 方法可用於從數組末尾刪除元素。此方法移除最後一個元素並返回它：

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.pop();

console.log(fruits); // ['Apple', 'Mango', 'Cherry', 'Mango']
console.log(elem); // Banana

從數組的開頭刪除一個元素

Array.shift() 方法的工作原理與 Array.pop() 完全相同 除了它從數組的開頭刪除一個元素。所有其他元素都移動到較低的索引。

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.shift();

console.log(fruits); // ['Mango', 'Cherry', 'Mango', 'Banana']
console.log(elem); // Apple

從數組中刪除所有元素

要從數組中刪除所有元素，只需設置數組的 length 屬性為 0：

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

// empty an array
fruits.length = 0

console.log(fruits); // []

查看這篇文章，了解更多關於 JavaScript 數組以及如何使用它們將多條信息存儲在一個變量中的信息。