「if(xxx){}else{} 输出什么

问题：if(xxx){console.log(1)}else{console.log(2)}，输出为2的类型有哪些？

解答：

当我们用 if 做判断的时候，if 后面的括号里表达式的值必须是布尔型，比如

if(a > 1){
    console.log('a>1')
}
if(b === 3 || c > 4){
   console.log('hello')
}

如果括号里是其他写法，则会把运算后的值强制转换为布尔型，如

if(1){     // Boolean(1) -> true
   console.log('hello')
}
 
if( a = 3 ){   // a = 3 的结果是3, Boolean(3) -> true
   console.log('hello')
}
 
if( a = 0 ){   // a = 0 的结果是3, Boolean(0) -> false
   console.log('hello')
}else{
   console.log('world')   // 输出world
}

强制转换结果为 falsy的值基础类型有6个：

• false
• 0
• '', 注意这里是空字符串，不是 ' '
• null
• undefined

• NaN

看下面几个例子：

var a;
if(a){console.log(1)}else{console.log(2)}   //输出2
 
if(""){console.log(1)}else{console.log(2)}   //输出2
 
if(a=null){console.log(1)}else{console.log(2)} //输出2, a=null的结果是null
 
if(1/'a'){console.log(1)}else{console.log(2)} //输出2， 1/'a'为NaN
 
if(parseInt('123hello')){  //parseInt('123hello') -> '123' -> true
    console.log(1)
}else{
    console.log(2)
}
 
if(Number('123hello')){  //Number('123hello') -> NaN -> false
    console.log(1)
}else{
    console.log(2)
}

从上面的例子可以看出直接做判断代码的可读性很差，一不留神就埋下了难以察觉的祸根。

所以我们建议用 === 做精准判断，比如：

if(a === ''){console.log(1)} else{console.log(2)}

但 NaN的判断除外

if( 1/'a' === NaN) {console.log(1)} else{console.log(2)}  //输出2
if(isNaN(1/'a')) {console.log(1)} else{console.log(2)}   //输出1

还有一点需要注意，对于 函数、数组、对象、正则... 这些引用类型，Boolean 强制转换后结果都是 true， 如:

if( {} ){console.log(1)} else{console.log(2)}  // 输出1
if( [] ){console.log(1)} else{console.log(2)}  // 输出1
if(document.body){console.log(1)} else{console.log(2)}   //输出1

但有一个对象例外： document.all， 参考前面每日一题 「每日一题」为什么 document.all 有时像一个对象，有时又不像一个对象 - 前端学习指南 - 知乎专栏

if( document.all ) {console.log(1)} else{console.log(2)}  // 输出2

完

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷若愚老师