虽然标题写的是如何判断两个对象相等，但本篇咱们不只仅判断两个对象相等，实际上，咱们要作到的是如何判断两个参数相等，而这必然会涉及到多种类型的判断。git
什么是相等？在《JavaScript专题之去重》中，咱们认为只要 === 的结果为 true，二者就相等，然而今天咱们从新定义相等：github
咱们认为：编程
不只仅是这些长得同样的，还有数组
更复杂的咱们会在接下来的内容中看到。浏览器
咱们的目标是写一个 eq 函数用来判断两个参数是否相等，使用效果以下：编程语言
function eq(a, b) { ... } var a = [1]; var b = [1]; console.log(eq(a, b)) // true
在写这个看似很简单的函数以前，咱们首先了解在一些简单的状况下是如何判断的？函数
若是 a === b 的结果为 true， 那么 a 和 b 就是相等的吗？通常状况下，固然是这样的，可是有一个特殊的例子，就是 +0 和 -0。学习
JavaScript “处心积虑”的想抹平二者的差别：this
// 表现1 console.log(+0 === -0); // true // 表现2 (-0).toString() // '0' (+0).toString() // '0' // 表现3 -0 < +0 // false +0 < -0 // false
即使如此，二者依然是不一样的：url
1 / +0 // Infinity 1 / -0 // -Infinity 1 / +0 === 1 / -0 // false
也许你会好奇为何要有 +0 和 -0 呢？
这是由于 JavaScript 采用了IEEE_754 浮点数表示法(几乎全部现代编程语言所采用)，这是一种二进制表示法，按照这个标准，最高位是符号位(0 表明正，1 表明负)，剩下的用于表示大小。而对于零这个边界值 ，1000(-0) 和 0000(0)都是表示 0 ，这才有了正负零的区别。
也许你会好奇何时会产生 -0 呢？
Math.round(-0.1) // -0
那么咱们又该如何在 === 结果为 true 的时候，区别 0 和 -0 得出正确的结果呢？咱们能够这样作：
function eq(a, b){ if (a === b) return a !== 0 || 1 / a === 1 / b; return false; } console.log(eq(0, 0)) // true console.log(eq(0, -0)) // false
在本篇，咱们认为 NaN 和 NaN 是相等的，那又该如何判断出 NaN 呢？
console.log(NaN === NaN); // false
利用 NaN 不等于自身的特性，咱们能够区别出 NaN，那么这个 eq 函数又该怎么写呢？
function eq(a, b) { if (a !== a) return b !== b; } console.log(eq(NaN, NaN)); // true
如今，咱们已经能够去写 eq 函数的初版了。
// eq 初版 // 用来过滤掉简单的类型比较，复杂的对象使用 deepEq 函数进行处理 function eq(a, b) { // === 结果为 true 的区别出 +0 和 -0 if (a === b) return a !== 0 || 1 / a === 1 / b; // typeof null 的结果为 object ，这里作判断，是为了让有 null 的状况尽早退出函数 if (a == null || b == null) return false; // 判断 NaN if (a !== a) return b !== b; // 判断参数 a 类型，若是是基本类型，在这里能够直接返回 false var type = typeof a; if (type !== 'function' && type !== 'object' && typeof b != 'object') return false; // 更复杂的对象使用 deepEq 函数进行深度比较 return deepEq(a, b); };
也许你会好奇是否是少了一个 typeof b !== function?
试想若是咱们添加上了这句，当 a 是基本类型，而 b 是函数的时候，就会进入 deepEq 函数，而去掉这一句，就会进入直接进入 false，实际上 基本类型和函数确定是不会相等的，因此这样作代码又少，又可让一种状况更早退出。
如今咱们开始写 deepEq 函数，一个要处理的重大难题就是 'Curly' 和 new String('Curly') 如何判断成相等？
二者的类型都不同呐！不信咱们看 typeof 的操做结果：
console.log(typeof 'Curly'); // string console.log(typeof new String('Curly')); // object
但是咱们在《JavaScript专题之类型判断上》中还学习过更多的方法判断类型，好比 Object.prototype.toString：
var toString = Object.prototype.toString; toString.call('Curly'); // "[object String]" toString.call(new String('Curly')); // "[object String]"
神奇的是使用 toString 方法二者判断的结果倒是一致的，但是就算知道了这一点，仍是不知道如何判断字符串和字符串包装对象是相等的呢？
那咱们利用隐式类型转换呢？
console.log('Curly' + '' === new String('Curly') + ''); // true
看来咱们已经有了思路：若是 a 和 b 的 Object.prototype.toString的结果一致，而且都是"[object String]"，那咱们就使用 '' + a === '' + b 进行判断。
但是不止有 String 对象呐，Boolean、Number、RegExp、Date呢？
跟 String 一样的思路，利用隐式类型转换。
Boolean
var a = true; var b = new Boolean(true); console.log(+a === +b) // true
Date
var a = new Date(2009, 9, 25); var b = new Date(2009, 9, 25); console.log(+a === +b) // true
RegExp
var a = /a/i; var b = new RegExp(/a/i); console.log('' + a === '' + b) // true
Number
var a = 1; var b = new Number(1); console.log(+a === +b) // true
嗯哼？你肯定 Number 能这么简单的判断？
var a = Number(NaN); var b = Number(NaN); console.log(+a === +b); // false
但是 a 和 b 应该被判断成 true 的呐~
那么咱们就改为这样：
var a = Number(NaN); var b = Number(NaN); function eq() { // 判断 Number(NaN) Object(NaN) 等状况 if (+a !== +a) return +b !== +b; // 其余判断 ... } console.log(eq(a, b)); // true
如今咱们能够写一点 deepEq 函数了。
var toString = Object.prototype.toString; function deepEq(a, b) { var className = toString.call(a); if (className !== toString.call(b)) return false; switch (className) { case '[object RegExp]': case '[object String]': return '' + a === '' + b; case '[object Number]': if (+a !== +a) return +b !== +b; return +a === 0 ? 1 / +a === 1 / b : +a === +b; case '[object Date]': case '[object Boolean]': return +a === +b; } // 其余判断 }
咱们看个例子：
function Person() { this.name = name; } function Animal() { this.name = name } var person = new Person('Kevin'); var animal = new Animal('Kevin'); eq(person, animal) // ???
虽然 person 和 animal 都是 {name: 'Kevin'}，可是 person 和 animal 属于不一样构造函数的实例，为了作出区分，咱们认为是不一样的对象。
若是两个对象所属的构造函数对象不一样，两个对象就必定不相等吗？
并不必定，咱们再举个例子：
var attrs = Object.create(null); attrs.name = "Bob"; eq(attrs, {name: "Bob"}); // ???
尽管 attrs 没有原型，{name: "Bob"} 的构造函数是 Object，可是在实际应用中，只要他们有着相同的键值对，咱们依然认为是相等。
从函数设计的角度来看，咱们不该该让他们相等，可是从实践的角度，咱们让他们相等，因此相等就是一件如此随意的事情吗？！对啊，我也在想：undersocre，你怎么能如此随意呢！！！
哎，吐槽完了，咱们仍是要接着写这个相等函数，咱们能够先作个判断，对于不一样构造函数下的实例直接返回 false。
function isFunction(obj) { return toString.call(obj) === '[object Function]' } function deepEq(a, b) { // 接着上面的内容 var areArrays = className === '[object Array]'; // 不是数组 if (!areArrays) { // 过滤掉两个函数的状况 if (typeof a != 'object' || typeof b != 'object') return false; var aCtor = a.constructor, bCtor = b.constructor; // aCtor 和 bCtor 必须都存在而且都不是 Object 构造函数的状况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦 if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) { return false; } } // 下面还有好多判断 }
如今终于能够进入咱们期待已久的数组和对象的判断，不过其实这个很简单，就是递归遍历一遍……
function deepEq(a, b) { // 再接着上面的内容 if (areArrays) { length = a.length; if (length !== b.length) return false; while (length--) { if (!eq(a[length], b[length])) return false; } } else { var keys = Object.keys(a), key; length = keys.length; if (Object.keys(b).length !== length) return false; while (length--) { key = keys[length]; if (!(b.hasOwnProperty(key) && eq(a[key], b[key]))) return false; } } return true; }
若是以为这就结束了，简直是太天真，由于最难的部分才终于要开始，这个问题就是循环引用！
举个简单的例子：
a = {abc: null}; b = {abc: null}; a.abc = a; b.abc = b; eq(a, b)
再复杂一点的，好比：
a = {foo: {b: {foo: {c: {foo: null}}}}}; b = {foo: {b: {foo: {c: {foo: null}}}}}; a.foo.b.foo.c.foo = a; b.foo.b.foo.c.foo = b; eq(a, b)
为了给你们演示下循环引用，你们能够把下面这段已经精简过的代码复制到浏览器中尝试：
// demo var a, b; a = { foo: { b: { foo: { c: { foo: null } } } } }; b = { foo: { b: { foo: { c: { foo: null } } } } }; a.foo.b.foo.c.foo = a; b.foo.b.foo.c.foo = b; function eq(a, b, aStack, bStack) { if (typeof a == 'number') { return a === b; } return deepEq(a, b) } function deepEq(a, b) { var keys = Object.keys(a); var length = keys.length; var key; while (length--) { key = keys[length] // 这是为了让你看到代码其实一直在执行 console.log(a[key], b[key]) if (!eq(a[key], b[key])) return false; } return true; } eq(a, b)
嗯，以上的代码是死循环。
那么，咱们又该如何解决这个问题呢？underscore 的思路是 eq 的时候，多传递两个参数为 aStack 和 bStack，用来储存 a 和 b 递归比较过程当中的 a 和 b 的值，咋说的这么绕口呢？
咱们直接看个精简的例子：
var a, b;
a = { foo: { b: { foo: { c: { foo: null } } } } }; b = { foo: { b: { foo: { c: { foo: null } } } } }; a.foo.b.foo.c.foo = a; b.foo.b.foo.c.foo = b; function eq(a, b, aStack, bStack) { if (typeof a == 'number') { return a === b; } return deepEq(a, b, aStack, bStack) } function deepEq(a, b, aStack, bStack) { aStack = aStack || []; bStack = bStack || []; var length = aStack.length; while (length--) { if (aStack[length] === a) { return bStack[length] === b; } } aStack.push(a); bStack.push(b); var keys = Object.keys(a); var length = keys.length; var key; while (length--) { key = keys[length] console.log(a[key], b[key], aStack, bStack) if (!eq(a[key], b[key], aStack, bStack)) return false; } // aStack.pop(); // bStack.pop(); return true; } console.log(eq(a, b))
之因此注释掉 aStack.pop()和bStack.pop()这两句，是为了方便你们查看 aStack bStack的值。
最终的代码以下：
var toString = Object.prototype.toString; function isFunction(obj) { return toString.call(obj) === '[object Function]' } function eq(a, b, aStack, bStack) { // === 结果为 true 的区别出 +0 和 -0 if (a === b) return a !== 0 || 1 / a === 1 / b; // typeof null 的结果为 object ，这里作判断，是为了让有 null 的状况尽早退出函数 if (a == null || b == null) return false; // 判断 NaN if (a !== a) return b !== b; // 判断参数 a 类型，若是是基本类型，在这里能够直接返回 false var type = typeof a; if (type !== 'function' && type !== 'object' && typeof b != 'object') return false; // 更复杂的对象使用 deepEq 函数进行深度比较 return deepEq(a, b, aStack, bStack); }; function deepEq(a, b, aStack, bStack) { // a 和 b 的内部属性 [[class]] 相同时 返回 true var className = toString.call(a); if (className !== toString.call(b)) return false; switch (className) { case '[object RegExp]': case '[object String]': return '' + a === '' + b; case '[object Number]': if (+a !== +a) return +b !== +b; return +a === 0 ? 1 / +a === 1 / b : +a === +b; case '[object Date]': case '[object Boolean]': return +a === +b; } var areArrays = className === '[object Array]'; // 不是数组 if (!areArrays) { // 过滤掉两个函数的状况 if (typeof a != 'object' || typeof b != 'object') return false; var aCtor = a.constructor, bCtor = b.constructor; // aCtor 和 bCtor 必须都存在而且都不是 Object 构造函数的状况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦 if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) { return false; } } aStack = aStack || []; bStack = bStack || []; var length = aStack.length; // 检查是否有循环引用的部分 while (length--) { if (aStack[length] === a) { return bStack[length] === b; } } aStack.push(a); bStack.push(b); // 数组判断 if (areArrays) { length = a.length; if (length !== b.length) return false; while (length--) { if (!