当前位置：首页 > news >正文

JS ：移除数组中的指定数据

news 来源：原创 2025/5/15 9:15:13

1. `Array.prototype.filter()` 方法

filter() 方法会创建一个新数组，包含所有通过测试的元素。可以通过过滤掉不需要的元素来实现移除。

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

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

优点：

不会修改原数组，返回一个新数组。
适合移除多个匹配项。

缺点：

如果需要修改原数组，需要重新赋值。

2. `Array.prototype.splice()` 方法

splice() 方法可以直接修改原数组，删除指定索引的元素。

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]

优点：

直接修改原数组。
适合移除单个匹配项。

缺点：

只能移除第一个匹配项，如果需要移除所有匹配项需要循环。

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

结合 indexOf() 和 slice()，可以创建一个新数组，排除指定元素。

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]
}

优点：

不会修改原数组。
适合移除单个匹配项。

缺点：

代码略显复杂。

4. `Array.prototype.reduce()` 方法

reduce() 方法可以通过遍历数组，创建一个新数组，排除指定元素。

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]

优点：

灵活，适合复杂的移除逻辑。
不会修改原数组。

缺点：

代码略显复杂。

5. 使用 `Set` 结构

如果需要移除多个重复项，可以将数组转换为 Set，然后再转换回数组。

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]

优点：

可以移除所有匹配项。
适合去重场景。

缺点：

需要额外转换为 Set。

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

通过遍历数组，将不需要移除的元素添加到新数组中。

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]

优点：

不会修改原数组。
适合移除多个匹配项。

缺点：

代码略显冗长。

总结

方法	是否修改原数组	适合场景
`filter()`	否	移除多个匹配项，返回新数组
`splice()`	是	移除单个匹配项，直接修改原数组
`indexOf()` + `slice()`	否	移除单个匹配项，返回新数组
`reduce()`	否	复杂移除逻辑，返回新数组
`Set`	否	去重并移除多个匹配项
`forEach()` + `push()`	否	移除多个匹配项，返回新数组