JS中==、===你分清楚了吗

 更新时间:2020年03月04日 09:32:11   作者:羞羞的王大锤  
这篇文章主要介绍了JS中==、===你分清楚了吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

==、===都是相等运算符,这个大家应该都知道,但二者有什么区别呢?其实==是相等,===是严格相等,那他们有什么本质的区别呢?下面我就给大家细细道来。

  • =:赋值运算符
  • ==:判断是否相等:忽略了类型进行值的比较。
  • ===:判断是否相等:先进行值的比较,如果值相等,再去比较类型。即带有类型的值的比较。

==相等

比较两个值的时候,有两种情况,一种如果两个值的类型相同,就直接比较;另一种如果两个值得类型不同,则会尝试改变为相同的类型在进行比较
第一种很好理解,直接比较完事儿,第二种就更有趣一些,它到底是怎么转换的呢?下面我们一一列举

数字和字符串比较

99 == ''99"

大家猜一猜结果是什么True?False?

结果为True
其实JS在数字和字符串比较时,都是把字符串转换为数字,再对数字进行比较的,举个列子

99 == "chuichui"

JS是怎么转换的呢?

99 == NaN // false

JS尝试转换字符串'chuichui',但是该字符串并不能转换为数字,这时候转换的结果就为NaN

布尔值和其他类型比较

其实JS在布尔值和其他类型比较时,都是把布尔值转换为数字,再进行比较的,举个列子

1 == true
↓↓↓↓↓↓
1 == 1

JS会将true转化为数字1,再做比较
那"1" == true又是怎么比较的呢?

"1" == true
↓↓↓↓↓↓
"1" == 1
↓↓↓↓↓↓
1 == 1 // true

转换顺序

  1. 将true转换为1
  2. 将字符串“1”转换为数字1
  3. 数字1和数字1比较

null和undefined比较

null == undefined

大家猜一猜,结果是True?False?

结果为True
是不是感觉很奇怪,但规则就是这样。我们可以理解为都是“没有值”
只不过一个是没有值得变量,一个是没有值的对象,因此他们相似

小心

有一个需要注意的地方,有些转换你可能猝不及防

false == ""
True?False?

结果为True
转换过程

  1. false转化为0
  2. 空字符串""转换为0,没错就是0 !
  3. 数字0和数字0比较

下面我们在说说严格相等 ===

===严格相等

有了前面的相等的定义,我想大家能猜个八九不离十,严格相等就是类型和值完全相同,这里不存在以上所存在的转换问题

最后

操作数1 == 操作数2, 操作数1 === 操作数2

比较过程:

  双等号==:

  (1)如果两个值类型相同,再进行三个等号(===)的比较

  (2)如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较:

    1)如果一个是null,一个是undefined,那么相等

    2)如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较  

  三等号===:

  (1)如果类型不同,就一定不相等

  (2)如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相等。(判断一个值是否是NaN,只能使用isNaN( ) 来判断)

  (3)如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。

  (4)如果两个值都是true,或是false,那么相等

  (5)如果两个值都引用同一个对象或是函数,那么相等,否则不相等

  (6)如果两个值都是null,或是undefined,那么相等

到此这篇关于JS中==、===的文章就介绍到这了,更多相关JS中==、===内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家

相关文章

  • javascript移出节点removeChild()使用介绍

    javascript移出节点removeChild()使用介绍

    这篇文章主要介绍了javascript节点操作移出节点removeChild()的使用,需要的朋友可以参考下
    2014-04-04
  • JS实现获取本月的开始时间与结束时间

    JS实现获取本月的开始时间与结束时间

    在JavaScript中,可以使用Date对象来获取本月的开始时间和结束时间,本文通过代码示例详细的给大家介绍了JS获取本月的开始时间与结束时间,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • Js自定义多选框效果的实例代码

    Js自定义多选框效果的实例代码

    本篇文章主要介绍了Js自定义多选效果的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript中公共的js文件写法并在html的网页中调用

    JavaScript中公共的js文件写法并在html的网页中调用

    这篇文章主要为大家详细介绍了JavaScript中公共的js文件写法并在html的网页中调用的相关知识,文中的示例代码讲解详细,希望对大家有所帮助
    2025-09-09
  • mock.js模拟数据的实现

    mock.js模拟数据的实现

    在没有后端提供数据的情况下,前端人员在自己写demo或者练手项目的时候可以使用mock.js来模拟数据,本文主要介绍了mock.js模拟数据的实现,感兴趣的可以了解一下
    2023-11-11
  • echarts饼图labelLine线的长度自适应设置

    echarts饼图labelLine线的长度自适应设置

    这篇文章主要给大家介绍了关于echarts饼图labelLine线的长度自适应设置的相关资料,在echarts中,饼图的标签线可以通过设置 labelLine属性来自定义位置,需要的朋友可以参考下
    2023-08-08
  • 理解javascript async的用法

    理解javascript async的用法

    本篇文章主要介绍了理解javascript async的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Javascript将字符串日期格式化为yyyy-mm-dd的方法

    Javascript将字符串日期格式化为yyyy-mm-dd的方法

    日期格式化相信对于大家来说再熟悉不过,最近工作中自己利用Javascript就写了一个,现在将实现的代码分享给大家,希望对有需要的朋友们能有所帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • 使用layui实现的左侧菜单栏以及动态操作tab项方法

    使用layui实现的左侧菜单栏以及动态操作tab项方法

    今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • es6新增对象的实用方法总结

    es6新增对象的实用方法总结

    在JavaScript中,几乎每一个值都是某种特定类型的对象,于是ES6也着重提升了对象的功能性,下面这篇文章主要给大家介绍了关于es6新增对象实用方法的相关资料,需要的朋友可以参考下
    2022-05-05

最新评论