2024年了，再搞不懂JS隐式转换就只能转行了

初学者在学JavaScript这门语言的时候，都会学习数据类型。但是隐式类型转换，很少被人全面了解！这篇文章将要彻底解开大家的疑惑！

首先咱们看2道面试题。

js 复制代码

 console.log( {} + {} )   ??
 console.log( [] + {} )   ??
 console.log( undefined + 0 ) ??
  console.log( undefined + null ) ??

小伙伴们可以试着猜测一下打印出来是什么，如果跟你们心目中答案一样，那恭喜你隐式转换毕业了。如果只做对了其中一两道，那么证明还是没有完全搞懂，文章接着往下看吧！

首先触发隐式转换的符号 " + "，我们都知道 "+" 在JS中有两个概念，第一是数学运算，第二是字符串连接。不管是哪一种都会触发JS隐式转换！

字符串与字符串毫无疑问直接触发字符串连接，数字与数字相加也毫无疑问直接数学运算！这里面值得讨论的是不同类型相加会发生什么，对吗？

首先得记住以下几个规则（重点背熟）

第一条规则：字符串与任何类型相加都转为字符串连接！

js 复制代码

 console.log( 'string' + 'string' )  //字符串加字符串，不用转换直接连接：stringstring
 console.log( 'string' + 1 )   //数字转换字符串：'string' + String(1) 结果 string1
 console.log( 'string' + true ) //布尔值转换字符串：'string' + String(true) 结果 stringtrue
 console.log( 'string' + undefined ) //undefined转换字符串：'string' + String(undefined) 结果 stringundefined
 console.log( 'string' + null )   //null转换字符串：'string' + String(null) 结果 stringnull
 console.log( 'string' + {} ) //null转换字符串：'string' + String({}) 结果 string[object Object]
 console.log( 'string' + [] ) //[]转换字符串：'string' + String([]) 结果 string

其实这里本身不算难，大家只需要把每种类型套一个String(数据类型)，依次打印看一下就明白，每种类型转换成字符串后变成什么了！

第二条规则：数字与任何类型相加都先转换数字，然后再进行数字运算，字符串类型除外，因为字符串类型优先级最高！

js 复制代码

 console.log( 1 + 'string' )  //触发第一条规则，直接就是字符串拼接！
 console.log( 1 + 1 )   //直接运算，小学生题！
 console.log( 1 + true ) //布尔值转换数字：1 + Number(true) 结果 2
 console.log( 1 + undefined ) //undefined转换数字：1 + Number(undefined) 结果 NaN
 console.log( 1 + null )   //null转换字符串：1 + Number(null) 结果 1
 console.log( 1 + {} ) //  ??  结果 1[object Object]
 console.log( 1 + [] )   // ??  结果 '1'

这里涉及到一个问题，就是数字与对象相加。这里情况比较特殊，因为对象无法直接转数字。对象只能转字符串。所以一旦对象转成了字符串后，再与数字相加，就变成了字符串连接！

第三条规则：布尔值与任何类型相加都先转换数字，然后再进行数字运算，字符串类型除外，因为字符串类型优先级最高！

js 复制代码

 console.log( true + 'string' )  //触发第一条规则，直接就是字符串拼接！
 console.log( true + true )   //Number(true) + Number(true) 结果 2
 console.log( 1 + true )  //布尔值转换数字：1 + Number(true) 结果 2
 console.log( true + undefined ) //undefined转换数字,布尔值也转换数字：Number(true) + Number(undefined) 结果 NaN
 console.log( true + null )   //null转换数字：Number(true) + Number(null) 结果 1
 console.log( true + {} ) //  ??  结果 true[object Object]
 console.log( true + [] )   // ??  结果 'true'

这里又涉及到一个问题，相信小伙伴们比较懵逼，为什么 true + {} 不是 1[object Object]？ 你不是说true要转换成数字吗？小伙伴千万别懵逼呀，首先是对象转字符串，如果对象转换成了字符串后，就是字符串与布尔值相加，直接触发第一条规则呀！ true也会转成字符串，就不会转数字了！

第四条规则：undefined与任何类型相加都先转换数字，然后再进行数字运算，字符串类型除外，因为字符串类型优先级最高！

js 复制代码

 console.log( undefined + 'string' )  //触发第一条规则，直接就是字符串拼接！
 console.log( undefined + 1 )   //undefined转数字，结果 NaN！
 console.log( undefined + true )  //undefined转数字 布尔值转数字！结果 NaN！
 console.log( undefined + undefined ) //undefined转换数字：Number(undefined) + Number(undefined) 结果 NaN
 console.log( undefined + null )   //双方都转换数字：Number(undefined) + Number(null) 结果 NaN
 console.log( undefined + {} ) //  ??  结果 undefined[object Object]
 console.log( undefined + [] )   // ??  结果 'undefined'

这里又涉及undefined转数字会变成NaN,JS里面NaN与数字相加，最后都是NaN! 为什么 undefined + {} 不是 NaN[object Object]？ 上面第三条规则不是解释清楚了么！

第五条规则：null与任何类型相加都先转换数字，然后再进行数字运算，字符串类型除外，因为字符串类型优先级最高！

js 复制代码

 console.log( null + 'string' )  //触发第一条规则，直接就是字符串拼接！
 console.log( null + 1 )   //null转数字变成0，结果 1！
 console.log( null + true )  //null转数字0，布尔值也转数字1！结果 1！
 console.log( null + undefined ) //null转数字0，undefined转换数字NaN 结果 NaN
 console.log( null + null )   //双方都转换数字：0 结果 0
 console.log( null + {} ) //  ??  结果 null[object Object]
 console.log( null + [] )   // ??  结果 'null'

第六条规则：{}与任何类型相加，{}都会先转成字符串，然后再与任何类型进行字符串拼接。

js 复制代码

 console.log( {} + 'string' )  //[object Object]string
 console.log( {} + 1 )   //[object Object]1
 console.log( {} + true )  //[object Object]true
 console.log( {} + undefined ) //[object Object]undefined
 console.log( {} + null )   //[object Object]null
 console.log( {} + {} ) //  [object Object][object Object]
 console.log( {} + [] )   // [object Object]

这里就直接把答案告诉伙伴们了，因为一旦对象转成字符串，字符串再与任意类型拼接就直接触发第一条规则了。

好了，文章写到了这里。我相信只要认真思考了的小伙伴再做上面的面试题，就轻轻松松能说出答案了。文章纯手打，有收获的小伙伴点个赞呗！