JavaScript中的==，===和Object.is()

概述

本文主要讲解JavaScript中的三种相等运算：==，===和Object.is()。通过对比和例子，加深大家的印象，并就个别例子进行详细说明。

预备知识

ECMAScript7规范中的ToPrimitive抽象操作

===运算符

对于x === y，该运算符的比较步骤如下：

1. 如果x的类型和y的类型不一样，返回false；

2. 如果x的类型是数字，那么：

   1. 如果x是NaN，返回false；
   2. 如果y是NaN，返回false；
   3. 如果x和y是同一个数字值，返回true；
   4. 如果x是+0，y是-0，返回true；
   5. 如果x是-0，y是+0，返回true；
   6. 返回false；
3. 返回SameValueNonNumber(x, y)的结果。

SameValueNonNumber(x, y)抽象操作比较两个非数字并且同类型的x和y是否相等，比较步骤如下：

1. 如果x的类型是null或者undefined，返回true；

2. 如果x是字符串类型，

   1. 如果x和y是完全相同的字符编码序列，返回true，否则返回false；

3. 如果x是布尔类型，

   1. 如果x和y同为true或者false，返回true，否则返回false；

4. 如果x是symbol类型，

   1. 如果x和y是相同的符号值，返回true，否则返回false；
5. 如果x和y是同一个对象值，返回true，否则返回false。

需要注意的点是NaN，+0，-0：

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true

这三个例子分别对应x === y比较步骤中的2.1，2.4和2.5。这三个例子的输出结果完全就是按照规范的定义得出的结果，没有为什么，规范就是这么定义的。至于说为什么规范要这样定义，可能就需要去问规范的制定者了，这个就不在本文的讨论范围之内了。

Object.is()

对于Object.is(x, y)，会使用抽象操作SameValue(x, y)进行比较，该抽象操作的步骤如下：

1. 如果x的类型和y的类型不一样，返回false；

2. 如果x的类型是数字，那么：

   1. 如果x和y都是NaN，返回true；
   2. 如果x是+0，y是-0，返回false；
   3. 如果x是-0，y是+0，返回false；
   4. 如果x和y是同一个数字值，返回true；
   5. 返回false；
3. 返回SameValueNonNumber(x, y)的结果。

由此可见，===和Object.is()的区别在于对NaN和带符号的0的处理：

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true
Object.is(NaN, NaN) // true
Object.is(+0, -0) // false
Object.is(-0, +0) // false

==运算符

对于x == y，该运算符的比较步骤如下：

1. 如果x和y的类型相同，返回x === y的结果；
2. 如果x是null，y是undefined，返回true；
3. 如果x是undefined，y是null，返回true；
4. 如果x的类型是数字，y的类型是字符串，返回x == ToNumber(y)的结果；
5. 如果x的类型是字符串，y的类型是数字，返回ToNumber(x) == y的结果；
6. 如果x的类型是布尔类型，返回ToNumber(x) == y的结果；
7. 如果y的类型是布尔类型，返回x == ToNumber(y)的结果；
8. 如果x的类型是字符串、数字或者Symbol中的一种，y的类型是对象，返回x == ToPrimitive(y)的结果；
9. 如果x的类型是对象，y的类型是字符串、数字或者Symbol中的一种，返回ToPrimitive(x) == y的结果；
10. 返回false。

上面用到了方法ToNumber，ToNumber(x)的步骤如下：

1. 如果x的类型是Undefined，返回NaN；
2. 如果x的类型是Null，返回+0；
3. 如果x的类型是布尔类型，x为true返回1，false返回+0；
4. 如果x的类型是数字，返回x；
5. 如果x的类型是字符串，参考字符串转化为数字，本文不详细介绍这块内容；
6. 如果x的类型是Symbol，返回NaN；

7. 如果x的类型是对象，

   1. 让primValue的值是ToPrimitive(x, hint Number)；
   2. 返回ToNumber(primValue)的结果；

[] == ![]

上面讲了==运算符的比较步骤，下面我们讲一个例子加深下印象：

[] == ![]

首先左边的[]是一个空数组，类型是对象，右边是![]，[]是一个真值，所以![]的结果是false：

[] == ![] // => [] == false

然后会走到x == y比较步骤的第7步，返回x == ToNumber(y)的结果，也就是：

[] == false // => [] == ToNumber(false)

由ToNumber(x)的第3步可知，ToNumber(false)返回+0：

[] == ToNumber(false) // => [] == +0

然后走到x == y比较步骤的第9步，返回ToPrimitive(x) == y的比较结果：

[] == +0 // => ToPrimitive([]) == +0

ToPrimitive([])的结果是空字符串""，原因请查看文章ECMAScript7规范中的ToPrimitive抽象操作。所以，上面等价于：

"" == +0

然后走到x == y比较步骤的第5步，返回ToNumber(x) == y的结果：

"" == +0 // => ToNumber("") == +0

由ToNumber操作的第5步可知，ToNumber("")的结果是+0，所以也就是：

+0 == +0 // true

{} == !{}

首先，左边是{}，类型是对象，右边是!{}，{}是真值，所以!{}是false：

{} == !{} // => {} == false

然后同样会走到x == y比较步骤的第7步，返回x == ToNumber(y)的结果，也就是：

{} == false // => {} == ToNumber(false)

由ToNumber(x)的第3步可知，ToNumber(false)返回+0：

{} == ToNumber(false) // => {} == +0

然后走到x == y比较步骤的第9步，返回ToPrimitive(x) == y的比较结果：

{} == +0 // => ToPrimitive({}) == +0

ToPrimitive({})的结果是字符串"[object Object]"，原因请查看文章ECMAScript7规范中的ToPrimitive抽象操作。所以，上面等价于：

"[object Object]" == +0

然后走到x == y比较步骤的第5步，返回ToNumber(x) == y的结果：

"[object Object]" == +0 // => ToNumber("[object Object]") == +0

由ToNumber操作的第5步可知，ToNumber("[object Object]")的结果是NaN，所以也就是：

NaN == +0 // false

所以，[] == ![]的结果是true，{} == !{}的结果是false。可能有人第一次看到[] == ![]的时候，觉得这个的比较结果怎么可能是true。我觉得有时候不要感性的去认识问题，按照规定的运算步骤走一遍，结果是什么就是什么。

如何证明x == y比较步骤的第4步和第5步？

这个问题的详细描述是当==运算符两边分别是数字和字符串类型的时候，如何证明是如步骤4和5描述的那般把字符串转化成了数字，而不是把数字转化成了字符串？

答：思路是：是否存在这样一个例子，使得把数字转化为字符串后的比较结果是false，字符串转化为数字后的比较结果是true。是的，确实存在这样的例子：

+'3.0' // 3 => 3 == 3 => true
'' + 3 // '3' => '3.0' == '3' // false
'3.0' == 3 // true，证明是把字符串转化成了数字

总结

本文讲解了JavaScript中的三种相等运算：==，===和Object.is()，希望对大家有所帮助。如果本文有什么错误或者不严谨的地方，欢迎在评论区留言。

参考资料

1. es7规范