if条件判断中的类型转换和==的类型转换的差异

if条件判断中的类型转换和==的类型转换的差异

首先给出一段代码

if([]){
    console.log('Empty Array is true')
}
if({}){
    console.log('Empty Object is true')
}

/********************************/

console.log([] == true)

console.log({} == true)

答案是

Empty Array is true
Empty Object is true
false
false

为什么会有这样的结果呢

首先我们来看看if条件判断中是怎么进行类型转化的

if([]){
    console.log('Empty Array is true')
}
//等价于
if(Boolean([])){
    console.log('Empty Array is true')
}

/********************************/

if({}){
    console.log('Empty Array is true')
}
//等价于
if(Boolean({})){
    console.log('Empty Array is true')
}

从《Javascript高级程序设计》我们可以从第3.4章查找到Boolean类型的转换规则

可以看见任何Object强转成Boolean类型都为true

接下来我们来看看==的类型转换

从《Javascript高级程序设计》我们可以从第3.5.7章查找到==的部分转换规则

1. 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为 0，而true 转换为 1；
2. 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
3. 如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法（注：如果valueOf()方法没有定义，则调用toString()方法），用得到的基本类型值按照前面的规则进行比较；
4. 如果有一个操作数是 NaN，则相等操作符返回 false

先以空数组为例

[] == true                              //1
[].toString() == true                   //2.运用规则3
"" == true                              //3
"" == 1                                 //4.运用规则1
Number("") == 1                         //5.运用规则2
0 == 1                                  //6

//结果为false

以一个非空数组为例

['a','b','c'] == true                   //1
['a','b','c'].toString() == true        //2.运用规则3
"a,b,c" == true                         //3
"a,b,c" == 1                            //4.运用规则1
Number("a,b,c") == 1                    //5.运用规则2
NaN == 1                                //6.运用规则4

//结果为false

再以空对象为例

{} == true                              //1
{}.toString() == true                   //2.运用规则3
"[object Object]" == true               //3
"[object Object]" == 1                  //4.运用规则1
Number("[object Object]") == 1          //5.运用规则2
NaN == 1                                //6.运用规则4

//结果为false

结论

为了避免可读性下降，团队成员难以判断或出现意外的结果

尽量在if条件判断中用==进行判断