JavaScript 中的对象比较

在JavaScript中比较对象的最佳方法是什么?

例:

var user1 = {name : "nerd", org: "dev"};
var user2 = {name : "nerd", org: "dev"};
var eq = user1 == user2;
alert(eq); // gives false

我知道如果两个对象引用完全相同的对象,则它们是相等的,但是有没有办法检查它们是否具有相同的属性值?

以下方式对我有用,但这是唯一的可能性吗?

var eq = Object.toJSON(user1) == Object.toJSON(user2);
alert(eq); // gives true

答案 1

不幸的是,没有完美的方法,除非你以递归方式使用并访问所有不可枚举的属性,但这仅适用于Firefox。_proto_

因此,我能做的最好的事情就是猜测使用场景。


1)快速和有限。

当您具有简单的 JSON 样式对象时,其中没有方法和 DOM 节点,则有效:

 JSON.stringify(obj1) === JSON.stringify(obj2) 

属性的顺序很重要,因此此方法将为以下对象返回 false:

 x = {a: 1, b: 2};
 y = {b: 2, a: 1};

2)慢,更通用。

在不深入研究原型的情况下比较对象,然后以递归方式比较属性的投影,并比较构造函数。

这几乎是正确的算法:

function deepCompare () {
  var i, l, leftChain, rightChain;

  function compare2Objects (x, y) {
    var p;

    // remember that NaN === NaN returns false
    // and isNaN(undefined) returns true
    if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
         return true;
    }

    // Compare primitives and functions.     
    // Check if both arguments link to the same object.
    // Especially useful on the step where we compare prototypes
    if (x === y) {
        return true;
    }

    // Works in case when functions are created in constructor.
    // Comparing dates is a common scenario. Another built-ins?
    // We can even handle functions passed across iframes
    if ((typeof x === 'function' && typeof y === 'function') ||
       (x instanceof Date && y instanceof Date) ||
       (x instanceof RegExp && y instanceof RegExp) ||
       (x instanceof String && y instanceof String) ||
       (x instanceof Number && y instanceof Number)) {
        return x.toString() === y.toString();
    }

    // At last checking prototypes as good as we can
    if (!(x instanceof Object && y instanceof Object)) {
        return false;
    }

    if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
        return false;
    }

    if (x.constructor !== y.constructor) {
        return false;
    }

    if (x.prototype !== y.prototype) {
        return false;
    }

    // Check for infinitive linking loops
    if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
         return false;
    }

    // Quick checking of one object being a subset of another.
    // todo: cache the structure of arguments[0] for performance
    for (p in y) {
        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
            return false;
        }
        else if (typeof y[p] !== typeof x[p]) {
            return false;
        }
    }

    for (p in x) {
        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
            return false;
        }
        else if (typeof y[p] !== typeof x[p]) {
            return false;
        }

        switch (typeof (x[p])) {
            case 'object':
            case 'function':

                leftChain.push(x);
                rightChain.push(y);

                if (!compare2Objects (x[p], y[p])) {
                    return false;
                }

                leftChain.pop();
                rightChain.pop();
                break;

            default:
                if (x[p] !== y[p]) {
                    return false;
                }
                break;
        }
    }

    return true;
  }

  if (arguments.length < 1) {
    return true; //Die silently? Don't know how to handle such case, please help...
    // throw "Need two or more arguments to compare";
  }

  for (i = 1, l = arguments.length; i < l; i++) {

      leftChain = []; //Todo: this can be cached
      rightChain = [];

      if (!compare2Objects(arguments[0], arguments[i])) {
          return false;
      }
  }

  return true;
}

已知问题(好吧,它们的优先级非常低,可能你永远不会注意到它们):

  • 具有不同原型结构但投影相同的对象
  • 函数可能具有相同的文本,但引用不同的闭包

测试:pass测试来自如何确定两个JavaScript对象的相等性?


答案 2

这是我的ES3注释解决方案(代码后面的血腥细节):

function object_equals( x, y ) {
  if ( x === y ) return true;
    // if both x and y are null or undefined and exactly the same

  if ( ! ( x instanceof Object ) || ! ( y instanceof Object ) ) return false;
    // if they are not strictly equal, they both need to be Objects

  if ( x.constructor !== y.constructor ) return false;
    // they must have the exact same prototype chain, the closest we can do is
    // test there constructor.

  for ( var p in x ) {
    if ( ! x.hasOwnProperty( p ) ) continue;
      // other properties were tested using x.constructor === y.constructor

    if ( ! y.hasOwnProperty( p ) ) return false;
      // allows to compare x[ p ] and y[ p ] when set to undefined

    if ( x[ p ] === y[ p ] ) continue;
      // if they have the same strict value or identity then they are equal

    if ( typeof( x[ p ] ) !== "object" ) return false;
      // Numbers, Strings, Functions, Booleans must be strictly equal

    if ( ! object_equals( x[ p ],  y[ p ] ) ) return false;
      // Objects and Arrays must be tested recursively
  }

  for ( p in y )
    if ( y.hasOwnProperty( p ) && ! x.hasOwnProperty( p ) )
      return false;
        // allows x[ p ] to be set to undefined

  return true;
}

在开发这个解决方案时,我特别关注了角落案例,效率,但试图产生一个简单的解决方案,希望有一些优雅。JavaScript允许未定义的属性,并且对象具有原型链,如果不进行检查,可能会导致非常不同的行为。

首先,我选择不扩展Object.prototype,主要是因为null不能是比较的对象之一,并且我相信null应该是一个有效的对象来与另一个对象进行比较。其他人还注意到其他关于Object.prototype扩展的合理担忧,关于对他人代码的可能副作用。

必须特别注意处理JavaScript允许将对象属性设置为未定义的可能性,即存在值设置为未定义的属性。上述解决方案验证两个对象是否具有相同的属性设置为未定义以报告相等性。这只能通过使用 Object.hasOwnProperty( property_name ) 检查属性是否存在来实现。另请注意,JSON.stringify() 会删除设置为“未定义”的属性,因此使用此表单的比较将忽略设置为“未定义”值的属性。

只有当函数共享相同的引用(而不仅仅是相同的代码)时,才应将其视为相等,因为这不会考虑这些函数原型。因此,比较代码字符串并不能保证它们具有相同的原型对象。

这两个对象应该具有相同的原型链,而不仅仅是相同的属性。这只能通过比较两个对象的构造函数来实现严格相等,从而在跨浏览器进行测试。ECMAScript 5 将允许使用 Object.getPrototypeOf() 测试他们的实际原型。某些 Web 浏览器还提供执行相同操作的 __proto__ 属性。对上述代码的可能改进将允许在可用时使用这些方法之一。

在这里,使用严格比较至关重要,因为不应将 2 视为等于“2.0000”,也不应将 false 视为等于 null未定义0

出于效率考虑,我尽快比较了属性的相等性。然后,仅当失败时,才查找这些属性的类型。对于具有大量标量属性的大型对象,速度提升可能很重要。

不再需要两个循环,第一个循环从左侧对象检查属性,第二个循环从右侧检查属性并仅验证是否存在(而不是值),以捕获这些使用未定义值定义的属性。

总体而言,此代码仅用 16 行代码即可处理大多数极端情况(无注释)。


更新 (8/13/2015).我已经实现了一个更好的版本,因为函数value_equals()更快,可以正确处理诸如NaN和0等与-0不同的角落情况,可以选择强制执行对象的属性顺序并测试循环引用,并由100多个自动测试作为Toubkal项目测试套件的一部分提供支持。