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

概述

本文主要讲解JavaScript中的三种相等运算:=====Object.is()。经过对比和例子,加深你们的印象,并就个别例子进行详细说明。segmentfault

预备知识

ECMAScript7规范中的ToPrimitive抽象操做数组

===运算符

对于x === y,该运算符的比较步骤以下:app

  1. 若是x的类型和y的类型不同,返回false
  2. 若是x的类型是数字,那么:编码

    1. 若是xNaN,返回false
    2. 若是yNaN,返回false
    3. 若是xy是同一个数字值,返回true
    4. 若是x+0y-0,返回true
    5. 若是x-0y+0,返回true
    6. 返回false
  3. 返回SameValueNonNumber(x, y)的结果。

SameValueNonNumber(x, y)抽象操做比较两个非数字而且同类型的xy是否相等,比较步骤以下:code

  1. 若是x的类型是null或者undefined,返回true
  2. 若是x是字符串类型,对象

    1. 若是xy是彻底相同的字符编码序列,返回true,不然返回false
  3. 若是x是布尔类型,ip

    1. 若是xy同为true或者false,返回true,不然返回false
  4. 若是xsymbol类型,字符串

    1. 若是xy是相同的符号值,返回true,不然返回false
  5. 若是xy是同一个对象值,返回true,不然返回false

须要注意的点是NaN+0-0get

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

这三个例子分别对应x === y比较步骤中的2.12.42.5。这三个例子的输出结果彻底就是按照规范的定义得出的结果,没有为何,规范就是这么定义的。至于说为何规范要这样定义,可能就须要去问规范的制定者了,这个就不在本文的讨论范围以内了。string

Object.is()

对于Object.is(x, y),会使用抽象操做SameValue(x, y)进行比较,该抽象操做的步骤以下:

  1. 若是x的类型和y的类型不同,返回false
  2. 若是x的类型是数字,那么:

    1. 若是xy都是NaN,返回true
    2. 若是x+0y-0,返回false
    3. 若是x-0y+0,返回false
    4. 若是xy是同一个数字值,返回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. 若是xy的类型相同,返回x === y的结果;
  2. 若是xnullyundefined,返回true
  3. 若是xundefinedynull,返回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

上面用到了方法ToNumberToNumber(x)的步骤以下:

  1. 若是x的类型是Undefined,返回NaN
  2. 若是x的类型是Null,返回+0
  3. 若是x的类型是布尔类型,xtrue返回1false返回+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步?

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

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

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

总结

本文讲解了JavaScript中的三种相等运算:=====Object.is(),但愿对你们有所帮助。若是本文有什么错误或者不严谨的地方,欢迎在评论区留言。

参考资料

  1. es7规范
相关文章
相关标签/搜索