JS中if(xx)和==判断的类型转换规则

在js里面,在使用if语句的时候,我们都知道,使用严格相等运算符===来进行条件判断,但是在日常工作中,我们可能经常会碰到这种代码:

if(xxx){
...
}

或者是

if(xxx==0){
...
}

那么这种情况下,if里面的条件是否成立,看起来就要花费一番心思了,而且有的时候的结果可能并非符合直觉。接下来就来解密一下当遇到上面两种情况时,条件到底何时能够成立呢

if(xxx)的情况

以下几个场景的结果分别是多少?

if ("hello") {
    console.log("hello")
}

if ("") {
    console.log('empty')
}

if (" ") {
    console.log('blank')
}

if ([0]) {
    console.log('array')
}

if('0.00'){
  console.log('0.00')
}

如果没有了解一定的规则,只凭直觉来判断的话,以上的代码很难估计出正确的结果。但是我们可以了解if(xxx)判断的规则后再去看,那么结果可能就显而易见了
对于if括号里的表达式,会被强制转换为布尔类型,而转换的规则如下

类型 结果
Undefined false
Null false
Boolean 直接判断
Number +0, −0, 或者 NaN 为 false, 其他为 true
String 空字符串为 false,其他都为 true
Object true

有了这个规则之后,再回头去看上面的问题,不难得出结果,分别为:
true false true true true

xxx==xx的情况
类似的,我们来看看不同类型的值使用==比较的结果
有如下问题

!" " == false
"0" == false  
"00" == false  
"0.00" == false  
undefined == null 
{} == true  
[] == true 
var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
obj == "[object Object]"
obj == 1 
obj == true 

下表为==相等运算符的转换规则

x y 结果
null undefined true
Number String x == toNumber(y)
Boolean (any) toNumber(x) == y
Object String or Number toPrimitive(x) == y
otherwise otherwise false

toNumber

type Result
Undefined NaN
Null 0
Boolean ture -> 1, false -> 0
String “abc” -> NaN, “123” -> 123

toPrimitive
对于 Object 类型,先尝试调用 .valueOf 方法获取结果。 如果没定义,再尝试调用 .toString方法获取结果

从上方表格可以看出,当数字和字符串比较时,会将字符串转换为数字,而对象和字符串做比较时,会调用对象的valueOf或toString方法进行转换
因此上面的答案分别为
true
true
true
true
true
false
false
fasle
true
true

总结
虽然我们了解了上述两种情况的类型转换规则,但是在日常工作中还是建议使用规范的if(xxx===xx)的严格相等运算符的格式,否则可能会带来意想不到的副作用,也会给团队其他成员带来理解上的困扰

你可能感兴趣的:(JS中if(xx)和==判断的类型转换规则)