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

我有两个对象: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]]

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

当前回答

我在Javascript中开发了名为“compareValue()”的函数。它返回值是否相同。我在一个对象的for循环中调用了compareValue()。你可以在diffParams中得到两个对象的差值。

2016-07-12 09:00:04

其他回答

const diff = require("deep-object-diff").diff;
let differences = diff(obj2, obj1);

有一个每周下载量超过50万的npm模块:https://www.npmjs.com/package/deep-object-diff

我喜欢对象式的差异表示-特别是当它形成时，很容易看到结构。

const diff = require("deep-object-diff").diff;

const lhs = {
  foo: {
    bar: {
      a: ['a', 'b'],
      b: 2,
      c: ['x', 'y'],
      e: 100 // deleted
    }
  },
  buzz: 'world'
};

const rhs = {
  foo: {
    bar: {
      a: ['a'], // index 1 ('b')  deleted
      b: 2, // unchanged
      c: ['x', 'y', 'z'], // 'z' added
      d: 'Hello, world!' // added
    }
  },
  buzz: 'fizz' // updated
};

console.log(diff(lhs, rhs)); // =>
/*
{
  foo: {
    bar: {
      a: {
        '1': undefined
      },
      c: {
        '2': 'z'
      },
      d: 'Hello, world!',
      e: undefined
    }
  },
  buzz: 'fizz'
}
*/

2019-08-07 04:46:09

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

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

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

and

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

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

2011-12-21 21:22:19

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

2018-01-27 00:46:53

另一个基于lodash的解决方案，它有点特定于我们想要查看对象更新的diff的情况:

const diff = return {
  old: _.pickBy(oldObject, (value, key) => { return !_.isEqual(value, newObject[key]); }),
  new: _.pickBy(newObject, (value, key) => { return !_.isEqual(oldObject[key], value); })
}

没有使用_。omitBy是因为性能影响。

2021-08-13 18:45:43

这只会返回属性改变的新对象。(省略和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

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

推荐文章

最新文章

标签