JS数组怎么按值删除指定元素

按值删除元素概览：不可变过滤与原地删除的核心路径

一、最常用方案：使用 filter() 纯函数过滤（删除全部匹配值）

在现代 JavaScript 与前端组件化开发（例如 React 或 Vue）中，不可变数据理念非常普及。如果希望在删除指定元素的同时不破坏原数组，filter() 是最简洁优雅的方法。

filter() 会遍历数组中的每一项，执行你传入的断言测试函数。只有返回值为 true 的元素才会被放入新数组，因此只需将测试条件写为“不等于目标值”即可过滤掉所有匹配项。

const numbers = [10, 25, 30, 25, 40];
const target = 25;

// 过滤掉所有等于 25 的项，返回新数组
const result = numbers.filter(item => item !== target);

console.log(result);   // 示例输出: [10, 30, 40]
console.log(numbers);  // 示例输出: [10, 25, 30, 25, 40] (原数组保持不变)

这段代码的操作逻辑有三个关键特点：

• 自动剔除所有重复项：如果数组中存在多个与 target 相等的元素（如上例中的两个 25），它们都会在一次遍历中被全部剔除。
• 原数组无副作用：原数组 numbers 依然完好无损，在多模块数据共享或状态驱动视图时避免意外修改引发的数据冲突。
• 时间复杂度平稳：单次遍历完成筛选，时间复杂度为稳定的大 O(n)。

图1：Array.prototype.filter() 数据流与内存表现

二、原地修改：使用 indexOf() 搭配 splice()（删除首个匹配值）

在处理超长数据或对内存分配敏感的场景中，如果明确需要修改原数组本身，可以使用 indexOf() 定位元素位置，再调用 splice() 移除该位置上的项。

操作分为两步：首先通过 arr.indexOf(target) 获取目标值在数组中第一次出现的索引下标；随后判断该索引是否存在。只有当索引不为 -1 时，才调用 arr.splice(index, 1) 剔除该元素。

const fruits = ['apple', 'banana', 'orange', 'banana'];
const target = 'banana';

// 步骤1：查找目标值首次出现的下标
const index = fruits.indexOf(target);

// 步骤2：必须先校验索引是否存在，再执行删除
if (index !== -1) {
  fruits.splice(index, 1);
}

console.log(fruits); 
// 示例输出: ['apple', 'orange', 'banana'] (仅删除了首个匹配项，第二个保留)

图2：indexOf() 与 splice() 执行流及边界防错机制

三、原地删除全部匹配项：循环搭配 splice() 的避坑法则

当既需要原地修改原数组，又需要删除所有的相同匹配项时，很多开发者会尝试在 for 循环中边遍历边 splice，这极易引发著名的“下标平移漏删问题”。

1. 为什么正序遍历会出现漏删？

当数组存在相邻重复项（例如 [1, 2, 2, 3]）时，我们在索引 i = 1 处删除了第一个 2。紧接着后面的元素会自动前移补位，第二个 2 的索引从 2 变成了 1。然而下一次循环步进 i++ 让指针移动到了 2，导致移动到索引 1 上的第二个 2 直接被跳过了。

2. 安全做法：采用倒序循环 (Reverse Loop)

解决该问题的最有效方式是从后向前进行倒序遍历。当从高索引向低索引扫描时，即便删除了某一位置的元素，受影响发生前移的只有后方的元素，而指针即将检查的前方元素的索引完全不会改变。

const scores = [60, 80, 80, 95, 80];
const targetScore = 80;

// 从后往前递减遍历，完美避开下标前移导致的漏项问题
for (let i = scores.length - 1; i >= 0; i--) {
  if (scores[i] === targetScore) {
    scores.splice(i, 1);
  }
}

console.log(scores); // 示例输出: [60, 95]

3. 替代做法：while 循环配合 indexOf

另一种直观的方式是结合 while 循环不断检索 indexOf，直到返回值变为 -1 为止：

const tags = ['js', 'css', 'html', 'css'];
let idx;

while ((idx = tags.indexOf('css')) !== -1) {
  tags.splice(idx, 1);
}

console.log(tags); // 示例输出: ['js', 'html']

图3：正序漏删机制与倒序安全遍历底层原理对比

四、进阶场景：对象数组与批量剔除

在实际业务中，数组里的元素往往不仅是基础类型数值或字符串，还可能是对象实体，或者需要根据黑名单同时移除多个指定值。

1. 对象数组：按对象属性值删除

对象属于引用类型，普通的 indexOf({ id: 1 }) 无法匹配内容相同但内存引用不同的对象。此时应借助 findIndex() 或 filter() 搭配谓词函数：

const userList = [
  { id: 101, name: 'Alice' },
  { id: 102, name: 'Bob' },
  { id: 103, name: 'Charlie' }
];

// 场景A：不可变返回新数组（推荐）
const updatedList = userList.filter(user => user.id !== 102);

// 场景B：原地删除指定 id 的对象
const targetIndex = userList.findIndex(user => user.id === 102);
if (targetIndex !== -1) {
  userList.splice(targetIndex, 1);
}

2. 批量剔除：结合 Set 实现高性能多值删除

当需要从长数组中同时剔除多个指定的值时，多次调用 splice 或对每个值做遍历比对会导致 O(n × m) 的高复杂度。借助 ES6 Set 的 has() 方法可以实现 O(1) 的查找性能，将总耗时降为 O(n)：

const allItems = ['A', 'B', 'C', 'D', 'E', 'F'];
const removeList = ['B', 'D', 'F'];

// 构建哈希集合，检索复杂度为 O(1)
const removeSet = new Set(removeList);

const cleanItems = allItems.filter(item => !removeSet.has(item));

console.log(cleanItems); // 示例输出: ['A', 'C', 'E']

五、技术选型决策与全景总结

在面对不同需求时，选用哪种方案应当有清晰的判断依据。以下是按值删除常用方案的综合特性矩阵：

图4：JS 数组按值删除方案决策树与技术选型矩阵

六、容易被忽视的特殊边界情况

• NaN 的比对缺陷：在 JavaScript 中 NaN === NaN 返回 false，因此 [NaN].indexOf(NaN) 会返回 -1，导致无法通过 indexOf 找到 NaN。若需删除 NaN，应使用 findIndex(Number.isNaN) 或 filter(item => !Number.isNaN(item))。
• 弱类型转换差异：indexOf 与 filter 内部使用的是严格相等全等比较（===）。如果数组中存的是数字 5，而传入的目标值是字符串 '5'，则不会被匹配。在执行按值删除前，需确保类型一致或在回调中进行显示类型转换。
• 稀疏数组空槽（Empty Slots）：对于含有空槽的稀疏数组（如 new Array(3)），filter() 会自动忽略空槽，而 for 循环会访问到 undefined。在生产中建议统一使用密集数组。