生成差异JSON

Question

我正在尝试创建一个函数，该函数将对两个JSON对象（objectA与objectB）进行深度比较。然后生成一个唯一的JSON对象，该对象仅具有到不同数据值的节点树。

我的想法是将JSON的一部分运送到递归函数中，再加上一个保存数据路径的数组。但是，当我按照编写的代码运行代码时，我的路径数组中出现了额外的元素。

理想情况下，最终结果将提供如下路径：
[ "level1c", "level2b", "level3c" ]
但不幸的是，我得到了：
[ "level1a", "level1b", "level1c", "level2b", "level3c" ]

一次，我有了一个可靠的数据路径，然后我将用它来构建一个新的JSON对象，该对象仅仅包含不同的节点。

function compareJSON( primary, secondary ){

    function diffJSON( primary, secondary, path ){

        var p = path.slice(); // copy array

        var keys = Object.keys( secondary );
        var sVal;
        var pVal;

        for( var i=0, x=keys.length; i<x; i++ ){

            sVal = secondary[keys[i]];
            pVal = primary[keys[i]];

            if( sVal !== pVal ){
                p.push( keys[i] );
                if( typeof sVal === 'object' && !Array.isArray( sVal ) ){
                    diffJSON( pVal, sVal, p );
                }else{
                    if( Array.isArray( sVal ) ){
                        compareArray( sVal, pVal, p );
                    }else{
                        updateResult( sVal, p );
                    }// END if( !Array.isArray() )
                }// END if( typeof sVal === 'object' ... )
            }// END if( sVal !== pVal )

        }// END for loop

        function compareArray( arr, arr2, path ){
            // compare arrays
        }

        function updateResult( data, path ){
            console.log( data, path );
        }// END function updateResult()

    }// END function diffJSON()

    diffJSON( primary, secondary, [] );

}// END function compareJSON()

其他信息：

• 我知道objectA和objectB的结构相同；其中objectB只会是对objectA中数据的修改。
• 正在寻找一种少于ES6的解决方案（旧的浏览器支持很有趣）。
• 主要问题是如何捕获指向不同数据的正确节点路径；欢迎提供关于如何改进核心代码的任何提示/技巧/评论，但实际上并不是答案。

这是实践中的代码，它在控制台中打印出一个在json2（与json1比较）和关联的路径数组中发现不同的值：

'use strict';

function compareJSON( primary, secondary ){

	function diffJSON( primary, secondary, path ){

		var p = path.slice(); // copy array
		
		var keys = Object.keys( secondary );
		var sVal;
		var pVal;

		for( var i=0, x=keys.length; i<x; i++ ){
			
			sVal = secondary[keys[i]];
			pVal = primary[keys[i]];

			if( sVal !== pVal ){
				p.push( keys[i] );
				if( typeof sVal === 'object' && !Array.isArray( sVal ) ){
					diffJSON( pVal, sVal, p );
				}else{
					if( Array.isArray( sVal ) ){
						compareArray( sVal, pVal, p );
					}else{
						updateResult( sVal, p );
					}// END if( !Array.isArray() )
				}// END if( typeof sVal === 'object' ... )
			}// END if( sVal !== pVal )
      
		}// END for loop

		function compareArray( arr, arr2, path ){
			var match = true;
			for( var i=0, x=arr.length; i<x; i++ ){
				if( arr[i] !== arr2[i] ){
					match = false;
				}
			}
			if( !match ){
				updateResult( arr, path );
			}
		}
		
		function updateResult( data, path ){
			console.log( data, path );
		}// END function updateResult()

		
		
	}// END function diffJSON()

	diffJSON( primary, secondary, [] );
	
}// END function compareJSON()

var json1 = {
	level1a : {
		level2a : {
			level3a : 'apple',
			level3b : ['happy', 'happy', 'joy', 'joy'],
			level3c : {
				level4a : 'sleep'
			},
			level3d : true
		},
		level2b : 'music',
		level2c : {
			level3a : 'future',
			level3b : false,
			level3c : ['bear', 'camel', 'elephant']
		}
	},
	level1b : {
		level2a : 'jeopardy',
		level2b : 10200,
		level2c : true,
		level2d : {
			level3a : 'aliens',
			level3b : 'weekend'
		}
	},
	level1c : {
		level2a : 'fiber',
		level2b : [1, 2, 4, 5, 6]
	},
	level1d : ['apple', 'cat', 'baby'],
	level1e : true,
	level1f : {
		level2a : false,
		level2b : true,
		level2c : {
			level3a : 'naruto',
			level3b : 123,
			level3c : 'test',
			level3d : 'this',
			level3e : 'thing'
		},
		level2d : true
	}
};

var json2 = {
	level1a : {
		level2a : {
			level3a : 'apple',
			level3b : ['happy', 'happy', 'joy', 'joy'],
			level3c : {
				level4a : 'sleep'
			},
			level3d : true
		},
		level2b : 'music',
		level2c : {
			level3a : 'future',
			level3b : false,
			level3c : ['bear', 'camel', 'elephant', 'lion']
		}
	},
	level1b : {
		level2a : 'jeopardy',
		level2b : 10200,
		level2c : true,
		level2d : {
			level3a : 'ancient',
			level3b : 'weekend'
		}
	},
	level1c : {
		level2a : 'fiber',
		level2b : [1, 2, 4, 5, 6]
	},
	level1d : ['apple', 'cat', 'baby'],
	level1e : true,
	level1f : {
		level2a : false,
		level2b : true,
		level2c : {
			level3a : 'naruto',
			level3b : 123,
			level3c : 'spicy',
			level3d : 'this',
			level3e : 'thing'
		},
		level2d : true
	}
};

compareJSON( json1, json2 );

感谢您的时间和支持:)

Answer 1

我对您的代码做了一些修改，以拆分包含路径的变量和包含所有差异的数组。

我假设两个结构都相同，否则您需要对a和b的键进行相交和diff，分别打印差异并在相交处循环。

我正在使用 Object.prototype.toString ，这样将来您可能会添加更多的案例（如果您想走那条路，可以切换大小写）并减少检查

      //if you want you pass allDiffs and path here and enhance this function to print array positional diff also 
    var isEqualArrays = function compareArray( arr1, arr2 ){
               if(arr1.length !== arr2.length) return false;
    			var match = true;
    			for( var i=0, x=arr1.length; i<x; i++ ){
    				if( arr1[i] !== arr2[i] ){
    					match = false;
    				}
    			}
    			return match;
    		}
var toString = Object.prototype.toString;
    
function compare (a, b, allDiffs, previousPath) {
      var akeys = Object.keys(a);
      for (key of akeys) {
        var currentPath = previousPath.concat(key);
        var typeOfa = toString.call(a[key]);
        var typeOfb = toString.call(b[key]);
        if(typeOfa !== typeOfb) {
           allDiffs.push({path: currentPath, values: [a[key], b[key]] })
           continue
        }
        if(typeOfa === '[object Array]')  {
            if(!isEqualArrays(a[key], b[key])){//remove this if , if you want enhance route
               allDiffs.push({path: currentPath, values: [a[key], b[key]] })
            }
           continue;
         }
         if(typeOfa === '[object Object]') {
           compare(a[key], b[key], allDiffs, currentPath)
           continue
         }
         if(a[key] !== b[key]) {
            allDiffs.push({path: currentPath, values: [a[key], b[key]] })
         }
      }
    
      return allDiffs
 }
    
    var json1 = {
    	level1a : {
    		level2a : {
    			level3a : 'apple',
    			level3b : ['happy', 'happy', 'joy', 'joy'],
    			level3c : {
    				level4a : 'sleep'
    			},
    			level3d : true
    		},
    		level2b : 'music',
    		level2c : {
    			level3a : 'future',
    			level3b : false,
    			level3c : ['bear', 'camel', 'elephant']
    		}
    	},
    	level1b : {
    		level2a : 'jeopardy',
    		level2b : 10200,
    		level2c : true,
    		level2d : {
    			level3a : 'aliens',
    			level3b : 'weekend'
    		}
    	},
    	level1c : {
    		level2a : 'fiber',
    		level2b : [1, 2, 4, 5, 6]
    	},
    	level1d : ['apple', 'cat', 'baby'],
    	level1e : true,
    	level1f : {
    		level2a : false,
    		level2b : true,
    		level2c : {
    			level3a : 'naruto',
    			level3b : 123,
    			level3c : 'test',
    			level3d : 'this',
    			level3e : 'thing'
    		},
    		level2d : true
    	}
    };
    
    var json2 = {
    	level1a : {
    		level2a : {
    			level3a : 'apple',
    			level3b : ['happy', 'happy', 'joy', 'joy'],
    			level3c : {
    				level4a : 'sleep'
    			},
    			level3d : true
    		},
    		level2b : 'music',
    		level2c : {
    			level3a : 'future',
    			level3b : false,
    			level3c : ['bear', 'camel', 'elephant', 'lion']
    		}
    	},
    	level1b : {
    		level2a : 'jeopardy',
    		level2b : 10200,
    		level2c : true,
    		level2d : {
    			level3a : 'ancient',
    			level3b : 'weekend'
    		}
    	},
    	level1c : {
    		level2a : 'fiber',
    		level2b : [1, 2, 4, 5, 6]
    	},
    	level1d : ['apple', 'cat', 'baby'],
    	level1e : true,
    	level1f : {
    		level2a : false,
    		level2b : true,
    		level2c : {
    			level3a : 'naruto',
    			level3b : 123,
    			level3c : 'spicy',
    			level3d : 'this',
    			level3e : 'thing'
    		},
    		level2d : true
    	}
    };
    
    console.log(compare(json1, json2, [], []))