要做到判断两个对象相等，必然会涉及到多个类型的判断。

相等

什么是相等呢？ JavaScript中存在 ==、=== 的概念。抛开JS的问题，

一般我们认为的相等是如下：

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

不仅仅是这些长得一样的，还有

1 和 new Number(1) 是相等
'Curly' 和 new String('Curly') 是相等
true 和 new Boolean(true) 是相等

更复杂的我们会在接下来的内容中看到。

目标

目标是写一个这样子的函数

function eq(a, b) { ... }

var a = [1];
var b = [1];
console.log(eq(a, b)) // true

看似很简单，需要了解一些情况下是如何判断的。

+0与-0

如果是 a===b 的结果为true，那么a和b就是相等的么？一般情况下，当然是这样的，但是有一个特殊的例子就是 +0和-0。

以下认为 -0 和 +0 不相等。

JavaScript 处心积虑的想抹平两者的差异：

// 表现1
console.log(+0 === -0); // true

// 表现2
(-0).toString() // '0'
(+0).toString() // '0'

// 表现3
-0 < +0 // false
+0 < -0 // false

即便如此两者依然是不同的：

/ +0 // Infinity
/ -0 // -Infinity

/ +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

a === b已经默认相等，然后进入 a !== 0 || 1 / a === 1 / b判断。这是一个短路判断。

第一个	第二个	结果	情况
true	false	true	非0的ab,相等进入，不等于0 就结束返回true
false	true	true	ab相等但是 a==0 说明 ab可能是 -0、+0 这时候进入判断
true	true	true	短路计算，a!==0 直接返回
false	false	false	a!==0 说明可能是 -0 +0, 后者也是false说明就是 -0 +0

Object.is

Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:

都是 undefined
都是 null
都是 true 或 false
都是相同长度的字符串且相同字符按相同顺序排列
都是相同对象（意味着每个对象有同一个引用）
都是数字且
    都是 +0
    都是 -0
    都是 NaN
    或都是非零而且非 NaN 且为同一个值

Object.is 可以单独来判断正负0。

除零法

就是上面例子里展示的。这是js特有的：

const isNegativeZero = num => num === 0 && 1/num === -Infinity;

其他语言的其他方法

JavaScript 里面 1/0 => Infinity , 1/-0 => -Infinity, 会有人发现他是不会报错的！

比如Python、Ruby 他们会报 ZeroDivisionError: division by zero 像这样的如何界定呢？

Python & Ruby 里的 -0、+0

Python 和 Ruby里面 -0 == +0 返回true（他们 == 就是严格等于）

如何区分 -0 和 +0 呢？

可以使用对于符号敏感的函数，比如 atan2 反余弦函数。

反余弦 atan2

atan2() 函数的功能是求 y/x 的反正切值。atan2() 是 atan() 的增强版，能够确定角度所在的象限。

反正切函数 atan2() 和正切函数 tan() 的功能恰好相反：tan() 是已知一个角的弧度值，求该角的正切值；而 atan2() 是已知一个角的正切值（也就是 y/x），求该角的弧度值。

参数

y：表示位于 Y 轴上的值。
x：表示位于 X 轴上的值。

atan2示意图

返回 y/x 的反正切值，以弧度表示，取值范围为(-π,π]。如上图所示，tan(θ) = y/x，θ = atan2(y, x)。

当 (x, y) 在象限中时：

当 (x, y) 在第一象限，0 < θ < π/2
当 (x, y) 在第二象限，π/2 < θ ≤ π
当 (x, y) 在第三象限，-π < θ < -π/2
当 (x, y) 在第四象限，-π/2 < θ < 0

当 (x, y) 在象限的边界（也就是坐标轴）上时：

当 y 是 0，且 x 为非负值，θ = 0
当 y 是 0，且 x 是负值，θ = π
当 y 是正值，且 x 是 0，θ = π/2
当 y 是负值，且 x 是 0，θ = -π/2

所以利用这个函数对符号的敏感性，可以进行区分：

>>> math.atan2(-0.0,0.0)
-0.0
>>> math.atan2(0.0,-0.0)
3.141592653589793

字符串

ruby,python也可以通过格式化字符串简单判断

printf("%+f",-0.0)

>>> "{:+}".format(-0.0)
'-0.0'

总结

总之，方法可能非常多，只要掌握住寻找符号敏感的差异化计算，根据结果区分就好了。

这就是这道题目的主要思想。

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的第一版

// 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 deepEq(a,b);
}

也许你会好奇是不是少了一个 typeof b!== function ?

试想如果我们添加上了这句，当 a 是基本类型，而 b 是函数的时候，就会进入 deepEq 函数，而去掉这一句，就会进入直接进入 false，实际上基本类型和函数肯定是不会相等的，所以这样做代码又少，又可以让一种情况更早退出。

String 对象

现在我们开始写 deepEq 函数，一个要处理的重大难题就是 ‘Curly’ 和 new String(‘Curly’) 如何判断成相等？

两者的类型都不一样呐！不信我们看 typeof 的操作结果：

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

但是在判断类型的那篇文章里

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呢？

deepEq 函数

现在我们可以写一点 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的值。

最终的eq函数

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 (!eq(a[length], b[length], aStack, bStack)) 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], aStack, bStack))) return false;
        }
    }

    aStack.pop();
    bStack.pop();
    return true;

}

console.log(eq(0, 0)) // true
console.log(eq(0, -0)) // false

console.log(eq(NaN, NaN)); // true
console.log(eq(Number(NaN), Number(NaN))); // true

console.log(eq('Curly', new String('Curly'))); // true

console.log(eq([1], [1])); // true
console.log(eq({ value: 1 }, { value: 1 })); // true

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;


console.log(eq(a, b)) // true

真让人感叹一句：eq 不愧是 underscore 中实现代码行数最多的函数了！

方案2

TODO

基本类型其实可以 toString 统一解决掉

判断不同类型 123和‘123’会失效
其他通过转字符串来比较

function eq2(a,b) { return String(a) === String(b)}

总结

这篇是笔记，主要在于参考目录。学习的过程中加入了一些自己的实验。

有空我重新整理一遍。

比较两个对象相等，发挥出那么多。其中可以看到研究方法:

通过差异化的运算值、api、函数接口进行区分对象
工程性思考

编程是一种平衡艺术，在 -0、+0的部分尤其。不同语言给出了不同的定义。但是在我们制作 eq的时候，是站在上面进行思考，思考一个新的api，这时候也要开始平衡。

工程性的思考：

平衡
解决问题

正面、侧面、曲线只要可以解决问题，就可以。这就是工程性的思考，利用已知信息巧妙组合，合理解决问题。

全面思考情况

思考、列举各种情况细节。

额外思考：

需要明白一种边界和能力的存在。

就是JavaScript相对来说把类型设计的太复杂了，还有历史问题，制造了各种情况。但是即使是这样，JS有千万个问题。本质上也可以根据其提供的特点在后期“圆”回来。

这也就是现实中为什么JS会出现那么多的“框架”，jquery、underscore、backbone、react、vue、ember……

这些本质上都是在JS的基础上构建一种新的DSL去工作，弥补JS的问题，并且建立一种更简单的工作模型。

这些框架不会是最后一个。

Mark24

JavaScript编程之判断两个对象相等

相等

目标