JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?

这篇具有很好参考价值的文章主要介绍了JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?,javascript入门到实战,javascript,开发语言,ecmascript,前端

​🌈个人主页:前端青山
🔥系列专栏:JavaScript篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-等号区别

目录

== 和 ===区别,分别在什么情况使用

一、等于操作符

二、全等操作符

三、区别

小结

== 和 ===区别,分别在什么情况使用

JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?,javascript入门到实战,javascript,开发语言,ecmascript,前端

一、等于操作符

等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 true

前面文章,我们提到在JavaScript中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等

遵循以下规则:

如果任一操作数是布尔值,则将其转换为数值再比较是否相等

let result1 = (true == 1); // true

如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等

let result1 = ("55" == 55); // true

如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf()方法取得其原始值,再根据前面的规则进行比较

let obj = {valueOf:function(){return 1}}
let result1 = (obj == 1); // true

nullundefined相等

let result1 = (null == undefined ); // true

如果有任一操作数是 NaN ,则相等操作符返回 false

let result1 = (NaN == NaN ); // false

如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true

let obj1 = {name:"xxx"}
let obj2 = {name:"xxx"}
let result1 = (obj1 == obj2 ); // false

下面进一步做个小结:

  • 两个都为简单类型,字符串和布尔值都会转换成数值,再比较

  • 简单类型与引用类型比较,对象转化成其原始类型的值,再比较

  • 两个都为引用类型,则比较它们是否指向同一个对象

  • null 和 undefined 相等

  • 存在 NaN 则返回 false

二、全等操作符

全等操作符由 3 个等于号( === )表示,只有两个操作数在不转换的前提下相等才返回 true。即类型相同,值也需相同

let result1 = ("55" === 55); // false,不相等,因为数据类型不同
let result2 = (55 === 55); // true,相等,因为数据类型相同值也相同

undefinednull 与自身严格相等

let result1 = (null === null)  //true
let result2 = (undefined === undefined)  //true

三、区别

相等操作符(==)会做类型转换,再进行值的比较,全等运算符不会做类型转换

let result1 = ("55" === 55); // false,不相等,因为数据类型不同
let result2 = (55 === 55); // true,相等,因为数据类型相同值也相同

nullundefined 比较,相等操作符(==)为true,全等为false

let result1 = (null == undefined ); // true
let result2 = (null  === undefined); // false

小结

相等运算符隐藏的类型转换,会带来一些违反直觉的结果

'' == '0' // false
0 == '' // true
0 == '0' // true
​
false == 'false' // false
false == '0' // true
​
false == undefined // false
false == null // false
null == undefined // true
​
' \t\r\n' == 0 // true

但在比较null的情况的时候,我们一般使用相等操作符==

const obj = {};
​
if(obj.x == null){
  console.log("1");  //执行
}

等同于下面写法

if(obj.x === null || obj.x === undefined) {
    ...
}

使用相等操作符(==)的写法明显更加简洁了

所以,除了在比较对象属性为null或者undefined的情况下,我们可以使用相等操作符(==),其他情况建议一律使用全等操作符(===)

双等号 "==" 运算符用于比较两个值是否相等。在使用双等号进行比较时,JavaScript 会在必要时进行类型转换,然后再比较这两个值。这意味着,即使两个值的类型不同,双等号也会尝试将它们转换为相同的类型,然后再进行比较。例如:"1" == 1 这个表达式会返回 true,因为 JavaScript 将字符串 "1" 转换为数字 1 后再进行比较。

三等号 "===" 运算符也用于比较两个值是否相等,但它不会进行类型转换。如果两个值的类型不同,直接返回 false。例如:"1" === 1 这个表达式会返回 false,因为一个是字符串,一个是数字,它们的类型不同。

推荐在大多数情况下使用 "===" 运算符进行严格的值比较,因为它不会进行类型转换,可以避免一些潜在的错误。只有在明确知道两个值的类型,并且希望进行类型转换后再比较时,才应该使用 "==" 运算符。

总之,了解 "==" 和 "===" 运算符的区别,以及在什么情况下使用它们,可以帮助开发者编写更可靠的 JavaScript 代码。文章来源地址https://www.toymoban.com/news/detail-761753.html

到了这里,关于JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 文言一心与文心一言:究竟有何不同?

    大家好,小发猫降ai今天来聊聊文言一心与文心一言:究竟有何不同?,希望能给大家提供一点参考。降ai辅写 以下是针对论文AI辅写率高的情况,提供一些修改建议和技巧,可以借助此类工具: 还有: 文言一心与文心一言:究竟有何不同? 当我们谈论自然语言处理领域的两

    2024年03月16日
    浏览(42)
  • 记录--虚拟 DOM 和实际 DOM 有何不同?

    本文我们会先聊聊 DOM 的一些缺陷,然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的,最后再站在双缓存和 MVC 的视角来聊聊虚拟 DOM。理解了这些会让你对目前的前端框架有一个更加底层的认识,这也有助于你更好地理解这些前端框架。 比如,我们可以调用 document.body.a

    2024年02月15日
    浏览(39)
  • 微信小程序篇之与vue有何不同

    大家好!又怀着兴奋的心情去学习了微信小程序,框架这个东西嘛,随着时代的新潮一波又一波的到来,一波又一波的被冲走。为什么要拿vue与小程序开发做对比呢? 这是因为我相信大家不会在没有学习到vue之前就把小程序给学习了,哈哈哈。这篇文章最好给已经接触过别的

    2024年02月09日
    浏览(31)
  • React和Vue的生态系统有何不同?

    React和Vue是目前最受欢迎的前端框架之一,它们都拥有庞大而活跃的社区生态系统。 React生态系统特点: 社区活跃度高:React拥有庞大的开发者社区,社区成员数量众多,教程、博客、插件和工具等资源丰富。 生态系统丰富:React周边有很多优秀的第三方库和插件,例如Reac

    2024年01月24日
    浏览(29)
  • JS 动画 vs CSS 动画:究竟有何不同?

    在 Web 前端开发中,动画是提高用户体验的关键因素之一。我们通常可以使用 JavaScript(JS)和 CSS 来创建动画效果。但是,这两者之间有哪些区别呢?在本文中,我们将深入研究 JS 动画和 CSS 动画,探讨它们的异同,以及何时使用哪一种。 CSS 动画是使用 CSS 样式属性来定义的

    2024年02月12日
    浏览(35)
  • 创建维基WIKI百科和建立百度百科有何不同?

    很多企业有出口业务,想在互联网上开展全球性网络营销,维基百科往往被认为是开展海外营销的第一站。其作用相当于开展国内网络营销的百度百科,经常有些企业给小马识途营销顾问提供的词条内容就是百度百科的内容,可事实上两个平台的规则差异很大,在百度百科上

    2024年02月15日
    浏览(39)
  • 上证50etf 期权与其他期权品种有何不同?

    进入期权市场之后,了解期权品种之间的区别是很重要的。特别是对于在场内ETF期权交易来说,沪深300ETF期权是上证50ETF期权之后第二个上市的期权品种。了解这两者之间的区别对期权交易的帮助是非常大那么上证50etf 期权与其他期权品种有何不同? 本文来自:期权酱 一、什

    2024年02月03日
    浏览(43)
  • Linux 上的 Wayland 是什么?它与 X 有何不同?

    导读 Wayland 是 Linux 发行版的替代窗口系统。它取代了老化的 X11 标准。由于它需要修改应用程序才能使用它,因此迄今为止采用速度很慢。在撰写本文时,增强的安全性是相对于 X11 的主要优势。 X11 或 X Window 系统可让您的图形桌面环境显示和控制窗口。 Wayland 是 X11 的替代

    2024年01月21日
    浏览(36)
  • 什么是Docker的容器编排工具,它们之间有何不同?

    随着Docker容器技术的广泛应用,容器编排工具成为了自动化部署、扩展和管理容器化应用程序的关键组件。这些工具提供了一种抽象层,帮助开发者和管理员更高效地管理大量的Docker容器,确保它们在不同的主机和环境中能够可靠地运行。目前,市场上流行的Docker容器编排工

    2024年02月19日
    浏览(35)
  • React中函数式组件与类组件有何不同?

    目录  Function Component 与 Class Component 有何不同  文章核心观点: 解释一下: 总结: Function components capture the rendered values.函数式组件捕获的是已经被render的值 请看代码: Class component Function Component pjqnl16lm7 - CodeSandbox效果: LiveDemo 这里有bug: 点击在Sophie的profile的时候,follo

    2024年02月09日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包