本文介绍如何在不改变其余元素顺序的前提下，仅删除数组中具有特定 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 是语义清晰、性能优异、易于维护的标准解法。
