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

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

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

目录

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

一、等于操作符

二、全等操作符

三、区别

小结

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

一、等于操作符

等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 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 代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

交换机端口镜像技术原理与配置

在网络维护的过程中会遇到需要对报文进行获取和分析的情况,比如怀疑有攻击报文,此时需要在不影响报文转发的情况下,对报文进行获取和分析。镜像技术可以在不影响报文正常处理流程的情况下,将镜像端口的报文复制一份到观察端口&…

掌握ElasticSearch(一):Elasticsearch安装与配置、Kibana安装

文章目录 〇、简介1.Elasticsearch简介2.典型业务场景3.数据采集工具4.名词解释 一、安装1.使用docker(1)创建虚拟网络(2)Elasticsearch安装步骤 2.使用压缩包 二、配置1.目录介绍2.配置文件介绍3.elasticsearch.yml节点配置4.jvm.options堆配置 二、可视化工具Kibana1.介绍2.安…

千万别放弃,运维工程师其实是一个被埋没的“朝阳”职位!

运维工程师的出路到底在哪里? 你是不是也常常听到身边的运维人员抱怨,他们的出路到底在哪里呢?别着急,让我告诉你,运维人员就像是IT界的“万金油”,他们像“修理工”一样维修服务器,像“消防员…

springboot(ssm小区团购管理系统 社区团购平台系统 Java系统

springboot(ssm小区团购管理系统 社区团购平台系统 Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0&#xff09…

说一下 tcp 粘包是怎么产生的?

说一下 tcp 粘包是怎么产生的? TCP粘包是指发送方发送的数据在接收方收到时粘在一起,形成一个大的数据包,而不是按照发送方原始的数据块进行拆分。这可能导致接收方无法正确解析和处理数据。TCP是面向流的协议,它并不保证接收方能…

vue中样式动态绑定写法

绑定样式: class样式 写法:class"xxx"xXX可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。 数组写法适用于:要绑定多个样式,个数确定,…

es 使用笔记

POST /index_topic/_delete_by_query {"query": {"match": {"TopicId": "1739499560356679680"}} }条件删除数据

AI数字人互动大屏采用什么技术?

互动大屏(技术支持:zhibo175)本身具有令人瞩目的效果,再配置丰富多彩的多媒体,如引人注目的广告、特效或游戏等,可起到很好的引流作用。在空间开阔且客流密集的场所,使用各种形态的大面积屏幕&a…

轻量级开源服务器Tomcat本地部署并将网页发布到公网远程访问

目录 1.前言 2.本地Tomcat网页搭建 2.1 Tomcat安装 2.2 配置环境变量 2.3 环境配置 2.4 Tomcat运行测试 2.5 Cpolar安装和注册 3.本地网页发布 3.1.Cpolar云端设置 3.2 Cpolar本地设置 4.公网访问测试 5.结语 前些天发现了一个巨牛的人工智能学习网站,通…

5分钟深入学习Python中的流程控制语句!

5分钟深入学习Python中的流程控制语句! Python中的流程控制语句用于控制程序的执行顺序,包括条件判断、循环和异常处理等。下面将详细介绍这些流程控制语句及其用法。 条件判断语句用于根据条件的真假来选择不同的执行路径。Python中有两种条件判断语句…

小型洗衣机哪个牌子质量好?口碑最好的四款小型洗衣机推荐

随着科技的快速发展,现在的人们越来越注重自己的卫生问题,不仅在吃上面会注重卫生问题,在用的上面也会更加严格要求,而衣服做为我们最贴身的东西,我们对它的要求也会更加高,所以最近这几年较火爆的无疑是内…

微信服务号变成订阅号全流程攻略

服务号和订阅号有什么区别?服务号转为订阅号有哪些作用?我们都知道,服务号一个月只能发4次文章,但是订阅号每天都能发文章。不过在接收消息这一方面,服务号群发的消息有消息提醒,并显示在对话框&#xff1b…

FC忍者神龟格斗可视化hack源码

[FC][忍者神龟格斗][最佳可视化][Final] 时间:2023.12.22 作者:FlameCyclone 内容: 1.可视化功能菜单 (1)菜单按键操作 1.上下键: 移动选项 2.左右键: 翻页 3.选择键: 翻转功能开关 4.开始键: 退出菜单 5.B键: 启用功能 …

Linux 操作系统 018-远程文件传输工具

Linux 操作系统 018-远程文件传输工具 本节关键字:Linux、操作系统、远程操作、文件传输、ftp、ssh、scp、sftp 本节相关指令:ftp、ssh、scp、sftp FTP FTP介绍 ftp命令用来设置文件系统相关功能。ftp服务器在网上较为常见,Linux ftp命令…

牛客设计模式

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:…

143.【Nginx-02】

Nginx-02 (五)、Nginx负载均衡1.负载均衡概述2.负载均衡的原理及处理流程(1).负载均衡的作用 3.负载均衡常用的处理方式(1).用户手动选择(2).DNS轮询方式(3).四/七层负载均衡(4).Nginx七层负载均衡指令 ⭐(5).Nginx七层负载均衡的实现流程 ⭐ 4.负载均衡状态(1).down (停用)(2)…

小学班委有哪些职位

在成长的道路上,班委是一个不可或缺的角色。它不仅是一个职位,更是一份责任和担当。对于孩子们来说,成为班委不仅意味着荣誉,更意味着在集体中发挥自己的力量,为班级做贡献。 那么,小学班委有哪些职位呢&am…

配置Nginx出现403 (Forbidden)静态文件加载不出来

出现问题如图 出现此问题可能和索引文件缺失、访问限制等原因有关,在默认的Nginx的配置中,出现此问题的大概率问题可能出现在启动用户和nginx工作用户不一致所致。 Nginx的默认配置文件的 nginx.conf 里首行是 user www-data; 如果你是在 root 下启用…