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 代码。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

wxWidgets实战:wxGrid创建表单之复选框样式

1》 创建wxGrid WX_GRID* m_fieldsGrid m_fieldsGrid new WX_GRID( sbFields->GetStaticBox(), wxID_ANY, wxDefaultPosition, wxDefaultSize, 0 );m_fields new FIELDS_GRID_TABLE<SCH_FIELD>( this, aParent, m_fieldsGrid, m_symbol );FDC_SHOW_NAME FDC_SHOW_…

视频监控EasyCVR如何通过设置sei接口,实现在webrtc视频流中添加画框和文字?

安防视频监控系统基于视频综合管理平台EasyCVR视频系统&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;具备权限管…

嵌入式开发——ARM介绍

ARM架构 ARM是一种芯片架构,由英国的ARM Holdings公司开发和授权,被广泛应用于各种嵌入式系统、移动设备和消费电子产品中。ARM架构被设计成低功耗、高性能、可定制化的特点,能够满足各种应用场景下的需求。 ARM架构主要设计了以下几个部分内容: 指令集架构(Instruction…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)EventLoop初始化

这个Dispatcher是一个事件分发模型&#xff0c;通过这个模型,就能够检测对应的文件描述符的事件的时候,可以使用epoll/poll/select,前面说过三选一。另外不管是哪一个底层的检测模型,它们都需要使用一个数据块,这个数据块就叫做DispatcherData。除此之外,还有另外一个部分,因为…

Leetcode---376周赛---中位数贪心

题目列表 2965. 找出缺失和重复的数字 2966. 划分数组并满足最大差限制 2967. 使数组成为等数数组的最小代价 2968. 执行操作使频率分数最大 一、找到缺失和重复的数字 由于数据范围不是很大&#xff0c;可以直接暴力统计每个数字出现的次数&#xff0c;时间复杂度为O(n^2…

使用css实现旋转木马HTML

使用css实现旋转木马HTML 效果图 实现代码如下 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

分享msvcr120.dll丢失怎样修复,修复msvcr120.dll文件

在使用电脑的过程中你是不是遇到过msvcr120.dll丢失的情况&#xff0c;那么有什么办法能够解决msvcr120.dll丢失的文件&#xff0c;今天的这篇文章就一个目的&#xff0c;教会大家有效的解决msvcr120.dll 丢失的问题&#xff0c;&#xff0c;接下来就教大家msvcr120.dll丢失怎样…

MR实战:分科汇总求月考平均分

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建学生实体类5、创建科目平均分映射器类…

【数据结构初阶】二叉树(2)

二叉树顺序结构 1.二叉树的顺序结构及实现1.1二叉树的顺序结构 1.2 堆的概念及结构1.3 堆的实现1.3.1向上调整1.3.2向下调整1.3.3交换函数1.3.4打印1.3.5初始化1.3.6销毁1.3.7插入1.3.8删除1.3.9获得堆顶元素1.3.10判断是否为空1.3.6 堆的代码实现 1.3.2堆的创建1.3.3 建堆时间…

CV 语义分割的基础和应用 | 附源码步骤

引言 计算机视觉中的语义分割是一个引人入胜且迅速发展的领域。它涉及将图像分割为有意义的部分&#xff0c;并将每个部分分类为预定义的类别之一。本文将探讨在计算机视觉领域中语义分割的重要性、技术、应用、挑战以及未来前景。 每个像素都讲述一个故事&#xff1a;透过语义…

关于解决微服务A调用微服务B的接口获取不到数据

前提&#xff1a; 1、首先&#xff0c;你得确保写的不同微服务之间调用接口时没有任何问题的&#xff0c;可以参考我上一篇文章&#xff1b; 2、其次&#xff0c;你需要具备怎么去调试&#xff0c;怎么去定位问题。 具备以上两点其实问题就迎刃而解了。先来看看我的问题吧 问题…

Doraemon-接口自动化测试工具

这是一个自动生成接口测试测试用例的项目, 您可以通过如下方式使用他 run in python3 当你git clone 该项目后,可以通过如下命令配置你的环境 如果你习惯使用venv环境, 那么你可以进行如下操作 >>> cd doraemon >>> . venv/bin/activate >>> pip3 i…

华为防火墙双机热备

实验需求&#xff1a; 如图所示&#xff0c;PC1为公司内部网络设备&#xff0c;AR1为出口设备&#xff0c;在FW1和FW2上配置双机热备&#xff0c;当网络正常时PC1访问AR1路径为FW1-AR1&#xff0c;当FW1出现故障后&#xff0c;切换路径为FW2-AR1。 实现目的&#xff1a; 了解…

Matlab:解非线性方程组

1、基于问题求解非线性方程组 例&#xff1a; xoptimvar(x,2); %将x定义为一个二元素优化变量 eq1exp(-exp(-(x(1)x(2))))x(2)*(1x(1)^2); %创建第一个方程作为优化等式表达式 eq2x(1)*cos(x(2))x(2)*sin(x(1))1/2; %创建第二个方程作为优化等式表达式 probe…

nextTick的使用

场景&#xff1a; 左边的树有被选中项&#xff0c;则显示右边的内容&#xff0c;且清除右边表格的被选中项 代码大概就是 选中左边的树然后执行 this.$refs.treeRef.setCurrentRow(); // 取消表格高亮行 然后报错&#xff1a; 解决&#xff1a; 在外面包一层this.$nextTi…

AI可以一键生成的年终工作总结思维导图了!(内附10张年终总结模版)

月交替&#xff0c;斗转星移。不知不觉&#xff0c;2023年的进度条已经所剩无几了&#xff01; 又到了一年一度写年终总结的时候了&#xff0c;很多小伙伴是不是又开始发愁了&#xff0c;ProcessOn 告诉你不用担心&#xff0c; 我们今年上线了&#xff0c;AI一键生成各行各业年…

挑战与应对:迅软科技探讨IT企业应对数据泄密危机的智慧之路

随着信息技术的快速发展&#xff0c;软件IT行业面临着前所未有的数据安全挑战。黑客攻击、病毒传播、内部泄密等安全威胁层出不穷&#xff0c;给企业的核心资产和运营带来严重威胁。同时&#xff0c;国家对于数据安全的法律法规也日益严格&#xff0c;要求企业必须采取更加有效…

亚马逊云科技创业加速器,帮助企业重塑业务并加速生成式AI之旅

经济蓬勃发展的时代&#xff0c;每一个初创企业都可能成为未来独角兽。随着创新科技快速发展、层出不穷&#xff0c;生成式AI席卷全球&#xff0c;各行各业游戏规则面临重构&#xff0c;也为初创企业带来巨大机遇。 初创公司值得信赖的云计算厂商 全球排名前1000的独角兽&#…

Java多线程技术五——单例模式与多线程-备份

1 概述 本章的知识点非常重要。在单例模式与多线程技术相结合的过程中&#xff0c;我们能发现很多以前从未考虑过的问题。这些不良的程序设计如果应用在商业项目中将会带来非常大的麻烦。本章的案例也充分说明&#xff0c;线程与某些技术相结合中&#xff0c;我们要考虑的事情会…

ComfyUI如何中文汉化

comfyui中文地址如下&#xff1a; https://github.com/AIGODLIKE/AIGODLIKE-ComfyUI-Translationhttps://github.com/AIGODLIKE/AIGODLIKE-ComfyUI-Translation如何安装&#xff1f; 1. git安装 进入项目目录下的custom_nodes目录下&#xff0c;然后进入控制台&#xff0c;运…