这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战;
前言
在上一篇文章关于类型中,主要介绍了js里关于类型你可能会忽略的小细节。还不了解的小伙伴可以去学习一下。
这篇文章主要来大家一起规整一下,JS中的隐式类型转换。
正文
1 == '1'; // true
当我们使用在日常业务开发中,我们经常会碰到需要类型转换的问题,像上面这样使用==
进行等式的判断,就会先进行隐式类型转换,转换为同一类型后再做比较了。
基础数据类型相比较
那么隐式类型转换大概有多少情况呢,可以看以下题目思考一下。
'123' == 123;
null == undefined;
null == false;
'0' == true;
'1' == true;
[] == false;
上面这几个情况,相信你一定不陌生,你所维护的项(lao)目(dai)中(ma)相信见到过这些身影,下面请跟随我一起来完成这几道题目吧。
'123' == 123
结果为true,两个被比较的值如果为String
和Number
类型,那么就会先将字符串转换为number再进行比较,即123 == 123
=>true
;null == undefined
结果为true,undefined
及null
这两个值只有与undefined
、null
进行比较时才会返回true
,其他情况都返回false
;null == false
结果为false,这直接应用上一条规则即可,因为比较的值不为undefined
或null
;'0' == true
结果为false,被比较的值中有一个值为Boolean
类型,则被比较的值都会转为数字再进行比较,即'0' == 1
=>0 == 1
=>false
;'1' == true
结果为true,同上一条规则,即'1' == 1
=>1 == 1
=>true
;[] == false
结果为true,被比较的值中有一个值为Boolean
类型,转为数字再进行比较,即0 == 0
=>true
;
了解了这些规则,试着再看一下这几个题目,是不是很简单了
'' == null; // false 因为和null比较的不是`undefined`及`null`
'' == 0; // true 字符串和数字都转为数字比较
引用数据类型相比较
除了基础数据类型,这些还有一种复杂情况,题目如下
[] == '';
[] == 0;
[2] == true;
这里涉及到了引用Object
类型与string
、number
、object
比较,当对象类型和原始类型做相等比较时,对象类型会依照ToPrimitive
规则转换为原始类型
ToPrimitive
指对象类型类型(如:对象、数组)转换为原始类型的操作。
ToPrimitive
规则简单说就是先查找对象的valueOf
方法,如果有返回值,那么ToPrimitive
的值就是这个值
如果valueOf
不存在或者返回的不是原始类型的,那就继续尝试调用对象的toString
方法,同样的如果有返回值,那么ToPrimitive
的值就是这个值
如果valueOf
和toString
方法都没有返回原始类型的值,就会抛出异常。
来看根据这个规则再看一下题目
[] == ''
结果为true,[].valueOf() 结果为[]
=>[].toString() 结果为 ''
=>'' == ''
=>true
;[] == 0
结果为true,[].valueOf() 结果为[]
=>[].toString() 结果为 ''
=>'' == 0
=>true
;[2] == true
结果为false,[2].valueOf() 结果为[2]
=>[2].toString() 结果为 '2'
=>'2' == true
=>2 == 1
=>false
;
结论
相信通过今天的讲解,你对隐式类型转换有了更深的理解,熟悉之后你再维护旧项目代码,发现==
的判断后肯定就能够更得心应手了。
什么?新项目不行吗?新项目就用===
以及强制类型转换吧,这不比记这么多规则香吗?但强制类型转换也有一些需要你记住的规则,感兴趣的小伙伴可以先点个关注,明天我再与你分享强制类型转换。
结语
前端漫漫长途,我们都在路上,希望可以和小伙伴们一起交流,一起进步。持续更新ing.....