对象的深度比较

Question

I wrote this function to deeply compare two objects in JavaScript

Equal: function(obj1, obj2) {
  var keys1 = Object.keys(obj1).sort();
  var keys2 = Object.keys(obj2).sort();
  if (keys1.length !== keys2.length) {
    return false;
  }
  // first make sure have same keys.
  if (!keys1.every(function(k, i) {
    return (k === keys2[i]);
  })) {
    return false;
  }
  return keys1.every(function(kk) {
    var v1 = obj1[kk];
    var v2 = obj2[kk];
    if (Array.isArray(v1)) {
      return this.EqualArr(v1, v2);
    } else if (typeof v1 === "object" && v1 !== null) {
      return this.Equal(v1, v2);
    } else {
      return v1 === v2;
    }
  });
},

But I got this error:

Cannot convert undefined or null to object

The problem happens at this line:

var keys2 = Object.keys(obj2).sort(); 

Can anyone help me ?

Answer 1

The problem here is the invocation to Object.keys

This method does not accept null or undefined as argument. To avoid that you can check objects passed are not falsy.

if (!obj1 && !obj2) {
  return false
}

Answer 2

Since you're already using the UI5 framework, you can make use of the built-in comparator jQuery.sap.equal .

jQuery.sap.equal(a, b, maxDepth?, contains?)
Compares the two given values for equality, especially takes care not to compare arrays and objects by reference, but compares their content.

Here is an example:

 sap.ui.require([ "jquery.sap.global" ], jQuery => console.log(jQuery.sap.equal({ a: "I'm A", b: { property: "I'm B", c: { property: "I'm C", array: [1, 2, 3], date: new Date("2018-02-28"), }, }, }, { a: "I'm A", b: { property: "I'm B", c: { property: "I'm C", array: [1, 2, 3], date: new Date("2018-02-28"), }, }, }))); console.clear(); 

 <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script> 

• How UI5 actually compares the two given objects
• Other test cases