js等于操作符和全等操作符(== 和 ===)的区别,在什么情况下使用

在JavaScript中,==(等于操作符)和===(全等操作符)都是用来比较两个值是否相等的工具,但它们有一些重要的区别。

  • ==会尝试进行类型转换,然后再比较。这意味着它可能会将不同类型的值转换为相同类型,然后再判断相等性。
  • ===是严格相等,不会进行类型转换。它要求不仅值相等,而且类型也必须相同。

等于操作符

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

JavaScript 中存在隐式转换。等于操作符 ( == )在比较中会先进行类型转换,在确定操作是否相等。

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

let compare1 = (true == 1) // true

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

let compare1 = ("66" == 66) // true

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

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

nullundefined 相等

let compare1 = (null == undefined ) // true

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

let compare1 = (NaN == NaN ) // false

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

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

请添加图片描述

  • 两个都为简单类型,字符串和布尔值都会转换成数值,再比较
  • 简单类型与引用类型比较,对象转化成其原始类型的值,再比较
  • 两个都为引用类型,则比较它们是否指向同一个对象
  • nullundefined 相等
  • 存在 NaN ,则返回 false

全等操作符

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

let compare1 = ("66" === 66) // false
let compare2 = (66 === 66) // true

undefinednull 与自身比较

let compare1 = (null === null)  //true
let compare2 = (undefined === undefined)  //true

请添加图片描述

区别

在JavaScript中,==(等于操作符)和===(全等操作符)都是用于比较两个值是否相等的工具,但它们有一些关键的区别。

类型比较

  • ==执行弱类型比较,它会在比较之前尝试进行类型转换。这意味着如果你比较不同类型的值,JavaScript会尝试将它们转换为相同类型,然后再比较。
  • ===执行严格类型比较,它不会进行类型转换。如果比较的两个值类型不同,直接返回false

使用场景

  • 推荐在可能的情况下使用===,因为它不会引起意外的类型转换,能更精确地比较值。
  • 有些情况下,==可能会进行一些奇怪的类型转换,导致不直观的比较结果,因此最好在不确定类型的情况下避免使用。

举例说明

  • 使用===:比如在判断变量是否为nullundefined时,因为这两者的值相等但类型不同,使用===可以确保严格的比较。
if (value === null || value === undefined) {
  // 处理 null 或 undefined 的情况
}
  • 使用==:在你确实需要进行类型转换的情况下,例如比较字符串和数字。
if (stringValue == 10) {
  // 当 stringValue 可以转换为数字 10 时,这个条件为真
}

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

let compare1 = ("66" === 66) // false
let compare2 = (66 === 66) // true

undefinednull 与比较,相等为 true ,全等为 false

let compare1 = (undefined == null)  //true
let compare2 = (undefined === null)  //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) {
...
}

总的来说,为了避免意外的类型转换,推荐在大多数情况下使用===进行严格的值和类型比较。因为它比较严格,不会引起意外的类型转换,更确保你得到的是你期望的比较结果。只有在你明确知道可能涉及类型转换的情况下,才使用==

持续学习总结记录中,回顾一下上面的内容:
在JavaScript中,==(等于操作符)和===(全等操作符)都是用来比较两个值是否相等的工具,但它们有一些重要的区别。

  • ==会尝试进行类型转换,然后再比较。这意味着它可能会将不同类型的值转换为相同类型,然后再判断相等性。
  • ===是严格相等,不会进行类型转换。它要求不仅值相等,而且类型也必须相同。

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

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

相关文章

Vue的使用

1、概述 https://cn.vuejs.org/ vscode Volar插件 2、创建项目 npm init vuelatest Project name: //只能小写cd projecName npm install / cnpm install nmp run dev目录结构:

Python3 索引下标及切片完全指南

介绍 Python 字符串数据类型是由一个或多个字符组成的序列,可以包含字母、数字、空格字符或符号。由于字符串是一个序列,我们可以通过索引和切片的方式访问它,就像访问其他基于序列的数据类型一样。 本教程将指导您通过索引访问字符串&…

Linux如何查看执行过命令的时间?

history调出历史命令,默认不带执行时的时间,下面进行配置,就可以实现了 小白教程,一看就会,一做就成。 1.在~/.bashrc文件中添加如下行 HISTTIMEFORMAT"%Y-%m-%d:%H-%M-%S:whoami:" export HISTTIMEFORMAT…

Centos 更换内核

文章目录 一、查看/更换系统内核1.1 查看当前运行环境的内核1.2 查看系统上所有可用内核1.3 切换内核方法一:通过启动菜单更换内核方法二:更换默认启动内核 二、安装内核2.1 使用ELRepo安装2.2 安装指定内核版本参考资料 一、查看/更换系统内核 1.1 查看…

new Handler(getMainLooper())与new Handler()的区别

Handler 在Android中是一种消息处理机制。 new Handler(); 创建handler对象,常用在已经初始化了 Looper 的线程中调用这个构造函数(即非主线程),如果感觉不好理解,可以把Handler handler new Handler() 理解为常用在…

云计算概述(发展过程、定义、发展阶段、云计算榜单)(一)

云计算概述(一) (发展过程、定义、发展阶段、云计算榜单) 本文目录: 零、00时光宝盒 一、前言 二、云计算的发展过程 三、云计算的定义 四、云计算发展阶段 五、云计算公司榜单看云计算兴衰 六、参考资料 零、0…

【Docker】Docker基础教程

🦖我是Sam9029,一个前端 🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍 基…

php 的运算符

目录 1.算数运算符 2.自增自减 3.比较运算符 4.赋值运算 5.逻辑运算符 6.三元运算 1.算数运算符 运算符名称描述a b加和a - b减差a * b乘积a/b除a和b的商a % b模&#xff08;除法的余数&#xff09;a 除以 b的余数-a取负数a 的负数a.b并置连接两个字符串 <?php he…

读元宇宙改变一切笔记09_硬件与互操作性(下)

1. 移动互联网的继承者 1.1. 要想让元宇宙成为现实&#xff0c;需要开发新的标准&#xff0c;创建新的基础设施&#xff0c;可能还需要对长期存在的TCP/IP协议进行彻底改革 1.1.1. 采用新的设备和硬件&#xff0c;甚至可能打破技术巨头、独立开发者和终端用户之间的权利平衡 …

台式OLED透明屏的6大基本要素

台式 OLED 透明屏作为一种创新的显示技术&#xff0c;正逐渐走进人们的视野。本文将为您全面介绍台式 OLED 透明屏的各个方面&#xff0c;包括类别、尺寸、技术参数原理、应用、主要厂家&#xff08;尼伽&#xff09;以及价格因素。 一、类别台式 OLED 透明屏根据不同的需求和应…

微软Office 2021 批量许可版

软件介绍 微软办公软件套件Microsoft Office LTSC 2021 专业增强版2024年1月批量许可版更新推送&#xff01;Office2021正式版和Windows11系统同时于2021年10月份正式推出&#xff0c;Office LTSC 2021相比 Office2019正式版变化不太&#xff0c;最主要强化了LOGO设计趋势&…

《绝地求生》职业选手画面设置推荐 绝地求生画面怎么设置最好

《绝地求生》画面怎么设置最好是很多玩家心中的疑问&#xff0c;如果性能不是问题无疑高特效显示效果更好&#xff0c;但并不是所有画面参数都利于战斗&#xff0c;今天闲游盒带来分享的《绝地求生》职业选手画面设置推荐&#xff0c;赶紧来看看吧。 当前PUBG的图像设置的重要性…

深度学习中指定特定的GPU使用

目录 前言1. 问题所示2. 解决方法 前言 老生常谈&#xff0c;同样的问题&#xff0c;主要来源于&#xff1a;RuntimeError: CUDA error: out of memory 当使用完之后&#xff0c;想从其他方式调试&#xff0c;具体可看我这篇文章的&#xff1a;出现 CUDA out of memory 的解决…

【安全策略】前端 JS 安全对抗浏览器调试方法

一、概念解析 1.1 什么是接口加密 如今这个时代&#xff0c;数据已经变得越来越重要&#xff0c;网页和APP是主流的数据载体。而如果获取数据的接口没有设置任何的保护措施&#xff0c;那么数据的安全性将面临极大的威胁。不仅可能造成数据的轻易窃取和篡改&#xff0c;还可能…

AI教我学编程之C#类的基本概念(2)

前言 AI教我学编程之C#类的基本概念&#xff08;2&#xff09; 已经更新&#xff0c;欢迎道友们前往阅读&#xff0c;本节我们继续学习C#类的基本概念 目录 上节回顾 质疑 对话AI 特殊情况 发问 解释 数据/函数成员 类和程序–实现一个简单的程序 实现尝试 声明类 类的成员…

[笔记]深度学习入门 基于Python的理论与实现(一)

代码仓库 gitee 1. python 入门 1.5之前是python安装和基础语法, 我直接跳过了 1.5 Numpy 深度学习中经常出现数组和矩阵运算&#xff0c;Numpy 的数组类 numpy.array 提供了很多便捷的方法 1.5.1 导入 Numpy import numpy as np1.5.2 生成 Numpy 数组 np.array()&#xf…

C# wpf 实现任意控件(包括窗口)更多调整大小功能

WPF拖动改变大小系列 第一节 Grid内控件拖动调整大小 第二节 Canvas内控件拖动调整大小 第三节 窗口拖动调整大小 第四节 附加属性实现拖动调整大小 第五章 拓展更多调整大小功能&#xff08;本章&#xff09; 文章目录 WPF拖动改变大小系列前言一、添加的功能1、任意控件Drag…

Vant2组件的使用

组件地址&#xff1a;Vant 2 - Mobile UI Components built on VueMobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/v2/#/zh-CN/ 通过 npm 安装 # Vue 3 项目&#xff0c;安装最新版 Vant&#xff1a; npm i vant -S # Vue 2 项目&#xff0c;安装 Va…

transfomer中Decoder和Encoder的base_layer的源码实现

简介 Encoder和Decoder共同组成transfomer,分别对应图中左右浅绿色框内的部分. Encoder&#xff1a; 目的&#xff1a;将输入的特征图转换为一系列自注意力的输出。 工作原理&#xff1a;首先&#xff0c;通过卷积神经网络&#xff08;CNN&#xff09;提取输入图像的特征。然…