获取两个 json 对象的差异

场景：我想要一个比较两个 JSON 对象的函数，并返回一个包含差异列表的 JSON 对象，如果可能的话还返回更多数据，例如覆盖率指标。

var madrid = '{"type":"team","description":"Good","trophies":[{"ucl":"10"}, {"copa":"5"}]}';
var barca = '{"type":"team","description":"Bad","trophies":[{"ucl":"3"}]}';

如果我跑compare(madrid, barca)返回的对象可能类似于：

{"description" : "Bad", "trophies":[{"ucl":"3"}, {"copa":"5"}]}; 

或者类似的东西，你明白了。

有谁知道这个问题的解决方案？我已经找到一个了plugin http://tlrobinson.net/projects/javascript-fun/jsondiff/#%7B%22d%22:%7B%22a%22:%22%7B%5C%22format%5C%22:%5C%22example%5C%22,%5C%22content%5C%22:%5B%7B%5C%22align%5C%22:%5C%22center%5C%22,%5C%22depth%5C%22:0,%5C%22list%5C%22:false,%5C%22content%5C%22:%5B%7B%5C%22style%5C%22:%7B%5C%22underline%5C%22:1,%5C%22bold%5C%22:2,%5C%22size%5C%22:20,%5C%22italic%5C%22:2,%5C%22color%5C%22:%5C%22FFFFFF%5C%22,%5C%22fontFamily%5C%22:%5C%22Arial%5C%22%7D,%5C%22content%5C%22:%5C%22And%20please,%20feel%20free%20to%20send%20us%20your%20feedback%20and%20comments%20to%20%5C%22%7D,%7B%5C%22style%5C%22:%7B%5C%22underline%5C%22:1,%5C%22bold%5C%22:2,%5C%22size%5C%22:20,%5C%22italic%5C%22:2,%5C%22color%5C%22:%5C%224DC3FF%5C%22,%5C%22fontFamily%5C%22:%5C%22Arial%5C%22%7D,%5C%22content%5C%22:%5C%22hello%20world%5C%22%7D,%7B%5C%22style%5C%22:%7B%5C%22underline%5C%22:1,%5C%22bold%5C%22:2,%5C%22size%5C%22:20,%5C%22italic%5C%22:2,%5C%22color%5C%22:%5C%22FFFFFF%5C%22,%5C%22fontFamily%5C%22:%5C%22Arial%5C%22%7D,%5C%22content%5C%22:%5C%22,%20or%20just%20by%20clicking%20on%20the%20%5C%22%7D,%7B%5C%22style%5C%22:%7B%5C%22underline%5C%22:1,%5C%22bold%5C%22:2,%5C%22size%5C%22:20,%5C%22italic%5C%22:2,%5C%22color%5C%22:%5C%224DC3FF%5C%22,%5C%22fontFamily%5C%22:%5C%22Arial%5C%22%7D,%5C%22content%5C%22:%5C%22feedback%5C%22%7D%5D,%5C%22ordered%5C%22:false%7D%5D,%5C%22version%5C%22:3%7D%22,%22b%22:%22%7B%5C%22format%5C%22:%5C%22example%5C%22,%5C%22version%5C%22:3.1,%5C%22content%5C%22:%5B%7B%5C%22list%5C%22:false,%5C%22depth%5C%22:0,%5C%22ordered%5C%22:false,%5C%22content%5C%22:%5B%7B%5C%22content%5C%22:%5C%22And%20please,%20feel%20free%20to%20send%20us%20your%20feedback%20and%20comments%20to%20%5C%22,%5C%22style%5C%22:%7B%5C%22size%5C%22:20,%5C%22color%5C%22:%5C%22FFFFFF%5C%22,%5C%22name%5C%22:%5C%22Arial%5C%22,%5C%22bold%5C%22:2,%5C%22italic%5C%22:2,%5C%22underline%5C%22:2%7D%7D,%7B%5C%22content%5C%22:%5C%22foo%5C%22,%5C%22style%5C%22:%7B%5C%22size%5C%22:20,%5C%22color%5C%22:%5C%224DC2FF%5C%22,%5C%22name%5C%22:%5C%22Arial%5C%22,%5C%22bold%5C%22:2,%5C%22italic%5C%22:2,%5C%22underline%5C%22:2%7D%7D,%7B%5C%22content%5C%22:%5C%22,%20or%20just%20by%20clicking%20on%20the%20%5C%22,%5C%22style%5C%22:%7B%5C%22size%5C%22:20,%5C%22color%5C%22:%5C%22FFFFFF%5C%22,%5C%22name%5C%22:%5C%22Arial%5C%22,%5C%22bold%5C%22:2,%5C%22italic%5C%22:2,%5C%22underline%5C%22:2%7D%7D,%7B%5C%22content%5C%22:%5C%22feedback%5C%22,%5C%22style%5C%22:%7B%5C%22size%5C%22:20,%5C%22color%5C%22:%5C%224DC2FF%5C%22,%5C%22name%5C%22:%5C%22Arial%5C%22,%5C%22bold%5C%22:2,%5C%22italic%5C%22:2,%5C%22underline%5C%22:2%7D%7D,%7B%5C%22content%5C%22:%5C%22%20button%20up%20above.%5C%22,%5C%22style%5C%22:%7B%5C%22size%5C%22:20,%5C%22color%5C%22:%5C%22FFFFFF%5C%22,%5C%22name%5C%22:%5C%22Arial%5C%22,%5C%22bold%5C%22:2,%5C%22italic%5C%22:2,%5C%22underline%5C%22:2%7D%7D%5D,%5C%22align%5C%22:%5C%22center%5C%22%7D%5D%7D%22%7D%7D，但我想知道是否有其他选择。

可以使用按对象键进行迭代的递归函数。然后使用对象.is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is测试NaN and null。然后测试第二个对象是否是转换为的类型false like 0, NaN, or null。 列出两个对象的键并将它们连接起来以测试中缺少的键obj1然后迭代它。

当相同的键值之间存在差异时，它存储的值object2和收益。如果两个键值都是对象，则意味着可以递归比较，所以确实如此。

function diff(obj1, obj2) {
    const result = {};
    if (Object.is(obj1, obj2)) {
        return undefined;
    }
    if (!obj2 || typeof obj2 !== 'object') {
        return obj2;
    }
    Object.keys(obj1 || {}).concat(Object.keys(obj2 || {})).forEach(key => {
        if(obj2[key] !== obj1[key] && !Object.is(obj1[key], obj2[key])) {
            result[key] = obj2[key];
        }
        if(typeof obj2[key] === 'object' && typeof obj1[key] === 'object') {
            const value = diff(obj1[key], obj2[key]);
            if (value !== undefined) {
                result[key] = value;
            }
        }
    });
    return result;
}

上面的代码是 BSD 许可的，可以在任何地方使用。

测试链接：https://jsfiddle.net/gartz/vy9zaof2/54/ https://jsfiddle.net/gartz/vy9zaof2/54/

一个重要的观察是，这会将数组转换为对象并比较相同索引位置的值。由于需要额外的复杂性，还有许多其他方法可以比较此函数未涵盖的数组。

编辑 2/15/2019：此答案已更改，以添加新的 ES2017 语法并修复注释中的用例。

这只是一个开始，我还没有测试它，但我从递归的过滤器或比较器函数开始，可以根据需要更改它以获得优先结果。

function filter(obj1, obj2) {
    var result = {};
    for(key in obj1) {
        if(obj2[key] != obj1[key]) result[key] = obj2[key];
        if(typeof obj2[key] == 'array' && typeof obj1[key] == 'array') 
            result[key] = arguments.callee(obj1[key], obj2[key]);
        if(typeof obj2[key] == 'object' && typeof obj1[key] == 'object') 
            result[key] = arguments.callee(obj1[key], obj2[key]);
    }
    return result;
}

Tests: http://jsfiddle.net/gartz/Q3BtG/2/ http://jsfiddle.net/gartz/Q3BtG/2/