ONFUNS 学习&生活随笔

JS中的隐式类型转换

首先来看一个例子

console.log([] + 1 + ![] + false)

如果你们第一时间知道答案,那么说明你对js中的隐式类型已经了如指掌了。

然而,大部分人可能一脸懵逼,这是个啥。。。

先抛出答案1falsefalse

我们来分步骤解答一下 1、在js运算中,如果字符串与数字相加 +会起到拼接作用,将数字转换为字符串进行拼接,代码从左至右执行

2、[]转换为字符串会调用原型上的toString()方法,返回空字符串,那么 [] + 1会返回字符串1

3、![][]取非,那么先对[]``Boolean化,返回true,再执行![]返回false,然后 第二步相加 1 + ![]返回 1false

4、布尔值false 与第三步1false拼接返回 1falsefalse

是不是茅塞顿开,对,这就是js的比较坑的隐式转换。

所以可以总结以下规则:

  • 在比较运算与加法运算中,会将运算符两侧的操作对象转化为原始对象再进行判断或计算

  • 加法运算符+,只要其中一个是String类型,表达式的值便是一个String,如果有对象则与对象的toString()返回值拼接

  • 对于其他的四则运算,只有其中一个是Number类型,表达式的值便是一个Number。

  • 对于其余字符的情况通常会返回NaN:1 + undefined

参考原始类型转换表
原始值 转化数值类型 转化字符串类型 转化 Boolean 类型
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"aa" NaN "aa" true
[] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
function(){} NaN "function(){}" true
{} NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false

== 的隐式转换规则

如果比较的双方中有一方为 Number,一方为 String时,会把 String 通过 Number() 方法转换为数字,然后进行比较。

如果比较的双方中有一方为 Boolean,一方为 String时,会将双方转换为数字,然后再进行比较。

如果比较的双方中有一方为 Number,一方为Object时,则会调用 valueOf 方法将Object转换为数字,然后进行比较。

思考题:++[[]][+[]]+[+[]] 结果是多少


参考链接: