javascript - 比较两个 JSON 对象以查看 Angular 的变化

Question

我需要重构我的程序以获取一个 JSON obj，将其存储在某处，进行一系列更改，然后比较这两个对象以查看已更改、删除和添加的内容。

我不确定在 JS 中执行此操作的方法，所以有人可以建议在 Angular(对象比较部分)中执行此操作的方法吗？否则，我将不得不对我的程序运行方式进行大量更改/从后端尝试。感谢任何帮助。

Answer 1

唯一用于对象比较的内置操作是 ==/=== 相等运算符，它使用引用相等:A is B，而不是 A is equal给 B.

您想要的是描述两个对象之间差异的更改描述符列表。

如评论中所述，这将需要使用引用和存在检查的混合来递归遍历对象。

下面的算法是一个想法的快速实现。遍历对象并用对象列表描述它们的变化。就像对象本身一样，更改是嵌套的，但根据它们在对象中的位置有一个唯一的 ID(因此它可以被展平)。

function diff(a, b, namespace) {
  namespace = (namespace || '') + '.';

  var keysInA = Object.keys(a),
      keysInB = Object.keys(b);

  var diffA = keysInA.reduce(function(changes, key) {
    var ns = namespace + key;

    if(typeof b[key] == 'undefined') {
      return changes.concat([{ type: 'DELETED', id: ns }]);
    }

    if(a[key] !== b[key]) {
      return changes.concat([{ type: 'CHANGED', id: ns }]);
    }

    if(typeof a[key] == b[key] == 'object') {
      return diff(a[key], b[key], ns);
    }

    return changes; 
  }, []);

  var diffB = keysInB.reduce(function(changes, key) {
    var ns = namespace + key;

    if(typeof a[key] == 'undefined') {
      return changes.concat([{ type: 'ADDED', id: ns }]);
    }

    return changes;
  }, []);

  return diffA.concat(diffB);
}

例如，我们采用对象的原始状态。

var a = { a: 1, b: 2, c: 3 };

和新状态。

var b = { a: 2, c: 3, d: 5 };

然后使用diff 函数运行它们。

diff(a, b);

它返回更改列表。

[
  { id: '.a', type: 'CHANGED' },
  { id: '.b', type: 'DELETED' },
  { id: '.d', type: 'ADDED' }
]

显然，您必须调整此算法以使其符合您对构成更改的标准。你可能想看看 deep equality ，而不是一直向下比较引用。