两个对象之间的通用深度差异

Question

我有两个对象：oldObj和newObj。数据oldObj用于填充表单，newObj是用户更改此表单中的数据并提交数据的结果。两个对象都很深，即。它们具有对象或对象数组等属性 - 它们可以是n级深度，因此diff算法需要是递归的。现在我需要不只是从弄清楚什么改变（如添加/更新/删除）oldObj来newObj，却怎么也最能代表它。到目前为止，我的想法只是构建一个genericDeepDiffBetweenObjects方法，它将返回表单上的对象，{add:{...},upd:{...},del:{...}}但后来我想：其他人必须先需要它。那么......有没有人知道一个库或一段代码可以做到这一点，并且可能有更好的方式来表示差异（以一种仍然是JSON可序列化的方式）？更新：我想到了一种更好的方式来表示更新的数据，使用相同的对象结构newObj，但将所有属性值转换为表单上的对象：{type: '<update|create|delete>', data: <propertyValue>}所以，如果newObj.prop1 = 'new value'和oldObj.prop1 = 'old value'它会设置returnObj.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]]检查这种类型的深度值相等不仅非常复杂，而且还要找出一种表示可能的变化的好方法。

Answer 1

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

只有与你的提议不同的是我不认为[1,[{c: 1},2,3],{a:'hey'}] and [{a:'hey'},1,[3,{c: 1},2]]是相同的，因为我认为如果元素的顺序不相同，则数组不相等。当然，如果需要，可以更改。此代码还可以进一步增强，以便将函数作为参数，用于根据传递的原始值以任意方式格式化diff对象（现在这个作业由“compareValues”方法完成）。

var deepDiffMapper = function () {

  return {

    VALUE_CREATED: 'created',

    VALUE_UPDATED: 'updated',

    VALUE_DELETED: 'deleted',

    VALUE_UNCHANGED: 'unchanged',

    map: function(obj1, obj2) {

      if (this.isFunction(obj1) || this.isFunction(obj2)) {

        throw 'Invalid argument. Function given, object expected.';

      }

      if (this.isValue(obj1) || this.isValue(obj2)) {

        return {

          type: this.compareValues(obj1, obj2),

          data: obj1 === undefined ? obj2 : obj1

        };

      }

      var diff = {};

      for (var key in obj1) {

        if (this.isFunction(obj1[key])) {

          continue;

        }

        var value2 = undefined;

        if (obj2[key] !== undefined) {

          value2 = obj2[key];

        }

        diff[key] = this.map(obj1[key], value2);

      }

      for (var key in obj2) {

        if (this.isFunction(obj2[key]) || diff[key] !== undefined) {

          continue;

        }

        diff[key] = this.map(undefined, obj2[key]);

      }

      return diff;

    },

    compareValues: function (value1, value2) {

      if (value1 === value2) {

        return this.VALUE_UNCHANGED;

      }

      if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {

        return this.VALUE_UNCHANGED;

      }

      if (value1 === undefined) {

        return this.VALUE_CREATED;

      }

      if (value2 === undefined) {

        return this.VALUE_DELETED;

      }

      return this.VALUE_UPDATED;

    },

    isFunction: function (x) {

      return Object.prototype.toString.call(x) === '[object Function]';

    },

    isArray: function (x) {

      return Object.prototype.toString.call(x) === '[object Array]';

    },

    isDate: function (x) {

      return Object.prototype.toString.call(x) === '[object Date]';

    },

    isObject: function (x) {

      return Object.prototype.toString.call(x) === '[object Object]';

    },

    isValue: function (x) {

      return !this.isObject(x) && !this.isArray(x);

    }

  }

}();

var result = deepDiffMapper.map({

  a: 'i am unchanged',

  b: 'i am deleted',

  e: {

    a: 1,

    b: false,

    c: null

  },

  f: [1, {

    a: 'same',

    b: [{

      a: 'same'

    }, {

      d: 'delete'

    }]

  }],

  g: new Date('2017.11.25')

}, {

  a: 'i am unchanged',

  c: 'i am created',

  e: {

    a: '1',

    b: '',

    d: 'created'

  },

  f: [{

    a: 'same',

    b: [{

      a: 'same'

    }, {

      c: 'create'

    }]

  }, 1],

  g: new Date('2017.11.25')

});

console.log(result);