JS小技巧--[]、{}的隐式转换 （ js数组[undefined] ）

首先看个小例子

if([]){
  console.log(111);	//111
}
if({}){
  console.log(222);	//222
}
if([] == false){
  console.log(333); //333
}
if({} == false){
  console.log(444);
}

前三个if语句打印成功，故前两个if语句中表达式成立，[]，{}是true，是可以进来的。

但为什么第三个if语句表达式中[]又等于false了呢？

分析一下每个if语句的表达式：

if([]){
  console.log(111);   
  /*
    []做隐式转换
    -> Boolean([])
    -> true 成立
  */
}
if({}){
  console.log(222);
  /*
    {}做隐式转换
    -> Boolean({})
    -> true 成立
  */
}
if([] == false){
  console.log(333);
  /*
    当对象和布尔值作比较时，先将布尔值转化为Number类型
    -> [] == Number(false) 
    再将对象转化为Number类型
    -> Number([].toString()) == 0 
    -> Number('') == 0 
    -> 0 == 0 成立
  */
}
if({} == false){
  console.log(444);
  /*
    当对象和布尔值作比较时，先将布尔值转化为Number类型
    -> {} == Number(false) 
    -> {} == 0
    再将对象转化为Number类型
    -> Number({}.toString()) == 0 
    -> Number('[object Object]') == 0
    -> NaN == 0 不成立
  */
}

原理：

当[]、{}运算时，比如在if ([]) {}中、或者!去反中，会触发自动类型转换，底层将其转化为布尔类型（如例1、例2）。

当[]、{}与布尔值作比较时，会将==号两侧的值转化为Number类型作比较。true转化为1比较好理解，而[]、{}则是通过先toString方法后，再转化为Number类型（如例3、例4）。

小练习

if([undefined] == false){
  console.log(555);
}
if([undefined,undefined] == false){
  console.log(666);
}
if([] == ![]){
  console.log(777);
}

答案解析：

if([undefined] == false){
  console.log(555); //555
  /*
    当对象和布尔值作比较时，先将布尔值转化为Number类型
    -> [undefined] == Number(false) 
    -> [undefined] == 0
    再将对象转化为Number类型
    -> Number([undefined].toString()) == 0 
    -> Number('') == 0
    -> 0 == 0 成立
  */
}
if([undefined,undefined] == false){
  console.log(666);
  /*
    当对象和布尔值作比较时，先将布尔值转化为Number类型
    -> [undefined,undefined] == Number(false) 
    -> [undefined,undefined] == 0
    再将对象转化为Number类型
    -> Number([undefined,undefined].toString()) == 0 
    -> Number(',') == 0
    -> NaN == 0 不成立
  */
}
if([] == ![]){
  console.log(777); //777
  /*
    !优先级比==高
    -> [] == Boolean([])
    -> [] == false
    当对象和布尔值作比较时，先将布尔值转化为Number类型
    -> [] == Number(false)
    -> [] == 0
    -> Number([].toString()) == 0
    -> Number('') == 0
    -> 0 == 0 成立
  */
}