前言

类型转换在各个语言中都存在，而在 JavaScript 中由于缺乏对其的了解而不慎在使用中经常造成bug被人诟病。为了避免某些场景下的意外，甚至推崇直接使用 Strict Equality( === )来代替 ==。这确实能避免很多bug，但更是一种对语言不理解的逃避(个人观点)。

引入

先抛出在 You Don’t Know JavaScript (中) 看到的一个例子

  [] == [] // false
  [] == ![] // true
  {} == !{} // false
  {} == {} // false

是不是很奇怪？本文将从书中看到的知识与规范相结合，来详细说明一下JavaScript在类型转换时候发生的故事。

类型转换

很多人喜欢说显示类型转换与隐式类型转换，但个人感觉只是说法上的不同，实质都在发生了类型转换而已，故不想去区分他们了（感觉一万个人有一万种说法）

仅在6大基本类型 null undefined number boolean string object 作讨论 symbol未考虑

var a = String(1)
var b = Number('1')
var c = 1 + ''
var d = +'1'

String(undefined) // "undefined"
String(null) // "null"
String(true) // "true"

var a = {}
a.toString = function () {return 1}
a.valueOf = function () {return 2}
String(a) // "1"
Number(a) // 2
a + '' // "2"   ???????
+a // 2
a.toString = null
String(a) // "2"
a.valueOf = null
String(a) // Uncaught TypeError: balabala

似乎我们发现了一个很不合规范的返回值，为什么 a + ''不应该返回”1″吗

不要畏惧使用 ==

基础概念已经了解了，那么在 == 中到底发生了什么样的类型转换，而导致了经常产生出乎意料的bug，导致了它臭名昭著。

  [] == [] // false
  // 1. 两遍类型都为 Object，比较引用地址，不同返回false 搞定
  [] == ![] // true
  // 1. ![]强制类型转换 变为 [] == false
  // 2. 根据规范第7条，返回 [] == ToNumber(false), 即 [] == 0
  // 3. 根据规范第9条，返回ToPromitive([]) == 0，数组的valueOf为本身，不是原始值，则返回toString()即 "" == 0
  // 4. 根据规范第5条，返回ToNumber("") == 0, 即 0 == 0
  // 5. 根据规范第1条，返回 true

  // 下面的不赘述了，分析类似上面
  {} == !{} // false
  {} == {} // false

我们不难看出以下几点

引用 << 你不知道的JS(中) >> 中的2句话

如果两遍的值中有 true 或者 false , 千万不要使用 == (会被转为数字0,1来进行判断，会出现一些意外的情况)

如果两遍的值中有[]、””或者0，尽量不要使用 ==

抽象比较

先来看看这个例子

var a = { b: 42 }
var b = { b: 43 }
a < b // false
a == b // false
a > b // false

a <= b // true
a >= b // true

是不是感觉到世界又崩塌了？？？

让我们来仔细分析一下

var a = { b: 42 }
var b = { b: 43 }
a < b // false 
// 1. 两遍调用ToPrimitive, 返回[object Object] 两遍一致 返回 false
a == b // false
// 两遍不同的引用，返回false
a > b // false
// 同 a < b

a <= b // true
// 按规范其实是处理成 !(a > b) 所以为true
a >= b // true

所以在不相等比较的时候，我们最后还是进行手动的类型转换较为安全

总结

深入了解类型转换的规则，我们就可以很容易取其精华去其糟粕，写出更安全也更简洁可读的代码

链接: https://www.fly63.com/article/detial/4243