对象/数组的深度比较

IT技术 javascript arrays object comparison
2021-02-27 19:26:10

可能的重复:
你如何确定两个 JavaScript 对象的相等性?
JavaScript 中的对象比较

如果我有两个数组或对象并想比较它们,例如

object1 = [
 { shoes:
   [ 'loafer', 'penny' ]
  },
  { beers:
     [ 'budweiser', 'busch' ]
  }
]

object2 = [
 { shoes:
   [ 'loafer', 'penny' ]
  },
  { beers:
     [ 'budweiser', 'busch' ]
  }
]

object1 == object2 // false

如果您从服务器收到响应并尝试查看它是否已更改,这可能会很烦人

2个回答

更新:
为了回应围绕原始建议的评论和担忧(比较 2 个 JSON 字符串),您可以使用此函数:

function compareObjects(o, p)
{
    var i,
        keysO = Object.keys(o).sort(),
        keysP = Object.keys(p).sort();
    if (keysO.length !== keysP.length)
        return false;//not the same nr of keys
    if (keysO.join('') !== keysP.join(''))
        return false;//different keys
    for (i=0;i<keysO.length;++i)
    {
        if (o[keysO[i]] instanceof Array)
        {
            if (!(p[keysO[i]] instanceof Array))
                return false;
            //if (compareObjects(o[keysO[i]], p[keysO[i]] === false) return false
            //would work, too, and perhaps is a better fit, still, this is easy, too
            if (p[keysO[i]].sort().join('') !== o[keysO[i]].sort().join(''))
                return false;
        }
        else if (o[keysO[i]] instanceof Date)
        {
            if (!(p[keysO[i]] instanceof Date))
                return false;
            if ((''+o[keysO[i]]) !== (''+p[keysO[i]]))
                return false;
        }
        else if (o[keysO[i]] instanceof Function)
        {
            if (!(p[keysO[i]] instanceof Function))
                return false;
            //ignore functions, or check them regardless?
        }
        else if (o[keysO[i]] instanceof Object)
        {
            if (!(p[keysO[i]] instanceof Object))
                return false;
            if (o[keysO[i]] === o)
            {//self reference?
                if (p[keysO[i]] !== p)
                    return false;
            }
            else if (compareObjects(o[keysO[i]], p[keysO[i]]) === false)
                return false;//WARNING: does not deal with circular refs other than ^^
        }
        if (o[keysO[i]] !== p[keysO[i]])//change !== to != for loose comparison
            return false;//not the same value
    }
    return true;
}

但在许多情况下,IMO 不需要那么困难:

JSON.stringify(object1) === JSON.stringify(object2);

如果字符串化的对象相同,则它们的值相同。
为了完整起见:JSON简单地忽略函数(好吧,将它们全部删除)。它旨在表示Data,而不是functionality
尝试比较仅包含函数的 2 个对象将导致true

JSON.stringify({foo: function(){return 1;}}) === JSON.stringify({foo: function(){ return -1;}});
//evaulutes to:
'{}' === '{}'
//is true, of course

对于对象/函数的深度比较,你将不得不求助于libs或编写自己的函数,并克服JS对象都是引用的事实,因此在比较时o1 === ob2,如果两个变量指向相同,它只会返回true目的...

正如@aj 在评论中指出的那样:

JSON.stringify({a: 1, b: 2}) === JSON.stringify({b: 2, a: 1});

is false,因为 stringify分别调用了 yield"{"a":1,"b":2}""{"b":2,"a":1}"至于为什么会这样,您需要了解 chrome 的 V8 引擎的内部结构。我不是专家,在不涉及太多细节的情况下,可以归结为:

创建的每个对象以及每次修改它时,V8 都会创建一个新的隐藏 C++ 类(有点)。如果对象 X 有一个属性a,而另一个对象也有相同的属性,那么这两个 JS 对象都将引用一个隐藏类,该隐藏类继承自定义此属性的共享隐藏类a如果两个对象都共享相同的基本属性,那么它们都将引用相同的隐藏类,并且JSON.stringify在两个对象上的工作方式完全相同。这是给定的(如果您有兴趣,请在此处查看有关 V8 内部结构的更多详细信息)。

但是,在 aj 指出的示例中,两个对象的字符串化方式不同。怎么来的?好吧,简单地说,这些对象永远不会同时存在:

JSON.stringify({a: 1, b: 2})

这是一个函数调用,一个需要解析为结果值的表达式,然后才能与右侧的操作数进行比较。第二个对象字面量还没有摆在桌面上。
对象被字符串化,exoression 被解析为字符串常量。对象文字没有在任何地方被引用,并被标记为垃圾收集。
在此之后,右手操作数(JSON.stringify({b: 2, a: 1})表达式)得到相同的处理。

一切都很好,但还需要考虑的是,现在的 JS 引擎比以前复杂得多。同样,我不是 V8 专家,但我认为 aj 的代码段被大量优化是合理的,因为代码被优化为:

"{"b":2,"a":1}" === "{"a":1,"b":2}"

基本上省略JSON.stringify所有调用,只在正确的位置添加引号。毕竟,这效率要高得多。

我不相信 JSON.stringify 对输出的顺序有任何保证。JSON.stringify({a: 1, b: 1}) 可以变成 '{"a": 1, "b": 1}' 或 '{"b": 1, "a": 1}' 和比较会失败。
2021-04-19 19:26:10
@Michal:对于花时间批评一个 5 年前的代码片段的人来说,值得注意的是你无法弄清楚什么return truereturn false意味着什么(是的,函数返回布尔值,true等于,false否则)。o并且p显然是给定函数被调用的参数compareObjects,可能是对象(因此o)。无论哪种方式:是的,名字不是很好,风格也不是......再说一遍:它已经有 5 年历史了......如果我还在做 JS,我会使用 ES6/ 以完全不同的方式编写它ES2016,也许命名objectEquals或其他
2021-04-29 19:26:10
这不一定是真的。这并不包括所有情况,即函数作为值,对象作为值——你最终可能会得到很多 [Object Object]——这可能是误报。
2021-05-04 19:26:10
@ansiart:我从未声称这是一种通用解决方案。OP 想要比较两个对象,就像他问题中的对象一样。为了实现这一点,这个答案是最简单的方法。
2021-05-05 19:26:10
@pomo:不要认为这是故意的(这是一个 4.5 年前的答案)。可能忘记为数组元素递归调用它,或者可能与原始问题或某处的评论有关
2021-05-11 19:26:10

作为下划线混合:

在咖啡脚本中:

_.mixin deepEquals: (ar1, ar2) ->

    # typeofs should match
    return false unless (_.isArray(ar1) and _.isArray(ar2)) or (_.isObject(ar1) and _.isObject(ar2))

    #lengths should match
    return false if ar1.length != ar2.length

    still_matches = true

    _fail = -> still_matches = false

    _.each ar1, (prop1, n) =>

      prop2 = ar2[n]

      return if prop1 == prop2

      _fail() unless _.deepEquals prop1, prop2

    return still_matches

在 javascript 中:

_.mixin({
  deepEquals: function(ar1, ar2) {
    var still_matches, _fail,
      _this = this;
    if (!((_.isArray(ar1) && _.isArray(ar2)) || (_.isObject(ar1) && _.isObject(ar2)))) {
      return false;
    }
    if (ar1.length !== ar2.length) {
      return false;
    }
    still_matches = true;
    _fail = function() {
      still_matches = false;
    };
    _.each(ar1, function(prop1, n) {
      var prop2;
      prop2 = ar2[n];
      if (prop1 !== prop2 && !_.deepEquals(prop1, prop2)) {
        _fail();
      }
    });
    return still_matches;
  }
});
Funkodebat,你传递给下划线的迭代器函数每个都有不一致的返回点: if (prop1 === prop2) { return; } /* void */ } if (!_.deepEquals(prop1, prop2)) { return _fail(); /* 错误的 */ }
2021-04-29 19:26:10
下划线的 _.isEqual() 有区别吗?请参阅underscorejs.org/#isEqual说它“在两个对象之间执行优化的深度比较,以确定它们是否应该被视为相等。”
2021-05-05 19:26:10
从迭代器返回的目的是什么?据我了解, _.each 不会破坏循环(如果这是您想要的)..
2021-05-08 19:26:10
或者它只是从 coffeescript 的半自动转换,其中每个语句都有一个返回值,所以当调用 "_fail() 除非 _.deepEquals prop1, prop2" 时,它会将其转换为 "return _fail()" ?
2021-05-10 19:26:10
是的 cofeescript 只返回最后一行函数
2021-05-14 19:26:10