JavaScript深度比较两个对象是否相等

在JavaScript中比较两个对象的成员是否相等有点麻烦,如果只是第一层比较,很容易,但子对象里的属性可能又是一个对象,所以只能递归。

代码:

// 去重
Array.prototype.unique = function () {
  this.sort();
  var re = [this[0]];
  for (var i = 1; i < this.length; i++) {
    if (this[i] !== re[re.length-1]) {
      re.push(this[i]);
    }
  }
  return re;
}

var objectDeepEqual = function(o1, o2) {
  if(typeof o1 != typeof o2){
    return false;
  }

  if(typeof o1.length != typeof o2.length ){
    return false;
  }

  var bool = true;

  var keyArr1 = [];
  var keyArr2 = [];
    
  for (var i in o1) {
    keyArr1.push(i);
  }

  for (var i in o2) {
    keyArr2.push(i);
  }

  if (keyArr1.length != keyArr2.length) {
    return false;
  }

  for(var i = 0, k = keyArr2.length; i < k; i++){
    keyArr1.push(keyArr2[i]);
  }

  var keyArr = keyArr1.unique();

  for(var i=0,k=keyArr.length;i<k;i++){
    if ((keyArr[i] in o1) && (keyArr[i] in o2)) {
      if (typeof o1[keyArr[i]] == 'object' && typeof o2[keyArr[i]] == 'object' ) {
        bool = objectDeepEqual(o1[keyArr[i]], o2[keyArr[i]]);
      } else if (o1[keyArr[i]] !== o2[keyArr[i]]){
        return false;
      }
    }else{
      return false;
    }
  }

  return bool;
};

使用


var o1 = {
  age : 18,
  info : {
    'author' : 'nicholas',
    'jobs' : [
      'programmer', 'php'
    ]
  },
  'name' : 'jac'
};
 
 
var o2 = {
  'name' : 'jac',
  'age' : 18,
  info : {
    'author' : 'nicholas',
    'jobs' : [
      'programmer',        
      'php'
    ]
  }
};
 
console.log(objectDeepEqual(o1,o2)); // true

把o1的age换成字符串的18

var o1 = {
  age : '18',
  info : {
    'author' : 'nicholas',
    'jobs' : [
      'programmer', 'php'
    ]
  },
  'name' : 'jac'
};
 
 
var o2 = {
  'name' : 'jac',
  'age' : 18,
  info : {
    'author' : 'nicholas',
    'jobs' : [
      'programmer',        
      'php'
    ]
  }
};
 
console.log(objectDeepEqual(o1,o2)); // false

类型不一致,结果为false,因为Object是复合类型,严格意义上是做不到两个不同的对象是否深度相等的,比如还有日期对象,正则以及new好的各种实例等等,这里的深度对比也仅仅是对比字符串,数字,布尔值也就是能字面量的值

分享

TITLE: JavaScript深度比较两个对象是否相等

LINK: https://www.qttc.net/358-javascript-object-deep-equal.html

NOTE: 原创内容,转载请注明出自琼台博客