js你需要了解的隐式转换~

51 阅读4分钟

js在很多的情况下都会进行隐式转换,这种情况有时候非常有用,有时候也因为这种意外的隐式转换带来了许多的开发问题,现在我列举一些常见的隐式转换的情况。

一、加符号(+)

相信很多前端小伙伴对+符号并不陌生,我们用来数字相加,字符串拼接等操作。

code.png

为什么有的时候是拼接字符串,有的时候是相加呢??

这是因为当+号前后有字符串的类型或者对象数组能通过本身的ToPrimitive函数能转化成字符串类型的情况下,+符号会拼接。

这就解释了图上 c + d // 320

二、(*,\,-)符号

我们通常也使用" - * \ "三个符号来将字符串转化成数字类型,因为这三个符号只适用于计算,因此系统会默认将字符串转化成数字。b - a // 1

code.png

三、逻辑或和逻辑与(|| &&)

我们通常会这样写代码

code.png

在这里已经隐式强制的先把a转化成布尔值true,在由a来确定取值是前一个还是后一个。

|| 若第一个操作值经转化后为false则返回第二个值,否则返回第一个的原始值。

&& 将第一个操作值转化为Boolean类型,若转化后第一个z值为true,则返回第二个操作值;否则返回第一个操作值。

3.1 (||与??的区别)

??空值合并运算符,它的左侧是null、undefine时,取它右侧的值。

||只要左侧是flase或者通过隐式强制转换为false的时候,取它右侧的值。

code.png

四、(<、>运算符)

1.当有一个数是数字类型的时候,会把另外一个数强制隐式转化成数值类型进行比较。

2.两个都是字符串的时候,会比较字符串的字符编码值。

3.当有个值为布尔类型的时候,会将布尔转成数值在进行比较。

4.当有个值为数组或者对象时,会通过ToPrimitive函数转化成字符串或者数字。

Snipaste_2022-08-30_15-50-50.png

五、三元运算符(? :)

三元运算符是我们开发中非常常用的一段代码。

Snipaste_2022-08-30_15-50-50.png

这段代码也会隐式强制的把a转化成布尔值,从而进行取值。

六、其他补充

在if循环判断中,if(a)也会隐式强制转换成布尔值进行判断。

Snipaste_2022-08-30_15-50-50.png

推荐下面这种写法

Snipaste_2022-08-30_15-50-50.png

这种写法更清晰,也不会强制隐式转换。

七、令人头疼的双等于( == )

先来几道题练练手

Snipaste_2022-08-30_15-50-50.png

第一题和第二题或许有人想问了,0转化成布尔值是false,unll和undefine转化也是false,为啥这两题不是true呢? 这是因为null和undefine本身没有封装包装类,所以在双等于的时候并不能进行转换,因此是false,记住一条准则:null和undefine在双等于前后,只有null == null或者 null == undefine两者才相等。第四题则是NaN和谁都不相等,即时是本身。

Snipaste_2022-08-30_15-50-50.png

第一题和第二题和第三题遵循我上面的原则,有人对第六题又有疑惑了,空对象在转成布尔值应该是true,而这里为啥打印是true而不是false,这是因为我们想当然的把他进行转化成布尔值了。

当双等于号的左边或者右边出现时布尔类型时,布尔值优先会转化成数字类型。

所以这一题会优先把布尔转成0,然后[ ]通过自身的函数也转换成0,因此是true了。

Snipaste_2022-08-30_15-50-50.png

也有人费解为什么这个打印不是false而是true,这是因为!已经显示的把空对象转化成false,因此 false == [ ],然后false根据我上面的原则变成0,[ ]对象也根据自身变成0,因此为false。

杜绝再项目中双等于判断true或者false: if(a == ture)

八、隐式转换的规则

8.1 对象和布尔值比较

布尔类型优先转化成数值类型,随后对象转化成数值进行比较。

8.2 对象和字符串比较

对象转化成字符串类型,然后进行比较。

8.3.对象和数字比较

对象先转化成数字类型,然后进行比较。

8.4 字符串和数字比较

字符串先转化成数字类型,然后再进行比较。

九、ToPrimitive表

微信图片_20220830171528.jpg