JavaScript数组双条件查重异常：新旧表单数据slot变更检测问题

问题场景 #

我有表单的新旧两组数据，要实现的逻辑是找出旧数据中存在的对象、且其slot编号已变更的项。写了示例代码后，预期输出是[{name: "John", slot: 5}]，但实际得到[{name: "John", slot: 3}, {name: "John", slot: 5}]；奇怪的是，把判断条件改成slot相等时，结果是正确的，搞不懂当前逻辑哪里出了问题。

错误代码示例（模拟你的实现） #

大概率你的代码是类似这样的嵌套遍历逻辑，错误地同时收集了新旧两项：

const oldData = [{name: "John", slot: 3}];
const newData = [{name: "John", slot: 5}];

const result = [];
oldData.forEach(oldItem => {
  newData.forEach(newItem => {
    if (oldItem.name === newItem.name) {
      // 这里犯了关键错误：slot不等时同时把旧项和新项都塞进结果数组
      if (oldItem.slot !== newItem.slot) {
        result.push(oldItem);
        result.push(newItem);
      }
    }
  });
});
console.log(result); // 输出 [{name: "John", slot: 3}, {name: "John", slot: 5}]

异常原因 #

1. 结果收集逻辑错误：你的需求是获取变更后的项（也就是新数据中对应旧对象的更新后条目），但代码里把旧数据项和新数据项都加进了结果，导致输出两条数据。
2. 条件判断后的操作不符需求：当检测到slot变更时，你没有只保留需要的目标项（新数据项），而是冗余添加了旧数据项。
3. 至于“slot相等时结果正确”，是因为此时代码不会进入slot !==的分支，或者你调整条件后只添加了单个项，刚好符合预期，但本质是错误逻辑在特定场景下“蒙对”了结果。

修正后的代码 #

根据你的预期输出，这里给出两种符合需求的实现：

方案1：筛选新数据中已变更的项 #

const oldData = [{name: "John", slot: 3}];
const newData = [{name: "John", slot: 5}];

// 遍历新数据，找到对应旧数据中存在且slot已变更的项
const result = newData.filter(newItem => {
  const matchedOld = oldData.find(oldItem => oldItem.name === newItem.name);
  return matchedOld && matchedOld.slot !== newItem.slot;
});

console.log(result); // 输出 [{name: "John", slot: 5}]

方案2：基于旧数据生成变更记录 #

如果需要明确标记是旧数据中对象的变更结果，可以用map+filter：

const result = oldData
  .map(oldItem => {
    const matchedNew = newData.find(newItem => newItem.name === oldItem.name);
    // 存在匹配的新项且slot变更时，返回变更后的信息
    if (matchedNew && oldItem.slot !== matchedNew.slot) {
      return { name: oldItem.name, slot: matchedNew.slot };
    }
  })
  .filter(Boolean); // 过滤掉未变更的空值

console.log(result); // 输出 [{name: "John", slot: 5}]

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