JavaScript数组中移除单个指定重复对象实例的实现方案

Lodash 实现 #

需求为删除单个id为Ik6e的对象，无指定删除实例的要求。如果需要和示例输出效果完全一致（即删除最后一个出现的Ik6e），可使用以下代码：

// 定位最后一个匹配项的索引
const targetIndex = _.findLastIndex(data, item => item.id === 'Ik6e');
// 存在匹配项时删除对应位置的元素
if (targetIndex !== -1) {
  _.pullAt(data, targetIndex);
}

如果不要求删除位置，仅需删除任意一个Ik6e，可以将_.findLastIndex替换为_.findIndex（定位第一个匹配项），结果同样符合需求。

注意：不要使用_.remove方法，该方法会删除所有匹配条件的元素，最终会把3个Ik6e全部移除，不符合仅删除1个的要求。

原生 JavaScript 实现 #

不依赖Lodash的原生实现思路与上述一致，先定位待删除元素的索引，再通过splice删除：

// 定位最后一个匹配项的索引（和示例输出效果一致）
const targetIndex = data.findLastIndex(item => item.id === 'Ik6e');
if (targetIndex !== -1) {
  data.splice(targetIndex, 1);
}

如果运行环境不支持findLastIndex（如旧版浏览器、Node.js < 14.14.0），可使用兼容写法：

let targetIndex = -1;
// 从数组末尾向前遍历，定位最后一个匹配项
for (let i = data.length - 1; i >= 0; i--) {
  if (data[i].id === 'Ik6e') {
    targetIndex = i;
    break;
  }
}
if (targetIndex !== -1) {
  data.splice(targetIndex, 1);
}

注意：原生filter方法会剔除所有满足筛选条件的元素，直接调用data.filter(item => item.id !== 'Ik6e')会得到[{id:"H0uD"}, {id:"E^di"}]，不符合需求。

补充说明 #

• 上述所有实现均为直接修改原数组，如果需要保留原数组不被改动，可先对数组做浅拷贝再操作：

  const newData = [...data];
  // 后续对 newData 执行删除逻辑即可，原 data 不会被修改
  

• 如果需要删除特定位置的Ik6e实例（比如指定删除第2个出现的匹配项），仅需调整索引定位逻辑即可。

内容的提问来源于stack exchange，提问作者flawy