JavaScript的类型转换

引子

平时工作中使用 JavaScript 中，有时候会不自觉的遇到类型转换相关的问题还不自知，下面介绍两种常见的类型转换情况，以及转换结果,注意不要在工作中使用这种写法，这种写法会导致结果的不明确。

if(xx)

有时候，为了简便，我们可能会写出如下代码：

var a;
if (a) {
  console.log(a);
} else {
  console.log("a 未赋值");
}

但是实际上，即使 a 有值，例如a=" "依旧会打印a 未赋值，这是因为括号里的表达式会强制转化为布尔类型，转化规则如下。

类型	结果
Undefined	False
Null	False
Boolean	直接判断
Number	+0,-0,NaN 为 false，其他为 true
String	空字符串为 false，其他均为 true
Object	True

a == b

JavaScript中==判断会发生类型转换，转化为Number类型进行比较，得出结果，转换规则如下：

a	b	结果
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方法获取结果。

常见题目

if(xxx)

// 题目1：如下代码输出什么?
if ("hello") {
  console.log("hello");
}
// hello

// 题目2：如下代码输出什么?
if ("") {
  console.log("empty");
}
// 无

// 题目3：如下代码输出什么?
if (" ") {
  console.log("blank");
}
// blank

// 题目4：如下代码输出什么?
if ([0]) {
  console.log("array");
}
// array

if ("0.00") {
  console.log("0.00");
}
// 无

a == b

"" == 0; //题目1 true
" " == 0; //题目2 true
"" == true; //题目3 false
"" == false; //题目4 true
" " == true; //题目5 false
!" " == true; //题目6 false
!" " == false; //题目7 true
"hello" == true; //题目8 false
"hello" == false; //题目9 false
"0" == true; //题目10 false
"0" == false; //题目11 true
"00" == false; //题目12 true
"0.00" == false; //题目13 true
undefined == null; //题目14 true
true == {}; //题目15 false
true == []; //题目16 false
var obj = {
  a: 0,
  valueOf: function () {
    return 1;
  },
};
obj == "[object Object]"; //题目17 false
obj == 1; //题目18 true
obj == true; //题目19 true

小结

平时工作中一定不要使用if(xxx)和a==b的写法，遇到这种写法时，依据上述方式进行判断，就能很快得到结果。