从数组中查找选中对象索引返回-1，求解决及移除方法

嘿，我来帮你揪出这个问题的根源！你遇到的索引一直返回-1的情况，几乎都是因为对JavaScript对象的引用类型特性理解不到位——直接用indexOf()或者===比较对象时，比的是内存地址，而不是对象里的内容。

JavaScript里的对象是引用类型，哪怕两个对象的键值对完全一模一样，它们在内存里的存储地址也是不同的。举个直观的例子：

const data = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
const selected = [{id: 1, name: "Alice"}];
console.log(data.indexOf(selected[0])); // 结果是-1，因为这俩不是同一个内存引用

你需要根据对象的唯一标识（比如id）来匹配，或者手动比较对象的内容，而不是直接对比引用。这里给你几种实用的解决方案：

方法1：用findIndex()匹配唯一标识 #

findIndex()支持传入回调函数，你可以在里面判断对象的唯一属性是否匹配，这也是最常用的方法：

const data = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
const selected = [{id: 1, name: "Alice"}];

// 找到选中对象在data中的索引
const targetIndex = data.findIndex(item => item.id === selected[0].id);

if (targetIndex !== -1) {
  data.splice(targetIndex, 1); // 移除该元素
  console.log(data); // 输出: [{id: 2, name: "Bob"}]
}

方法2：批量移除多个选中对象 #

如果你的selected数组里有多个要移除的对象，推荐用filter()生成新数组（避免直接修改原数组，更符合函数式编程的最佳实践）：

const data = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}, {id: 3, name: "Charlie"}];
const selected = [{id: 1, name: "Alice"}, {id: 3, name: "Charlie"}];

// 先提取所有选中对象的唯一id集合
const selectedIds = selected.map(item => item.id);
// 过滤掉data中id在集合里的元素
const newData = data.filter(item => !selectedIds.includes(item.id));

console.log(newData); // 输出: [{id: 2, name: "Bob"}]

方法3：无唯一标识时，比较对象所有属性 #

如果你的对象没有id这类唯一键，那只能手动逐个比较对象的所有属性。可以写一个辅助函数来判断两个对象是否相等：

function isObjectEqual(objA, objB) {
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  
  // 键的数量不一样直接返回不相等
  if (keysA.length !== keysB.length) return false;
  
  // 逐个比较每个键对应的值
  for (const key of keysA) {
    if (objA[key] !== objB[key]) return false;
  }
  return true;
}

// 使用辅助函数查找索引
const targetIndex = data.findIndex(item => isObjectEqual(item, selected[0]));
if (targetIndex !== -1) {
  data.splice(targetIndex, 1);
}

• 尽量给对象设置唯一标识（比如id），这会让数据处理简单很多，也是前端开发的通用最佳实践。
• 如果你用React、Vue这类框架，更新状态时尽量不要直接修改原数组，而是返回新数组（比如用filter替代splice），不然可能会导致视图不更新的问题。

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