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中==、===内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家

相关文章

  • JS前端组件设计以业务为导向实践思考

    JS前端组件设计以业务为导向实践思考

    这篇文章主要为大家介绍了JS前端组件设计以业务为导向实践思考,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Bootstrap禁用响应式布局的实现方法

    Bootstrap禁用响应式布局的实现方法

    这篇文章主要介绍了Bootstrap禁用响应式布局的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • JS如何使用剪贴板操作Clipboard API

    JS如何使用剪贴板操作Clipboard API

    浏览器允许JavaScript脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。本文将介绍3种方法来实现。
    2021-05-05
  • JS控件ASP.NET的treeview控件全选或者取消(示例代码)

    JS控件ASP.NET的treeview控件全选或者取消(示例代码)

    本篇文章主要是对JS控件ASP.NET的treeview控件全选或者取消的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • javascript 解决表单仍然提交即使监听处理函数返回false

    javascript 解决表单仍然提交即使监听处理函数返回false

    解决表单依旧提交即使监听处理函数返回false
    2010-03-03
  • 使用weixin-java-miniapp配置进行单个小程序的配置详解

    使用weixin-java-miniapp配置进行单个小程序的配置详解

    这篇文章主要介绍了使用weixin-java-miniapp配置进行单个小程序的配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • js原型链与继承解析(初体验)

    js原型链与继承解析(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。一起跟随小编过来看看吧,希望对大家有所帮助。
    2016-05-05
  • javascript实现数字配对游戏的实例讲解

    javascript实现数字配对游戏的实例讲解

    下面小编就为大家分享一篇javascript实现数字配对游戏的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 超详细JavaScript深浅拷贝的实现教程

    超详细JavaScript深浅拷贝的实现教程

    浅拷贝是指,一个新的对象对原始对象的属性值进行精确地拷贝;深拷贝是指,对于简单数据类型直接拷贝他的值,对于引用数据类型,在堆内存中开辟一块内存用于存放复制的对象,并把原有的对象类型数据拷贝过来。本文将实现JavaScript深浅拷贝,需要的可以参考一下
    2022-09-09
  • BootStrap实现带有增删改查功能的表格(DEMO详解)

    BootStrap实现带有增删改查功能的表格(DEMO详解)

    这篇文章主要介绍了BootStrap实现带有增删改查功能的表格,表格封装了3个版本,接下来通过本文给大家展示下样式及代码,对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧
    2016-10-10

最新评论