你真的理解了比较运算符吗？

日常咱们都是不建议在代码上编写一些比较难理解的代码，例如 x == y 和 'A' > 'B' 。这篇文章或许不能给你带来什么大的帮助，可是却可让你了解一些你可能没接触到的知识点。

因为有些参考资料来源于 ECMA 规范，因此感兴趣的可能须要先看《读懂 ECMAScript 规格》这篇文章，固然也能够忽略。

类型之间的转换表

首先咱们须要先了解基本的类型转换规则。

粗体须要特别留意的，可能跟你想象中的不同。

原始值	转换为数字	转换为字符串	转换为布尔值
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob","Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

这里根据上面的表格列举些例子：

• 数字转字符串

  这个最经常使用了，这个也很好理解。

  String(123)
  复制代码

  或者

  const a = 123;
  a.toString();
  复制代码

• 将字符串转换为数字

  Number("3.14")    // 返回 3.14
  Number(" ")       // 返回 0
  Number("")        // 返回 0
  Number("99 88")   // 返回 NaN
  复制代码

• 字符串转布尔值

  Boolean('test')  // 返回 true
  Boolean('0')  // 返回 false
  Boolean('000')  // 返回 true
  复制代码

== 比较运算符

规则来源于 ECMA 相关规范 Abstract Equality Comparison。

== 等同运算符的两边的类型不同的时候，会有类型自动转换规则。

相同的类型能够直接比较（至关于 === 比较），无需自动转换，不一样类型有下面几种自动转换规则（x == y），规则优先级自上而下：

1. 若是 x 是 null，y 是 undefined，返回 true

   null == undefined
   复制代码

2. 若是 x 是 undefined，y 是 null，返回 true

   undefined == null
   复制代码

3. 若是 x 是 Number，y 是 String，将 y 转化成 Number，而后再比较

   0 == '0' // true
   0 == '1' // false
   复制代码

4. 若是 x 是 String，y 是 Number，将 x 转化成 Number，而后再比较

   '0' == 0 // true
   '1' == 0 // false
   复制代码

5. 若是 x 是 Boolean，那么将 x 转化成 Number，而后再比较

   true == 0 // false
   true == 1 // true
   true == 2 // false
   true == 'test' // false
   false == 0 // true
   false == 1 // false
   false == 2 // false
   false == 'test' // false
   复制代码

6. 若是 y 是 Boolean，那么将 y 转化成 Number，而后再比较

   0 == true // false
   1 == true // true
   2 == true // false
   'test' == true // false
   0 == false // true
   1 == false // false
   2 == false // false
   'test' == false // false
   复制代码

7. 若是 x 是 String 或者 Number，y 是 Object，那么将 y 转化成基本类型，再进行比较

   const a = {}
   1 == a    // false
   '1' == a  // false
   复制代码

8. 若是 x 是 Object，y 是 String 或者 Number，将 x 转化成基本类型，再进行比较

   const a = {}
   a == 1    // false
   a == '1'  // false
   复制代码

9. 其余状况均返回 false

   const a = {}
   a == null
   a == undefined
   0 == null
   '2' == null
   false  === null
   复制代码

即便咱们搞懂了 == 的规则，仍是建议使用 === 这种严格的运算符来替代 ==。

> 或者 < 比较运算符

规则来源于 ECMA 相关规范 Abstract Relational Comparison。

x < y 的规则步骤以下（规则优先级自上而下）：

1. x 和 y 须要转换为原始数据类型（ToPrimitive）

   var px = ToPrimitive(x)
   var py = ToPrimitive(y)
   // 下面会沿用这两个变量的
   复制代码

   除开原始的数据类型 undefined、null、boolean、number、string、 symbol，其余的都属于对象，因此能够理解为这个 ToPrimitive 只对对象有做用。（还有个特殊的 NaN，不须要转换，NaN 能够理解为一种特殊的 number，typeof NaN === 'number'）。

   若是 x 或者 y 是对象，须要作转换处理，因为这里涉及的比较深，这里仍是简单的说一下，知道有这回事就好。

   var a = {}
   a < 'f' // true
   a < 'F' // false
   // a 会转变为 [object Object]
   // 至关于运行了 a.valueOf().toString()
   复制代码

   为何不直接 a.toString() 呢，看下下面的例子你就懂了（会首先运行 valueOf，若是返回的是对象则再运行 toString，不然直接返回 valueOf 的返回值）

   var d = new Date(1572594637602)
   d < 1572594637603 // true
   d < 1572594637601 // false
   // d 会转变为 1572594637602 (当前时间转变的成的毫秒时间戳)
   // 至关于运行了 a.valueOf()
   复制代码

   若是重写了 valueOf 方法，那么预期结果就不同了

   var d = {}
   // 这里重写定义了valueOf
   d.valueOf = () => 1
   d < 2 // true
   d < 0 // false
   // d 会转变为 1
   // 至关于运行了 a.valueOf()
   复制代码

   更多的例子

   var a = {}
   a < 1 // false，至关于，Number('[object Object]') < 1
   a < 'a' // true，至关于 '[object Object]' < 'a'
   a < '[' // false，至关于 '[object Object]' < '['
   var b = function(){}
   b < 'g' // true，至关于 'function(){}' < 'g'
   b < 'e' // false，至关于 'function(){}' < 'e'
   复制代码

2. 若是 px 和 py 都是字符串

   • 若是 py 是 px 的前缀，返回 false

     'test' < 'te'
     复制代码

   • 若是 px 是 py 的前缀，返回 true

     'test' < 'test1'
     复制代码

   • 若是 px 不是 py 的前缀，并且 py 也不是 px 的前缀

     那么须要从 px 和 py 的最小索引（假设是 k）对应的**字符的 UTF-16 代码单元值 **进行对比。

     假设 m = px.charCodeAt(k)，n = py.charCodeAt(k)，那么若是 m < n，返回 true，不然返回 false。

     'A' < 'B' // true
     // 至关于 'A'.charCodeAt(0) < 'B'.charCodeAt(0)
     复制代码

     更加复杂点的例子

     'ABC' < 'ABD' // true
     // 至关于 
     // var a = 'ABC'.charCodeAt(0) < 'ABD'.charCodeAt(0) // false
     // var b = 'ABC'.charCodeAt(1) < 'ABD'.charCodeAt(1) // false
     // var c = 'ABC'.charCodeAt(2) < 'ABD'.charCodeAt(2) // true
     // a || b || c
     复制代码

3. 其余状况 px 和 py 一概转为数字类型进行比较

   var nx = Number(px)
   var ny = Number(py)
   复制代码

   例子

   '2' < 3 // true
   '2' < 1 // false
   复制代码

x > y 的道理同样，这里就很少说了。

参考文章

• 读懂 ECMAScript 规格

• JavaScript中==等同运算符的类型转换

• JavaScript 类型转换