JS 如何判断两个对象相等

清疚 2022-06-06 04:47 329阅读 0赞

摘抄自大神博客：https://github.com/mqyqingfeng/Blog/issues/41

前提条件：
1、NaN 和 NaN 相等
2、[1, 2] 和 [1, 2] 相等
3、{value: 1} 和 {value: 1} 相等
4、1 和 new Number(1) 相等
5、’Curly’ 和 new String(‘Curly’) 相等
6、true 和 new Boolean(true) 相等

下面我们来一步一步的讨论

+0 & -0

在很多情况下，+0 -0都是相等的：

  1. // 表现1
  2. console.log(+0 === -0); // true
  4. // 表现2
  5. (-0).toString() // '0'
  6. (+0).toString() // '0'
  8. // 表现3
  9. -0 < +0 // false
  10. +0 < -0 // false

但是，其实两者依旧能够体现出差异：

  1. 1 / +0 // Infinity
  2. 1 / -0 // -Infinity
  4. 1 / +0 === 1 / -0 // false

根据上面的这些特点，我们可以这样区分+0 -0

  1. function eq(a, b){
  2.     if (a === b) return a !== 0 || 1 / a === 1 / b;
  3.     return false;
  4. }
  6. console.log(eq(0, 0)) // true
  7. console.log(eq(0, -0)) // false

最后，解释一下为什么会有+0 -0之分：
这是因为 JavaScript 采用了IEEE_754 浮点数表示法(几乎所有现代编程语言所采用)，这是一种二进制表示法，按照这个标准，最高位是符号位(0 代表正，1 代表负)，剩下的用于表示大小。而对于零这个边界值 ，1000(-0) 和 0000(0)都是表示 0 ，这才有了正负零的区别。

NaN

我们希望，当比对NaN和NaN的时候，函数认为它们是相等的。
利用NaN不等于自身的特性，我们可以这样写：

  1. function eq(a, b) {
  2.     if (a !== a) return b !== b;
  3. }
  5. console.log(eq(NaN, NaN)); // true

比对简单类型

  1. // eq 第一版
  2. // 用来过滤掉简单的类型比较，复杂的对象使用 deepEq 函数进行处理
  3. function eq(a, b) { 
  5.     // === 结果为 true 的区别出 +0 和 -0
  6.     if (a === b) return a !== 0 || 1 / a === 1 / b;
  8.     // typeof null 的结果为 object ，这里做判断，是为了让有 null 的情况尽早退出函数
  9.     if (a == null || b == null) return false;
  11.     // 判断 NaN
  12.     if (a !== a) return b !== b;
  14.     // 判断参数 a 类型，如果是基本类型，在这里可以直接返回 false
  15.     var type = typeof a;
  16.     if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;
  18.     // 更复杂的对象使用 deepEq 函数进行深度比较
  19.     return deepEq(a, b);
  20. };

String基本类型和String对象

‘Cat’ 和 new String(‘Cat’) 的类型都不一样的:

  1. console.log(typeof 'Cat'); // string
  2. console.log(typeof new String('Cat')); // object

但是我希望它们在比对的时候是相等的！
他喵的…..怎么办呢？

而且神奇的是，使用Object.prototype.toString方法对两者做处理，两者的结果却是一致的！

  1. var toString = Object.prototype.toString;
  2. toString.call('Cat'); // "[object String]"
  3. toString.call(new String('Cat')); // "[object String]"

我晕，神奇…..

解决方案是使用隐式类型转换：

  1. console.log('Curly' + '' === new String('Curly') + ''); // true

于是，解决方案就是：
如果 a 和 b 的 Object.prototype.toString的结果一致，并且都是”[object String]”，那我们就使用 ” + a === ” + b 进行判断。

下面我们来讨论除了String其他对象的解决方案。

更多对象

其他对象例如Boolean, Date, RegExp，都可以借鉴String的方法，利用隐式类型转换。

  1. var a = true;
  2. var b = new Boolean(true);
  3. console.log(+a === +b) // true
  5. var a = new Date(2009, 9, 25);
  6. var b = new Date(2009, 9, 25);
  7. // date这个也加+号判断简直神奇了，然而亲测有效！
  8. console.log(+a === +b) // true
  10. var a = /a/i;
  11. var b = new RegExp(/a/i);
  12. // RegExp这个则利用的是转化为String
  13. console.log('' + a === '' + b) // true

关于Number，稍微有点复杂，毕竟人家有个NaN

  1. var a = Number(NaN);
  2. var b = Number(NaN);
  4. function eq() {
  5.     // 判断 Number(NaN) Object(NaN) 等情况
  6.     if (+a !== +a) return +b !== +b;
  7.     // 其他判断 ...
  8. }
  10. console.log(eq(a, b)); // true

这段代码上面出现过类似的是吧～

综合一下上面的内容

  1. var toString = Object.prototype.toString;
  3. function deepEq(a, b) { 
  4.     var className = toString.call(a); // 注意这里必须要用call!不能直接调用，否则会返回[object Object]
  5.     if (className !== toString.call(b)) return false;
  7.     switch (className) {
  8.         case '[object RegExp]':
  9.         case '[object String]':
  10.             return '' + a === '' + b;
  11.         case '[object Number]':
  12.             if (+a !== +a) return +b !== +b;
  13.             return +a === 0 ? 1 / +a === 1 / b : +a === +b;
  14.       case '[object Date]':
  15.       case '[object Boolean]':
  16.             return +a === +b;
  17.     }
  18.     // 其他判断
  19. }

数组相等

数组和对象的判断其实很简单，就是循环遍历。但是这里只是单层的数组和对象

  1. function deepEq(a, b) {
  2.     // 再接着上面的内容
  3.     if (areArrays) {
  5.         length = a.length;
  6.         if (length !== b.length) return false;
  8.         while (length--) {
  9.             if (!eq(a[length], b[length])) return false;
  10.          }
  11.     } 
  12.     else {
  14.         var keys = Object.keys(a), key;
  15.         length = keys.length;
  17.         if (Object.keys(b).length !== length) return false;
  19.         while (length--) {
  20.             key = keys[length];
  21.             if (!(b.hasOwnProperty(key) && eq(a[key], b[key]))) return false;
  22.         }
  23.     }
  24.     return true;
  26. }

逆天的循环引用

  1. a = {foo: {b: {foo: {c: {foo: null}}}}};
  2. b = {foo: {b: {foo: {c: {foo: null}}}}};
  3. a.foo.b.foo.c.foo = a;
  4. b.foo.b.foo.c.foo = b;
  5. // 晕

如果还按照原来的逻辑，那么，就是死循环…..

解决问题的方法是借用了两个stack（也就是数组啦）

  1. var a, b;
  3. a = { foo: { b: { foo: { c: { foo: null } } } } };
  4. b = { foo: { b: { foo: { c: { foo: null } } } } };
  5. a.foo.b.foo.c.foo = a;
  6. b.foo.b.foo.c.foo = b;
  8. function eq(a, b, aStack, bStack) {
  9.     if (typeof a == 'number') {
  10.         return a === b;
  11.     }
  13.     return deepEq(a, b, aStack, bStack)
  14. }
  16. function deepEq(a, b, aStack, bStack) {
  18.     aStack = aStack || [];
  19.     bStack = bStack || [];
  21.     var length = aStack.length;
  22.     // 数组的解决方案
  23.     while (length--) { // 遍历，找出是否存在循环引用
  24.         if (aStack[length] === a) {
  25.               return bStack[length] === b;
  26.         }
  27.     }
  29.     aStack.push(a);
  30.     bStack.push(b);
  32.     // 对象的解决方案
  33.     var keys = Object.keys(a);
  34.     var length = keys.length;
  35.     var key;
  37.     while (length--) {
  38.         key = keys[length]
  40.         console.log(a[key], b[key], aStack, bStack)
  42.         if (!eq(a[key], b[key], aStack, bStack)) return false; 
  43.         // 递归调用，push了a,b到stack中用来排除循环引用。
  44.     }
  46.     aStack.pop();
  47.     bStack.pop();
  48.     return true;
  50. }
  52. console.log(eq(a, b))

终于完成了，下面来一版完整的代码：

  1. var toString = Object.prototype.toString;
  3. function isFunction(obj) {
  4.     return toString.call(obj) === '[object Function]'
  5. }
  7. function eq(a, b, aStack, bStack) {
  9.     // === 结果为 true 的区别出 +0 和 -0
  10.     if (a === b) return a !== 0 || 1 / a === 1 / b;
  12.     // typeof null 的结果为 object ，这里做判断，是为了让有 null 的情况尽早退出函数
  13.     if (a == null || b == null) return false;
  15.     // 判断 NaN
  16.     if (a !== a) return b !== b;
  18.     // 判断参数 a 类型，如果是基本类型，在这里可以直接返回 false
  19.     var type = typeof a;
  20.     if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;
  22.     // 更复杂的对象使用 deepEq 函数进行深度比较
  23.     return deepEq(a, b, aStack, bStack);
  24. };
  26. function deepEq(a, b, aStack, bStack) {
  28.     // a 和 b 的内部属性 [[class]] 相同时 返回 true
  29.     var className = toString.call(a);
  30.     if (className !== toString.call(b)) return false;
  32.     switch (className) {
  33.         case '[object RegExp]':
  34.         case '[object String]':
  35.             return '' + a === '' + b;
  36.         case '[object Number]':
  37.             if (+a !== +a) return +b !== +b;
  38.             return +a === 0 ? 1 / +a === 1 / b : +a === +b;
  39.         case '[object Date]':
  40.         case '[object Boolean]':
  41.             return +a === +b;
  42.     }
  44.     var areArrays = className === '[object Array]';
  45.     // 不是数组
  46.     if (!areArrays) {
  47.         // 过滤掉两个函数的情况
  48.         if (typeof a != 'object' || typeof b != 'object') return false;
  50.         var aCtor = a.constructor,
  51.             bCtor = b.constructor;
  52.         // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦
  53.         if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) {
  54.             return false;
  55.         }
  56.     }
  59.     aStack = aStack || [];
  60.     bStack = bStack || [];
  61.     var length = aStack.length;
  63.     // 检查是否有循环引用的部分
  64.     while (length--) {
  65.         if (aStack[length] === a) {
  66.             return bStack[length] === b;
  67.         }
  68.     }
  70.     aStack.push(a);
  71.     bStack.push(b);
  73.     // 数组判断
  74.     if (areArrays) {
  76.         length = a.length;
  77.         if (length !== b.length) return false;
  79.         while (length--) {
  80.             if (!eq(a[length], b[length], aStack, bStack)) return false;
  81.         }
  82.     }
  83.     // 对象判断
  84.     else {
  86.         var keys = Object.keys(a),
  87.             key;
  88.         length = keys.length;
  90.         if (Object.keys(b).length !== length) return false;
  91.         while (length--) {
  93.             key = keys[length];
  94.             if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack))) return false;
  95.         }
  96.     }
  98.     aStack.pop();
  99.     bStack.pop();
  100.     return true;
  102. }
  104. console.log(eq(0, 0)) // true
  105. console.log(eq(0, -0)) // false
  107. console.log(eq(NaN, NaN)); // true
  108. console.log(eq(Number(NaN), Number(NaN))); // true
  110. console.log(eq('Curly', new String('Curly'))); // true
  112. console.log(eq([1], [1])); // true
  113. console.log(eq({ value: 1 }, { value: 1 })); // true
  115. var a, b;
  117. a = { foo: { b: { foo: { c: { foo: null } } } } };
  118. b = { foo: { b: { foo: { c: { foo: null } } } } };
  119. a.foo.b.foo.c.foo = a;
  120. b.foo.b.foo.c.foo = b;
  122. console.log(eq(a, b)) // true

发表评论

表情：
评论列表 （有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js比较两个对象是否相等

    > 前言：如何判断两个对象是否相等？ 两个Object类型对象，即使拥有相同属性、相同值，当使用 == 或 === 进行比较时，也不认为他们相等。这就是因为他们是通过引用（内

    快来打我*快来打我*/ 0 赞/ 517 阅读