扎实基础篇-----js中的隐式类型转换

540 阅读3分钟

这是我参与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,两个被比较的值如果为StringNumber类型,那么就会先将字符串转换为number再进行比较,即123 == 123 => true;
  • null == undefined 结果为trueundefinednull这两个值只有与undefinednull进行比较时才会返回true,其他情况都返回false;
  • null == false 结果为false,这直接应用上一条规则即可,因为比较的值不为undefinednull;
  • '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类型与stringnumberobject比较,当对象类型和原始类型做相等比较时,对象类型会依照ToPrimitive规则转换为原始类型

ToPrimitive指对象类型类型(如:对象、数组)转换为原始类型的操作。

ToPrimitive规则简单说就是先查找对象的valueOf方法,如果有返回值,那么ToPrimitive的值就是这个值

如果valueOf不存在或者返回的不是原始类型的,那就继续尝试调用对象的toString方法,同样的如果有返回值,那么ToPrimitive的值就是这个值

如果valueOftoString方法都没有返回原始类型的值,就会抛出异常。

来看根据这个规则再看一下题目

  • [] == '' 结果为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.....