定义

在开始之前，我们先定义一下什么叫相等。

  1. NaN 和 NaN 是相等
  2. [1] 和 [1] 是相等
  3. {value: 1} 和 {value: 1} 是相等

另外

  1. 1 和 new Number(1) 是相等
  2. ‘Curly’ 和 new String(‘Curly’) 是相等
  3. true 和 new Boolean(true) 是相等

一些有趣的现象

a === b 是 true 的话，a 和 b 就一定相等吗？一般情况下是这样的，但有个例外。

+0 和 -0

  1. console.log(+0 === -0);
  3. (+0).tostring() // 0
  4. (-0).toString() // 0
  6. -0 < +0 // false
  7. +0 < -0 // false

即使如此两者还是不同

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

为什么会有 +0 和 -0 了？那是因为 Javascript 采用了 IEEE_754 浮点数表法（这是一种二进制表示法，最高位是符号位（0 代表 + ，1 代表 -）），所以零有两个值（1000） 和 （0000）。

那如何判断出来了？可以利用 1 / + 0 === -1 / 0 => false 这特性。

  1. function eq(a, b) {
  2.     if(a === b) return a !== 0 || 1 / a === 1 / b;
  3.   return false
  4. }

NaN

虽然 NaN === NaN => false 但是我们认为 NaN 应该是等于自身的，我们可以利用他这个特性判断出来。

  1. function eq(a, b) {
  2.     if(a !== a) return b !== b;
  3. }

eq 函数（第一版）

  1. function eq(a, b) {
  2.     // 判断一些基本类型如： 1 === 1，true === true, 'str' === 'str', null === null
  3.     // a !== 0 很简单就是用来判断不是 0 的情况
  4.     // 我们认为 -0 !== +0，因为 1 / -0 => -Infinity，而 1 / +0 => Infinity，所以 1 / -0 === 1 / +0 => fasle
  5.     if (a === b) return a !== 0 || 1 / a === 1 / b;
  7.     //因为 null !== 任意类型（除非是自身，但是上面的 if 已经判断出来了）
  8.     if (a === null || b === null) return false;
  10.     // 这个专门用来判断 NaN，因为 NaN !== NaN
  11.     if (a !== a) return b !== b;
  13.     //来到这里的情况也就几种，
  14.     // 1. a, b 都为基本类型但不相等分两种情况：同类型不相等（如：1 !== 2，true !== false，'str1' !== 'str2'），或者不同类型（1 !== true，'str' !== false）
  15.     // 2. a, b 有一个是对象（object），另外一个是基本类型（如：a = 1，b = new Number(1); a = true, b = new Boolean(true); ....）
  16.     // 3. a，b 都是对象（function，array, object）
  18.     // 这里的 if 是判断第 1 种情况
  19.     // 你可能会问 if 语句是不是差一个判断：type b !== 'function'， 其实不是的因为如何假设 b 是一个函数，a 经过前两个 typeof 判断肯定是一个基本类型，但是基本类型肯定不等于函数啊。
  20.     // 所以为了让这种情况早点判断出来所以就不写 type b !== 'function'
  21.     const type = typeof a;
  22.     if (type !== "function" && type !== "object" && typeof b !== "object") return false;
  24.     // 把第 2，3 种情况放到 deepEq 函数来判断
  25.     return deeepEq(a, b);
  26. }

string

在开始写 deepEq 函数之前，我们怎么判断如：’Curly’ 和 new String(‘Curly’) 这种情况了？

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

一个是字符创，一个是对象。怎么办了？可以利用 Object.prototype.toString 方法。

  1. console.log(Object.prototype.toString.call('Curly')); // "[object String]"
  2. console.log(Object.prototype.toString.call(new String('Curly'))); // "[object String]"

只到调用 toString 方法结果就是一样的。

还可以利用隐式类型转换。

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

思路：如果 a 和 b 的 toString 的结果是一致，并且都是 “[object String]” 的话，那么可以利用 ‘’ + a === ‘’ + b 来判断。

更多对象

Boolean

  1. const a = true;
  2. const b = new Boolean(true);
  4. console.log(+a === +b) // true

Date

  1. const a = new Date(2009, 9, 25);
  2. const b = new Date(2009, 9, 25);
  4. console.log(+a === +b) // true

RegExp

  1. const a = /a/i;
  2. const b = new RegExp(/a/i);
  4. console.log('' + a === '' + b) // true

Number

  1. const a = 1;
  2. const b = new Number(1);
  4. console.log(+a === +b) // true

Number 就这么容易判断出来吗？

  1. const a = Number(NaN);
  2. const b = Number(NaN);
  4. console.log(+a === +b); // false

期望结果是 true，但是却是 false。

修改成这样

  1. const a = Number(NaN);
  2. const 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

deepEq 函数（第一版）

  1. // 原理（以 string 为例）
  2. // var toString = Object.prototype.toString;
  3. // const a = 'Curly', b = new String('Curly')
  4. // toString.call(a); // "[object String]"
  5. // toString.call(b); // "[object String]"
  6. // "" + a === "" + b => true
  8. //下面是判断第 2 种情况
  9. var toString = Object.prototype.toString;
  10. function deepEq(a, b) {
  11.     const className = toString.call(a);
  12.     // 如果不是同一个构造函数出来的直接出局
  13.     if (className !== toString.call(b)) return false;
  15.     switch (className) {
  16.         case "[object RegExp]":
  17.         case "[object String]":
  18.             return "" + a === "" + b;
  19.         case "[object Number]":
  20.             // 用来判断 a = new Number(NaN)，b = new Number(NaN)
  21.             if (+a !== +a) return +b !== +b;
  22.             // 如果 a 是 +0，-0，0 （注意：+a 只是把 a 变成数字，不会改变符号 +(-0) => -0）则进入第二个判断，否则进入第三个判断。
  23.             return +a === 0 ? 1 / +a === 1 / b : +a === +b;
  24.         case "[object Date]":
  25.         case "[object Boolean]":
  26.             return +a === +b;
  27.     }
  28. }

构造函数实例

例子

  1. function Person() {
  2.     this.name = name;
  3. }
  5. function Animal() {
  6.     this.name = name
  7. }
  9. const person = new Person('David');
  10. const animal = new Animal('David');

虽然都是 {name: "David"} 但是我们认为这两个对象是不想的，因为分别属于不用的构造函数实例。

但是如何两个对象所属的构造函数所属不同，两个对象就一定不相等吗？

不一定，举个例子

  1. const attrs = Object.create(null);
  2. attr.name = 'Bob';
  3. eq(attrs, {name: 'Bob'}); // ???

虽然 attrs 没有原型， {name: "Bob"} 的原型是 Object ，但是在实际应用中，只要他们有着相同的键值对，就认为是相等。

继续写判断，对于不同的构造函数下的实例直接返回 false。

  2. // 现在只剩下第三种情况了，a，b 都为对象（function，array，object）
  4. function isFunction(obj) {
  5.     return toString.call(obj) === "[object Function]";
  6. }
  8. function deepEq(a, b) {
  9.     // 接着上面的内容
  10.     var areArrays = className === "[object Array]";
  11.     // 不是数组，只能是（object，function）
  12.     if (!areArrays) {
  13.         // 过滤掉两个函数的情况（只要有一个是函数都不可能相等）
  14.         if (typeof a !== "object" || typeof b !== "object") return false;
  16.         // a，b 都为对象（object）
  17.         var aCtor = a.constructor,
  18.             bCtor = b.constructor;
  19.         // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦
  20.     // 这个 if 可以过滤掉 第1种情况
  21.         if (
  22.             aCtor !== bCtor &&
  23.             !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) &&
  24.             "constructor" in a &&
  25.             "constructor" in b
  26.         ) {
  27.             return false;
  28.         }
  29.     }
  30.     // 下面还有好多判断
  31. }
  33. // a,b 可能的情况
  35. function Person(name) {
  36.     this.name = name;
  37. }
  39. function Animal(name) {
  40.     this.name = name;
  41. }
  43. // 第1种
  44. a = new Person("test");
  45. b = new Animal("test");
  48. // 第2种
  49. a = Object.create(null);
  50. a.test = 1;
  51. b = { test: 1 };
  53. // 第3种
  54. a = { test: 1 };
  55. b = { test: 2 };
  57. // 第4种
  58. a = [1,2,3];
  59. b = [1,2,3];

剩下的 2，3，4 留到下面判断。

数组相等

就是递归遍历一遍，代码。

  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.         let 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. const a = {abc: null};
  2. const b = {abc: null};
  3. a.abc = a;
  4. b.abc = b;
  6. eq(a, b)

再复杂一点。

  1. const a = {foo: {b: {foo: {c: {foo: null}}}}};
  2. const b = {foo: {b: {foo: {c: {foo: null}}}}};
  3. a.foo.b.foo.c.foo = a;
  4. b.foo.b.foo.c.foo = b;
  6. eq(a, b)

为了演示，写一个精简后的代码。

  1. const 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)
  14. }
  16. function deepEq(a, b) {
  18.     let keys = Object.keys(a);
  19.     let length = keys.length;
  20.     let key;
  22.     while (length--) {
  23.         key = keys[length]
  25.         // 这是为了让你看到代码其实一直在执行
  26.         console.log(a[key], b[key])
  28.         if (!eq(a[key], b[key])) return false;
  29.     }
  31.     return true;
  33. }
  35. eq(a, b)

死循环了！！！，那怎样解决了？underscore 的思路是 eq 的时候，多传递两个参数为 aStack 和 bStack，用来储存 a 和 b 递归比较过程中的 a 和 b 的值，咋说的这么绕口呢？

例子

  1. const 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;
  23.     while (length--) {
  24.         if (aStack[length] === a) {
  25.               return bStack[length] === b;
  26.         }
  27.     }
  29.     aStack.push(a);
  30.     bStack.push(b);
  32.     var keys = Object.keys(a);
  33.     var length = keys.length;
  34.     var key;
  36.     while (length--) {
  37.         key = keys[length]
  39.         console.log(a[key], b[key], aStack, bStack)
  41.         if (!eq(a[key], b[key], aStack, bStack)) return false;
  42.     }
  44.     // aStack.pop();
  45.     // bStack.pop();
  46.     return true;
  48. }
  50. console.log(eq(a, b))

之所以注释掉 aStack.pop() 和 bStack.pop() 这两句，是为了方便大家查看 aStack bStack的值。

最终的 eq 函数


  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

参考：

[1] JavaScript专题之如何判断两个对象相等