两个对象之间的一般深度差异

我有两个对象:oldObj和newObj。

oldObj中的数据用于填充表单，而newObj是用户更改该表单中的数据并提交的结果。

这两个物体都很深。它们具有对象或对象数组等属性-它们可以有n层深，因此diff算法需要递归。

现在我不仅需要弄清楚从oldObj到newObj更改了什么(如添加/更新/删除)，而且还需要知道如何最好地表示它。

到目前为止，我的想法只是构建一个通用的deepdiffbetweenobjects方法，该方法将返回窗体上的对象{add:{…}，upd:{…}，del:{…但我转念一想:以前一定有人需要它。

所以…有没有人知道一个库或一段代码可以做到这一点，并且可能有更好的方式来表示差异(以一种仍然是JSON可序列化的方式)?

更新:

我想到了一个更好的方法来表示更新的数据，通过使用与newObj相同的对象结构，但将所有属性值转换为窗体上的对象:

{type: '<update|create|delete>', data: <propertyValue>}

如果newObj。prop1 = 'new value'和oldObj。prop1 = 'old value'它将设置returnbj。Prop1 = {type: 'update'， data: 'new value'}

更新2:

当我们处理数组的属性时，它会变得非常麻烦，因为数组[1,2,3]应该被计算为等于[2,3,1]，这对于基于值的类型的数组(如string, int和bool)来说足够简单，但是当涉及到引用类型的数组(如对象和数组)时就很难处理了。

数组的示例应该是相等的:

[1,[{c: 1},2,3],{a:'hey'}] and [{a:'hey'},1,[3,{c: 1},2]]

不仅要检查这种类型的深度值相等相当复杂，而且要找出一种表示可能发生的变化的好方法。

当前回答

从sbgoran的答案中得到扩展和简化的函数。这允许深度扫描和发现数组的相似性。

2018-01-27 00:46:53

其他回答

这只会返回属性改变的新对象。(省略和isEmpty是lodash中的函数)

export const getObjectDifference = <T extends {}>(originalObject: T, newObject: T) => {
const sameProperties: string[] = [];

Object.entries(originalObject).forEach(original => {
    Object.entries(newObject).forEach(newObj => {
        if (original[0] === newObj[0]) {
            if (original[1] === newObj[1])
                sameProperties.push(newObj[0]);
        }
    });
});

const objectDifference: T = omit(newObject, sameProperties) as T;
if (isEmpty(objectDifference))
    return null;
else
    return objectDifference; }

2021-04-07 07:32:13

我已经使用这段代码来完成你所描述的任务:

function mergeRecursive(obj1, obj2) {
    for (var p in obj2) {
        try {
            if(obj2[p].constructor == Object) {
                obj1[p] = mergeRecursive(obj1[p], obj2[p]);
            }
            // Property in destination object set; update its value.
            else if (Ext.isArray(obj2[p])) {
                // obj1[p] = [];
                if (obj2[p].length < 1) {
                    obj1[p] = obj2[p];
                }
                else {
                    obj1[p] = mergeRecursive(obj1[p], obj2[p]);
                }

            }else{
                obj1[p] = obj2[p];
            }
        } catch (e) {
            // Property in destination object not set; create it and set its value.
            obj1[p] = obj2[p];
        }
    }
    return obj1;
}

这将为您提供一个新对象，该对象将合并窗体中的旧对象和新对象之间的所有更改

2011-12-21 15:34:27

我写了一个小类来做你想做的，你可以在这里测试。

唯一不同于你的建议的是我不考虑

[1,[{c: 1},2,3],{a:'hey'}]

and

[{a:'hey'},1,[3,{c: 1},2]]

相等，因为我认为数组中元素的顺序不相等。当然，如果需要，这可以改变。此外，这段代码还可以进一步增强，将函数作为参数，用于基于传递的原语值以任意方式格式化diff对象(现在这项工作由"compareValues"方法完成)。

2011-12-21 21:22:19

我想提供一个ES6解决方案…这是一个单向的diff，意味着它将返回来自o2的键/值，这些键/值与o1中的对应键/值不相同:

let o1 = {
  one: 1,
  two: 2,
  three: 3
}

let o2 = {
  two: 2,
  three: 3,
  four: 4
}

let diff = Object.keys(o2).reduce((diff, key) => {
  if (o1[key] === o2[key]) return diff
  return {
    ...diff,
    [key]: o2[key]
  }
}, {})

2016-05-23 16:44:40

下面的方法将创建一个只更改字段的新对象

const findDiff = (obj1, obj2) => {
  const isNativeType1 = typeof obj1 !== "object";
  const isNativeType2 = typeof obj2 !== "object";
  if (isNativeType1 && isNativeType2) {
    return obj1 === obj2 ? null : obj2;
  }
  if (isNativeType1 && !isNativeType2) {
    return obj2;
  }
  if (!isNativeType1 && isNativeType2) {
    return obj2;
  }
  const isArray1 = Array.isArray(obj1);
  const isArray2 = Array.isArray(obj2);
  if (isArray1 && isArray2) {
    const firstLenght = obj1.length;
    const secondLenght = obj2.length;
    const hasSameLength = firstLenght === secondLenght;
    if (!hasSameLength) return obj2;
    let hasChange = false;
    for (let index = 0; index < obj1.length; index += 1) {
      const element1 = obj1[index];
      const element2 = obj2[index];
      const changed = findDiff(element1, element2);
      if (changed) {
        hasChange = true;
      }
    }
    return hasChange ? obj2 : null;
  }
  if (isArray1 || isArray2) return obj2;
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  const hasSameKeys = keys1.length === keys2.length;
  if (!hasSameKeys) {
    const retObj = { ...obj2 };
    for (let index = 0; index < keys1.length; index += 1) {
      const key = keys1[index];
      if (!keys2.includes(key)) {
        retObj[key] = null;
        // eslint-disable-next-line no-continue
        continue;
      }
      delete retObj[key];
    }
    return retObj;
  }
  let hasChange = false;
  const retObj = {};
  for (let index = 0; index < keys1.length; index += 1) {
    const key = keys1[index];
    const element1 = obj1[key];
    const element2 = obj2[key];
    const changed = findDiff(element1, element2);
    if (changed) {
      hasChange = true;
    }
    if (changed) {
      retObj[key] = changed;
    }
  }
  return hasChange ? retObj : null;
};

console.log(
  JSON.stringify(findDiff(
    {
      a: 1,
      b: 2,
      c: {
        a: ['1', 'b', { a: 'b', c: false }, true],
      },
    },
    {
      a: 1,
      b: 2,
      c: {
        a: ['1','b', { a: 'b', c: true }, true],
      },
    }
  ), null, 2)
);

2022-07-29 06:21:30

两个对象之间的一般深度差异

推荐文章

最新文章

标签