Lodash 4 如何对比两个对象并返回发生值变更的键值对

你可以通过 _.pickBy 配合 _.isEqual 组合实现需求，核心逻辑是遍历修改后的对象，筛选出和原始对象值不一致的键值对即可：

const getChangedFields = (originalObj, updatedObj) => {
  // 遍历updatedObj的所有键值对，保留和原始对象值不同的项
  return _.pickBy(updatedObj, (newVal, key) => {
    return !_.isEqual(newVal, originalObj[key]);
  });
};

// 调用示例
const originalObj = {
  name: "Jane",
  fullName: "Jane Doe",
  nickname: "Janey"
};
const updatedObj = {
  name: "Jane",
  fullName: "Jane Dawn",
  nickname: "Janey"
};

console.log(getChangedFields(originalObj, updatedObj));
// 输出符合你要求的结果：{ fullName: "Jane Dawn" }

适配业务场景的优化点 #

• _.isEqual 支持深层对比嵌套对象、数组等复杂类型的值，不需要你额外写递归判断逻辑，刚好适配表单可能存在嵌套字段的场景。
• 如果你不需要返回原始对象中不存在的新增字段，只需要对比两个对象共有的键的变更，可以调整判断逻辑：

  return _.has(originalObj, key) && !_.isEqual(newVal, originalObj[key]);
  

• 如果你的对比视图需要同时展示新旧值，可以改造返回结构，直接用于视图渲染：

  const getDiffDetail = (originalObj, updatedObj) => {
    const diff = {};
    _.forOwn(updatedObj, (newVal, key) => {
      const oldVal = originalObj[key];
      if (!_.isEqual(newVal, oldVal)) {
        diff[key] = { oldValue: oldVal, newValue: newVal };
      }
    });
    return diff;
  };
  

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