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

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()否移除多个匹配项，返回新数组

根据你的具体需求，选择合适的方法可以提高代码的效率和可读性。希望本文能帮助你更好地掌握 JavaScript 中数组的操作！