关于 JS 类型隐式转换的完整总结
作者:原罪
来源:SegmentFault 思否社区
[] + {} == ?
,如果你不了解其中的原理,那么就插不上话,只能眼睁睁地等大佬解答了。Type
Number String Boolean Null Undefined Object Symbol
基本类型
和复合类型
两种,除了对象,其它都是基本类型。To Primitive
结构:toPrimitive(input, preferedType = number)
在对象的隐式转换中,对象需要先转成基本类型,并按照如下顺序执行。
对象会先调用 valueOf()
。如果没有valueOf这个方法或者valueOf返回的类型不是基本类型,那么对象会继续调用 toString()
方法。如果没有toString这个方法或者toString返回的类型不是基本类型,那么直接抛出 TypeError
异常。
Uncaught TypeError: Cannot convert object to primitive value
ate的默认preferedType=string,即在加法运算中先执行toString()。在 - | * | / | +x | -x 等运算中,先执行valueOf()数组的toString()可以等效为 join(',')
其中,数组toString()时,遇到null, undefined都被忽略,遇到symbol直接报错,遇到没有toString()的对象也报错。
[1, null, undefined, 2].toString() === '1,,,2';
// Uncaught TypeError: Cannot convert a Symbol value to a string
[1, Symbol('x')].toString()
// Uncaught TypeError: Cannot convert object to primitive value
[1, Object.create(null)].toString()
To Number
Number("0") === 0;
Number("") === 0;
Number(" ") === 0;
Number("\n") === 0;
Number("\t") === 0;
Number(null) === 0;
Number(false) === 0;
Number(true) === 1;
Number(undefined); // NaN
Number("x"); // NaN
加减法 +-
遇到对象先执行ToPrimitive转换为基本类型,然后按照基本类型的规则处理
({}).toString() === "[object Object]"
1 + {} === "1[object Object]"
[2, 3].toString() === "2,3"
1 + [2, 3] === "12,3"
[1] + [2, 3] === "1,2,3"
function test() {}
test.toString() === "function test() {}"
10 + test === "10function test() {}"
加法过程中,遇到字符串,则会被处理为字符串拼接
1 + "1" === "11"
1 + 1 === 2
"1" + 1 === "11"
"1" + "1" === "11"
3 - 1 === 2
3 - '1' === 2
'3' - 1 === 2
// [].toString() => "" => Number(...) => 0
3 - [] === 3
// {}.toString() => "[object Object]" => Number(...) => NaN
3 - {} // NaN
加法操作时,遇到非字符串的基本类型,都会转Number
1 + true === 2
1 + false === 1
1 + null === 1
1 + undefined // NaN
+ x 和 一元运算 +x 是等效的(以及- x),都会强制转换成Number
+ 0 === 0
- 0 === -0
1 + + "1" === 2
1 + + + + ["1"] === 2
// 负负得正
1 + - + - [1] === 2
// 负负得正
1 - + - + 1 === 2
1 - + - + - 1 === 0
1 + + [""] === 1
// ["1", "2"].toString() => "1,2" => Number(...) => NaN
1 + + ["1", "2"] // NaN
// 吃根香蕉🍌
("ba" + + undefined + "a").toLowerCase() === "banana"
[] + {}
,这样太简单了吧?[].toString() === "";
{}.toString() === "[object Object]";
[] + {} === "[object Object]";
对象字面量{}在最前面则不代表对象
{} + [] === 0;
{ a: 2 } + [] === 0;
{}
其实代表的是代码块,最后就变成了+ []
,根据前面的原则,数组先被转换成字符串""
,接着因为+x的运算,字符串被转成数字0
。a
不是代表对象属性,而是被当成了标签(label),标签这东西IE6就已经有了。所以如果我们写成 { a: 2, b: 3 } + []
这样是会报错的,逗号要改成分号才能通过编译。symbol不能加减
1 + Symbol("x")
报错如下:Uncaught TypeError: Cannot convert a Symbol value to a number
宽松相等 ==
对象与对象类型一致,不做转换
{} != {}
[] != {}
[] != []
对象与基本类型,对象先执行ToPrimitive转换为基本类型
// 小心代码块
"[object Object]" == {}
[] == ""
[1] == "1"
[1,2] == "1,2"
数字与字符串类型对比时,字符串总是转换成数字
"2" == 2
[] == 0
[1] == 1
// [1,2].toString() => "1,2" => Number(...) => NaN
[1,2] != 1
布尔值先转换成数字,再按数字规则操作
// [] => "" => Number(...) => 0
// false => 0
[] == false
// [1] => "1" => 1
// true => 1
[1] == true
// [1,2] => "1,2" => NaN
// true => 1
[1,2] != true
"0" == false
"" == false
null、undefined、symbol
null == undefined
是一个特例。null == null
undefined == undefined
null == undefined
null != 0
null != false
undefined != 0
undefined != false
Symbol('x') != Symbol('x')
对比 < >
对象总是先执行ToPrimitive为基本类型
[] < [] // false
[] <= {} // true
{} < {} // false
{} <= {} // true
任何一边出现非字符串的值,则一律转换成数字做对比
// ["06"] => "06" => 6
["06"] < 2 // false
["06"] < "2" // true
["06"] > 2 // true
5 > null // true
-1 < null // true
0 <= null // true
0 <= false // true
0 < false // false
// undefined => Number(...) => NaN
5 > undefined // false
评论