正题开始前我想先抛出一个问题,==和===有什么区别?可能一般人会想,不就是后者除了比较值相等之外还会比较类型是否相等嘛,有什么好问的,谁不知道?!但是这样说还不够准确,两者的真正区别其实是==在比较的时候允许做强制类型转换,而===不允许。好了终于引出了今天的重点,我们平时肯定遇到过强制类型转换的时候,死活想不通为什么要这样转换(为什么这两个相等)的情况。那么下面我就以==为例,来说明一下其中强制类型转换的规则。

前提知识

JavaScript中的6大类型:undefined、null、boolean、string、number、object
其中又分为:原始类型(Primitive) 和 对象类型(Object)

JavaScript中的假值:undefined、null、false、+0、-0、NaN和" "

1.字符串和数字相等比较

25 == "25"  //true

第一种情况比较简单,当字符串和数字之间相等比较的时候,都会先将字符串强制转换成数字再比较

2.其他类型和布尔类型相等比较

"25" == false //false
"0" == false //true

第二种情况,当其他类型和布尔类型相等比较的时候,都会先将布尔类型强制转换为数字再比较。

右边的false强制转换为数字结果是0,然后再运用上面第一条规则,"0"强制转换为0,所以"0" == false返回的结果是true

3.对象和非对象相等比较

"abc" == Object("abc");  //true
null == Object(null); //false
undefined == Object(undefined); //false
NaN == Object(NaN); //false

第三种情况,如果是对象(对象、函数、数组)和非对象之间相等比较时,会进行ToPrimitive操作(转换为原始类型)。

什么是ToPrimitive操作呢,其实ToPrimitive操作就是先执行valueOf()方法,如果结果为原始值,则返回此结果;否则,执行toString()方法,如果结果是原始值,则返回此结果;否则,抛出TypeError错误。

拿上面的第一个为例,Object("abc")执行ToPrimitive操作后,返回了"abc"原始值,所以结果为true。

Object(null)和Object(undefined)执行完ToPrimitive操作后和Object()是一样的,所以结果为false。

最后一个结果为false,是因为NaN不等于NaN。

特殊情况

还有一种特殊情况,null == undefined(别问我为什么,这个是规定)

小检验

false == "";
false == [];
"" == 0;
"" == [];
0 == [];
"" == [null];

看了之前的分析,检验一下吧,看看上面几个应该是true还是false呢?

总结

其实总结下来就三个口诀:

1.字符串类型和数字类型相等比较,字符串强转数字,再比较。

2.其他类型和布尔类型相等比较,布尔类型强转数字,再比较。

3.对象和非对象相等比较,执行ToPrimitive()操作,再比较。

有了这三个口诀(知道了转换原理),我相信任何情况我们都不再懵逼了。

写在最后

有一年没有更新博客了,回想一下,一是因为公司业务缠身,二是因为去年经历一些事情打击了我,其实这些也都是借口吧,最近看到强制类型转换这个方面有点绕,正好跟大家分享一下,希望之后能够坚持吧,多分享一些东西,对自己也是一种督促与进步吧。

最后感谢大家的阅读,有什么分析的不对的地方欢迎大家批评指出,如果喜欢本文,请点击右下角的推荐哦~

带你玩转JavaScript中的隐式强制类型转换的更多相关文章

  1. javascript中的隐式类型转化

    javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对 ...

  2. JavaScript中关于隐式转换的一些总结

    JavaScript运算符中的隐式转换规律:一.递增递减运算符(前置.后置)1.如果包含的是有效数字字符串或者是有效浮点数字符串,则会将字符串转换(Number())为数值,再进行加减操作,返回值的类 ...

  3. JavaScript基础避免隐式的类型转换(004)

    JavaScript在普通对比运算符“==”执行时可能会进行隐式的类型转换.比如:false==0和""==0的结果都是true.同理也适合于"!="运算符.要 ...

  4. C语言隐式强制类型转换

    今天又被精度问题困扰,把最基本的东西忘了. int n = 5; int cnt = 5.5; double sum = (n-cnt);  运算完后sum是 -0.5.不知道什么时候n转换成doub ...

  5. Scala 深入浅出实战经典 第62讲:Scala中上下文界定内幕中的隐式参数实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  6. Scala 中的隐式转换和隐式参数

    隐式定义是指编译器为了修正类型错误而允许插入到程序中的定义. 举例: 正常情况下"120"/12显然会报错,因为 String 类并没有实现 / 这个方法,我们无法去决定 Stri ...

  7. 编写高质量代码改善C#程序的157个建议——建议47:即使提供了显式释放方法,也应该在终结器中提供隐式清理

    建议47:即使提供了显式释放方法,也应该在终结器中提供隐式清理 在标准的Dispose模式中,我们注意到一个以~开头的方法,如下: /// <summary> /// 必须,防止程序员忘记 ...

  8. 也谈SQL Server 2008 处理隐式数据类型转换在运行计划中的增强 (续)

    在上一篇文章也谈SQL Server 2008 处理隐式数据类型转换在运行计划中的增强中,我提到了隐式数据类型转换添加对于数据分布非常不平均的表.评估的数据行数与实际值有非常大出入的问题,进一步測试之 ...

  9. 深入探究js中的隐式变量声明

    前两天遇到的问题,经过很多网友的深刻讨论,终于有一个相对可以解释的通的逻辑了,然后我仔细研究了一下相关的点,顺带研究了一下js中的隐式变量. 以下文章中提到的隐式变量都是指没有用var,let,con ...

随机推荐

  1. WebGl 画线

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. echarts踩坑---容器高度自适应

    在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...

  3. cannot find module 'xxx' 解决办法

    先将node_module文件夹删掉 工程目录下输入命令:npm clean cache 查看package.json里有没有依赖项,有的话npm install 没有就npm install exp ...

  4. 数据结构09—— 并查集(Union-Find)

    一.关于并查集 并查集(Union-Find)是一种树型的数据结构,常用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.并查集(Union-Find)从名字可以看出,主要它涉及两种 ...

  5. VS2015创建WDK的问题

    在微软官网找了半天.. 搜索window driver kit,好吧.进入一页英文页面.. https://docs.microsoft.com/en-us/windows-hardware/driv ...

  6. 编写DVWA暴力破解High级别的Python脚本

    1. 过程(不查看源代码) 使用burpsuite或者owasp zap抓取数据包,可以看出页面执行过程如下: 首先获取上一次请求的token,然后sleep几秒,最后使用get方法提交验证. 2. ...

  7. IDEA的基本配置

    一.安装 常规下载安装,换路径即可. 亲测可用破解方法:进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.P ...

  8. 20155327 实验一《Java开发环境的熟悉》实验报告

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 JVM.JRE.JDK的安装位置与区别: 命令行运行javac:jav ...

  9. 20155338 2016-2017-2《Java程序设计》实验四Android程序开发实验报告

    2016-2017-2 20155338 <Java程序设计>实验四Android程序开发实验报告 实验过程及成果展示 1.修改res目录下的layout文件夹中的activity_mai ...

  10. 微信小程序点击事件

    <---------------------------------------------------index文件夹:------------------------------------ ...