JavaScript移除數(shù)組中的指定數(shù)據(jù)詳細示例代碼

更新時間：2025年05月28日 11:01:21 作者：25號底片~

這篇文章主要介紹了JavaScript如何移除數(shù)組中指定數(shù)據(jù)的相關(guān)資料,包括filter（返回新數(shù)組、移除多個）、splice（修改原數(shù)組、移除單個）、Set（去重）、indexOf+slice、reduce及forEach+push等,需要的朋友可以參考下

1. Array.prototype.filter() 方法

filter() 方法會創(chuàng)建一個新數(shù)組，包含所有通過測試的元素。可以通過過濾掉不需要的元素來實現(xiàn)移除。

const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;

const newArray = array.filter(item => item !== itemToRemove);
console.log(newArray); // 輸出: [1, 2, 4, 5]

優(yōu)點：

不會修改原數(shù)組，返回一個新數(shù)組。
適合移除多個匹配項。

缺點：

如果需要修改原數(shù)組，需要重新賦值。

2. Array.prototype.splice() 方法

splice() 方法可以直接修改原數(shù)組，刪除指定索引的元素。

const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;

const index = array.indexOf(itemToRemove);
if (index !== -1) {
    array.splice(index, 1);
}
console.log(array); // 輸出: [1, 2, 4, 5]

優(yōu)點：

直接修改原數(shù)組。
適合移除單個匹配項。

缺點：

只能移除第一個匹配項，如果需要移除所有匹配項需要循環(huán)。

3. Array.prototype.indexOf()和Array.prototype.slice()

結(jié)合 indexOf() 和 slice()，可以創(chuàng)建一個新數(shù)組，排除指定元素。

const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;

const index = array.indexOf(itemToRemove);
if (index !== -1) {
    const newArray = [...array.slice(0, index), ...array.slice(index + 1)];
    console.log(newArray); // 輸出: [1, 2, 4, 5]
}

優(yōu)點：

不會修改原數(shù)組。
適合移除單個匹配項。

缺點：

代碼略顯復雜。

4. Array.prototype.reduce() 方法

reduce() 方法可以通過遍歷數(shù)組，創(chuàng)建一個新數(shù)組，排除指定元素。

const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;

const newArray = array.reduce((acc, item) => {
    if (item !== itemToRemove) {
        acc.push(item);
    }
    return acc;
}, []);
console.log(newArray); // 輸出: [1, 2, 4, 5]

優(yōu)點：

靈活，適合復雜的移除邏輯。
不會修改原數(shù)組。

缺點：

代碼略顯復雜。

5. 使用 Set 結(jié)構(gòu)

如果需要移除多個重復項，可以將數(shù)組轉(zhuǎn)換為 Set，然后再轉(zhuǎn)換回數(shù)組。

const array = [1, 2, 3, 4, 5, 3];
const itemToRemove = 3;

const newArray = Array.from(new Set(array.filter(item => item !== itemToRemove)));
console.log(newArray); // 輸出: [1, 2, 4, 5]

優(yōu)點：

可以移除所有匹配項。
適合去重場景。

缺點：

需要額外轉(zhuǎn)換為 Set。

6. Array.prototype.forEach() 和 Array.prototype.push()

通過遍歷數(shù)組，將不需要移除的元素添加到新數(shù)組中。

const array = [1, 2, 3, 4, 5];
const itemToRemove = 3;

const newArray = [];
array.forEach(item => {
    if (item !== itemToRemove) {
        newArray.push(item);
    }
});
console.log(newArray); // 輸出: [1, 2, 4, 5]

優(yōu)點：

不會修改原數(shù)組。
適合移除多個匹配項。

缺點：

代碼略顯冗長。

總結(jié)

方法	是否修改原數(shù)組	適合場景
`filter()`	否	移除多個匹配項，返回新數(shù)組
`splice()`	是	移除單個匹配項，直接修改原數(shù)組
`indexOf()` + `slice()`	否	移除單個匹配項，返回新數(shù)組
`reduce()`	否	復雜移除邏輯，返回新數(shù)組
`Set`	否	去重并移除多個匹配項
`forEach()` + `push()`	否	移除多個匹配項，返回新數(shù)組