JavaScript中的类型转换规则
这是我参与更文挑战的第13天，活动详情查看：更文挑战
可以看出，JavaScript的隐式类型转换是很有意思的（让人摸不着头脑）
同时面试中页通常会遇到类型转换的考（ba）题（gu），比如：
// 哪些为真?
if([])
if({})
if([]==false)
if({}==false)
if([] == ![])
如果看着这题摸不着头脑，大伙儿可以接着往下看
本文较完整的梳理一下常见的类型转换规则与转换场景
一点说明： 文中的值类型等价于所说的基础类型，其范围是（boolean,string,number）
向基础类型转换
布尔Boolean
转换为boolean的方式
常用的两种
!!value：取反两次Boolean(value)：用Boolean包裹
转换为假（false）
undefined，null，NaN，''，0--> false
点击查看示例代码
console.log(!!undefined);
console.log(!!null);
console.log(!!NaN);
console.log(Boolean(''));
console.log(Boolean(0));
转换为真（true）
- 除上述值外的
其它值类型与对象都转为 --> true
点击查看示例代码
console.log(!!{});
console.log(!![]);
console.log(!!new Date());
console.log(Boolean(1));
console.log(Boolean('123'));
数字Number
转换为number的方式
常用的两种
+value：以+开头Number(value)：用Number包裹
数组转数字
Array => Number
- 空数组转为0:
[]--> 0 - 含有一个元素且为
数字或数字字符串则转换为数字：[1]或['1']--> 1 - 其余情况转为
NaN
点击查看示例代码
console.log(+[]); // 0
console.log(+[1]); // 1
console.log(Number(['1.23'])); // 1.23
console.log(Number([1,2])); // NaN
console.log(Number(['1',2])); // NaN
值类型转数字
null--> 0'123'--> 123: 纯数字构成的字符串直接转换为应的数字true--> 1false--> 0'124a'--> NaNundefined--> NaNSymbol--> 抛出错误
点击查看示例代码
console.log(+null); // 0
console.log(+undefined); // NaN
console.log(+'123'); // 123
console.log(+'true'); // NaN
console.log(+true); // 1
console.log(+false);// 0
引用类型转数字
除了上述的数组,日期(Date)之外的引用类型(Object)都转为NaN
点击查看示例代码
console.log(+ new Date()); // 1623597270652
console.log(+ [1]); // 1
console.log(+ {}); // NaN
console.log(+ /\d/); // NaN
字符串String
转字符串的方式
- 加空字符串:
’’ + value - String(value)：用
String包裹
值类型转字符串
- 数字直接转
666--> '666':
- 布尔值直接转换
true--> 'true'false--> 'false'
点击查看示例代码
console.log(''+true); // 'true'
console.log(''+false); // 'false'
console.log(String(666)); // '666'
引用类型转数字
- 数组
[]--> '' ：空数组转为空串[2,'3']--> '2,3' ：非空数组的每一项转为字符串再用,分割
- 对象:
- {} --> [object Object]
- {a:1} --> [object Object]
点击查看示例代码
console.log(String([])); // ''
console.log(String([1,2,'3'])); // '1,2,3'
console.log(String({})); // '[object Object]'
console.log(String({a:1})); // '[object Object]'
对象转基础类型规则
对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，逻辑一般来说如下：
- 如果已经是基础类型了，那就不需要转换了
- 目标类型为字符串就先调用 toString
- 转换为基础类型的话就返回转换的值
- 目标类型不为字符串就先调用 valueOf
- 结果为基础类型，就返回转换的值
- 结果不是基础类型的话再调用 toString
- 如果都没有返回基础类型，就会报错
各种情况示例如下：
点击查看示例代码
const demo1 = {
[Symbol.toPrimitive]: function () {
return 2
}
}
// 情况1
console.log(demo1 + 1); // 3
const demo2 = {
toString() {
return 'demo2'
},
valueOf() {
return 20
}
}
// 情况2
console.log(String(demo2)) // demo2
// 情况3-1
console.log(demo2 - 3); // 17
const demo3 = {
toString() {
return 30
},
valueOf() {
return {}
}
}
// 情况3-2
console.log(demo3 - 4); // 26
const demo4 = {
toString() {
return {}
},
valueOf() {
return {}
}
}
// 情况4
console.log(demo4 + 1); // 报错
四则运算规则中的类型转换
加法
- 有一方为
String，那么另一方也会被转为String - 一方为
Number,另一方为原始值类型，则将原始值类型转换为Number - 一方为
Number,另一方为引用类型，双方都转为String
点击查看示例代码
'123' + 4 // '1234'
123 + true // 124
123 + undefined // NaN
123 + null // 123
123 + [] // '123'
123 + {} // '123[object Object]'
其它
除了加法的运算符来说（-，*，/），会将非Number类型转换为Number类型
== 中的类型转换
NaN不等于任何其它类型Boolean与其它类型进行比较,Boolean转换为NumberString与Number进行比较,String转化为Numbernull与undefined进行比较结果为truenull,undefined与其它任何类型进行比较结果都为false引用类型与值类型进行比较,引用类型先转换为值类型(调用[ToPrimitive])引用类型与引用类型，直接判断是否指向同一对象
来源于参考资料中的网图
点击查看示例代码
[]==![] // true
// [] == false 1. 根据运算符优先级 ![] --> false
// [] == 0 2. 上面规则2
// '' == 0 3. 上面规则6
// 0 == 0 4. 上面规则3
// 所以结果为true
自测
点击查看自测代码
if ([]) console.log(1);
if ({}) console.log(2);
if ([] == false) console.log(3);
if ({} == false) console.log(4);
if ([] == ![]) console.log(5);
if ({} == !{}) console.log(6);
if ('' == false) console.log(7);
if (false == 0) console.log(8);
if (1 == true) console.log(9);
if ('' == 0) console.log(10);
if (NaN == NaN) console.log(11);
if ([] == !true) console.log(12);
if ([] == false) console.log(13);
if ([] == 0) console.log(14);
if (+0 == -0) console.log(15);
if (NaN == false) console.log(16);
{ } +1
1 + {}
[] + 1
1 + []
[1, 2, 3] + 0
[1, 2, 3] + '0'
1 + '0'
1 + 0
1 + true
1 + false
'1' + true
'1' + false
![] + []
1 - true
'0' - 0
0 - '1'
false - true
{ } -[]
[] - {}
false - []
TODO
- 补图：用图概括文章内容
