js中绕晕你的true、false

date: 2019-02-26 14:25:01

tags: js、类型转换、空数组、空对象、==

起因

大概从开始写前端代码一段时间后你就会遇到false判断的各种坑，层出不穷。为什么会有坑，又怎样避免这些坑？ 下面，我们就得好好了解一下这些能转为false的值了。

结果

js的类型转换虽是繁琐的，但也是有迹可循的。首先我们来看一下能转化为false的值，见下表：

共6种，其余的值转化为布尔值时都是true。即这6种在判断X==flase为true，同样在if判断中会将值先转化为布尔值，因此这6种值在if或三目运算中为flase。

console.log(undefined ? true : false); //false
console.log(null ? true : false); //false
console.log(0 ? true : false); //false
console.log('0' ? true : false); //true
console.log('undefined' ? true : false); //true
console.log(([0]) ? true : false); //true [0]为object

而空对象{}、空数组[]直接放到if判断中都为true，因为数组属于对象类型，对象类型转为布尔类型（ToBoolean 算法）时都是true。但当判断[] == false时结果却是true。下面我们就来讨论一下关于“==”的问题。

进阶

上面提到空数组和空对象在if判断中为true，但

console.log([] == false ? true : false);//true
console.log({} == false ? true : false);//false

这又是为什么呢？原因就是“==”在进行判断前会对两边的操作值进行隐式转换。规则如下：

• 一个值是null，另一个是undefined，则它们相等。
• 一个值是数字，另一个是字符串，先将字符串调用Number()转换成数字，然后使用转换后的值进行比较。
• 一个值为布尔值，则在比较之前先将其转换为数值。
• 一个值是对象，另一个值是数字或字符串，则调用对象的valueOf()转换为原始值，然后再进行比较。
• 两个值都是对象，则比较它们是不是指向同一个对象
• 其他类型之间的比较均不相等。 上述表达式中，与flase比较前先将空对象 {} 与空数组 [] 转换为数值，即

Number([]) //0
Number({}) //NaN
Number(false) //0

因此，转化为

console.log([] == false ? true : false); => Number([]) == Number(false) => 0 == 0 => true