How can I get a list of the differences between two JavaScript object graphs?

前端 未结 10 590
终归单人心
终归单人心 2020-11-29 01:02

I want to be able to get a list of all differences between two JavaScript object graphs, with the property names and values where the deltas occur.

For what it is w

10条回答
  •  北荒
    北荒 (楼主)
    2020-11-29 01:26

    Here is a partial, naïve solution to my problem - I will update this as I further develop it.

    function findDifferences(objectA, objectB) {
       var propertyChanges = [];
       var objectGraphPath = ["this"];
       (function(a, b) {
          if(a.constructor == Array) {
             // BIG assumptions here: That both arrays are same length, that
             // the members of those arrays are _essentially_ the same, and 
             // that those array members are in the same order...
             for(var i = 0; i < a.length; i++) {
                objectGraphPath.push("[" + i.toString() + "]");
                arguments.callee(a[i], b[i]);
                objectGraphPath.pop();
             }
          } else if(a.constructor == Object || (a.constructor != Number && 
                    a.constructor != String && a.constructor != Date && 
                    a.constructor != RegExp && a.constructor != Function &&
                    a.constructor != Boolean)) {
             // we can safely assume that the objects have the 
             // same property lists, else why compare them?
             for(var property in a) {
                objectGraphPath.push(("." + property));
                if(a[property].constructor != Function) {
                   arguments.callee(a[property], b[property]);
                }
                objectGraphPath.pop();
             }
          } else if(a.constructor != Function) { // filter out functions
             if(a != b) {
                propertyChanges.push({ "Property": objectGraphPath.join(""), "ObjectA": a, "ObjectB": b });
             }
          }
       })(objectA, objectB);
       return propertyChanges;
    }
    

    And here is a sample of how it would be used and the data it would provide (please excuse the long example, but I want to use something relatively non-trivial):

    var person1 = { 
       FirstName : "John", 
       LastName : "Doh", 
       Age : 30, 
       EMailAddresses : [
          "john.doe@gmail.com", 
          "jd@initials.com"
       ], 
       Children : [ 
          { 
             FirstName : "Sara", 
             LastName : "Doe", 
             Age : 2 
          }, { 
             FirstName : "Beth", 
             LastName : "Doe", 
             Age : 5 
          } 
       ] 
    };
    
    var person2 = { 
       FirstName : "John", 
       LastName : "Doe", 
       Age : 33, 
       EMailAddresses : [
          "john.doe@gmail.com", 
          "jdoe@hotmail.com"
       ], 
       Children : [ 
          { 
             FirstName : "Sara", 
             LastName : "Doe", 
             Age : 3 
          }, { 
             FirstName : "Bethany", 
             LastName : "Doe", 
             Age : 5 
          } 
       ] 
    };
    
    var differences = findDifferences(person1, person2);
    

    At this point, here is what the differences array would look like if you serialized it to JSON:

    [
       {
          "Property":"this.LastName", 
          "ObjectA":"Doh", 
          "ObjectB":"Doe"
       }, {
          "Property":"this.Age", 
          "ObjectA":30, 
          "ObjectB":33
       }, {
          "Property":"this.EMailAddresses[1]", 
          "ObjectA":"jd@initials.com", 
          "ObjectB":"jdoe@hotmail.com"
       }, {
          "Property":"this.Children[0].Age", 
          "ObjectA":2, 
          "ObjectB":3
       }, {
          "Property":"this.Children[1].FirstName", 
          "ObjectA":"Beth", 
          "ObjectB":"Bethany"
       }
    ]
    

    The this in the Property value refers to the root of the object that was compared. So, this solution is not yet exactly what I need, but it is pretty darn close.

    Hope this is useful to someone out there, and if you have any suggestions for improvement, I am all-ears; I wrote this very late last night (i.e. early this morning) and there may be things I am completely overlooking.

    Thanks.

提交回复
热议问题