如何精确删除数组中指定ID的一个重复元素

本文介绍如何在不改变其余元素顺序的前提下，仅删除数组中具有特定 id 的第一个匹配对象，适用于需逐步去重或模拟“点击一次删一个”的交互场景。

本文介绍如何在不改变其余元素顺序的前提下，仅删除数组中具有特定 id 的第一个匹配对象，适用于需逐步去重或模拟“点击一次删一个”的交互场景。

在处理数组中的重复对象时，常见需求并非一次性清除所有重复项（如用 filter() + Set 去重），而是按需、可控地移除单个实例——例如用户点击“删除一个 ID=1 的条目”，此时应仅剔除首个匹配项，保留其余相同 ID 的对象。

实现该逻辑最简洁可靠的方式是结合 findIndex() 定位目标索引，再用 splice() 原地删除一项：

const obj = [  { id: 1, name: 'A' },  { id: 1, name: 'A' },  { id: 1, name: 'A' },  { id: 2, name: 'A' },  { id: 2, name: 'A' }];const targetId = 1;const indexToRemove = obj.findIndex(item => item.id === targetId);if (indexToRemove !== -1) {  obj.splice(indexToRemove, 1); // 删除 1 个元素}console.log(obj);// 输出：// [//   { id: 1, name: 'A' },//   { id: 1, name: 'A' },//   { id: 2, name: 'A' },//   { id: 2, name: 'A' }// ]

✅ 关键点说明：

• findIndex() 返回第一个满足条件的索引（若无匹配则返回 -1），确保只定位首个目标；
• splice(index, 1) 是原地修改操作，高效且语义明确（删除从 index 开始的 1 个元素）；
• 不依赖 filter() 或 reduce() 等创建新数组的方法，节省内存，也便于绑定到按钮点击事件中多次调用（每次删一个）。

⚠️ 注意事项：

• 若需支持不可变数据流（如 React 状态更新），请改用 toSpliced()（ES2023 新增，兼容性需检查）或构造新数组：

  const newObj = [...obj.slice(0, indexToRemove), ...obj.slice(indexToRemove + 1)];

• 切勿在循环中直接 splice() 并继续遍历原数组，否则可能跳过后续元素（索引偏移）；本方案因只执行一次，无此风险。

总结：当业务要求“每次仅移除一个指定 ID 的对象”时，findIndex + splice 是语义清晰、性能优异、易于维护的标准解法。