javascript - 如何从两个 JSON 对象中仅获取 "changed"值

Question

这道题比较复杂，所以不是重复

我创建了一个 JqTree ，当用户改变它的树结构时，“旧的”JSON 和“新的”JSON 结构应该被比较，它应该只显示 JSON 已更改。

例如:

[{"name":"node1","id":1,"is_open":true,"children":
    [
      {"name":"child1","id":2},
      {"name":"child2","id":3}
    ]
}]

客户端将child1放在child2下之后

[{"name":"node1","id":1,"is_open":true,"children":
  [
    {"name":"child2","id":3},
    {"name":"child1","id":2}
  ]
}]

我只是想比较它们并检查哪些值被更改并用 alert 显示它们，在这种情况下，它将是:

{"name":"child2","id":3},
{"name":"child1","id":2}

到目前为止，我有这段比较它们的小代码:

JSON.stringify(object1) === JSON.stringify(object2); //I know it's not too reliable.

但我正在寻找可以检查“差异”并将其从 JSON 中提取出来的东西。

提前致谢。

Answer 1

给你: http://jsfiddle.net/musicin3d/cf5ddod1/3/

为了您的无点击乐趣而编辑的缩减版本:

// Call this function.
// The others are helpers for this one.
function getDiff(a, b){
    var diff = (isArray(a) ? [] : {});
    recursiveDiff(a, b, diff);
    return diff;
}

function recursiveDiff(a, b, node){
    var checked = [];

    for(var prop in a){
        if(typeof b[prop] == 'undefined'){
            addNode(prop, '[[removed]]', node);
        }
        else if(JSON.stringify(a[prop]) != JSON.stringify(b[prop])){
            // if value
            if(typeof b[prop] != 'object' || b[prop] == null){
                addNode(prop, b[prop], node);
            }
            else {
                // if array
                if(isArray(b[prop])){
                   addNode(prop, [], node);
                   recursiveDiff(a[prop], b[prop], node[prop]);
                }
                // if object
                else {
                    addNode(prop, {}, node);
                    recursiveDiff(a[prop], b[prop], node[prop]);
                }
            }
        }
    }
}

function addNode(prop, value, parent){
        parent[prop] = value;
}

function isArray(obj){
    return (Object.prototype.toString.call(obj) === '[object Array]');
}

有关详细信息，请参阅上面的链接。有一条评论解释了我的一些假设。

这是一个如何使用递归来解决您的问题的示例。如果你不熟悉递归，我建议你做一些阅读。这是一篇关于它的文章: What is recursion and when should I use it?

注意事项:
像我一样使用 JSON.stringify 不是一个好主意。作为程序员，这对我来说很方便，因为我的程序可以“向前看”，看看每条路径是否有变化，但这是有代价的。我已经遍历了 tree structure完成我的工作，JSON.stringify 还遍历我发送的每个对象的树结构每次我调用它。在计算机科学中，我们称之为 O(n!) 的最坏情况，不太正式地称为“非常慢”。一个更好的设计会遍历整棵树并跟踪它是如何到达它所在的位置的。当它走到死胡同(称为“叶”节点)时，它会使用这些知识立即将必要的数据结构添加到 diff 变量中。这意味着我们的程序将具有遍历整个数据结构，但我们的代码将是唯一这样做的东西。因此每个节点只会被处理一次。

不过，这应该能让您了解其他人的建议。