前端JavaScript中的 == 和 ===区别,以及他们的应用场景,快来看看吧,积累一点知识。

 🎬 江城开朗的豌豆个人主页

 🔥 个人专栏 :《 VUE 》 《 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

null undefined相等

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

下面进一步做个小结:

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

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

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

  • nullundefined 相等

  • 存在 NaN 则返回 false

二、全等操作符

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

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

undefined 和 null 与自身严格相等

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

三、区别

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

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

null 和 undefined 比较,相等操作符(==)为true,全等为false

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

小结

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

'' == '0' // false
0 == '' // true
0 == '0' // truefalse == 'false' // false
false == '0' // truefalse == 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的情况下,我们可以使用相等操作符(==),其他情况建议一律使用全等操作符(===)

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

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

相关文章

优先队列(priority_queue)用法详解

c优先队列(priority_queue)用法详解_c 优先队列_吕白_的博客-CSDN博客 既然是队列那么先要包含头文件#include <queue>, 他和queue不同的就在于我们可以自定义其中数据的优先级, 让优先级高的排在队列前面,优先出队 优先队列具有队列的所有特性&#xff0c;包括基本操作…

map的一些测试-string键的查找

主要区别在于声明map的时候多了一个less<> #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <map> #include <chrono> using namespace std; class spender { public:spender(string strfun) :strfun(strfun…

Java面试题十二天

一、Java面试题十二天 1.为什么在阿里巴巴Java开发手册中强制要求使用包装类型定义属性呢&#xff1f; 默认值问题&#xff1a;使用基本数据类型定义属性时&#xff0c;如果没有给属性赋初始值&#xff0c;会使用默认值&#xff08;如 int 的默认值为 0&#xff09;&#xff…

SAP 操作:怎么设定屏幕前台字段显示/编辑

文章目录 前言一、步骤设定方式 前言 SAP将字段放进群组&#xff0c;通过对群组进行控制。 一、步骤 后勤常规-物料主数据-字段选择 设定方式 点击后面绿色按钮2.

WPF 类库 使用handycontrol 配置

在学习wpf发现了一个非常好用的UI库 handycontrol 但是很多地方讲的都是WPF应用程序怎么用&#xff0c;很少有讲类库那么引用的问题&#xff0c;所以在这里自己总结一下&#xff0c;希望能帮助到大家&#xff1a; 1.添加 handycontrol 的引用&#xff1b;安装&#xff0c;我已…

前端面试题记录

vue2响应式原理 vue2主要是采用了数据劫持结合发布者-订阅者模式来实现数据的响应式&#xff0c;vue在初始化的时候&#xff0c;会遍历data中的数据&#xff0c;使用object.defineProperty为data中的每一个数据绑定setter和getter&#xff0c;当获取数据的时候会触发getter&am…

HZOI-256:国王游戏

题目描述 ​ 恰逢 H 国国庆,国王邀请 n位大臣来玩一个有奖游戏。首先,他让每个大臣在左、右手上面分别写下一个整数&#xff0c;国王自己也在左、右手上各写一个整数。然后&#xff0c;让这 n 位大臣排成一排&#xff0c;国王站在队伍的最前面。排好队后&#xff0c;所有的大臣…

“构建完善的用户认证与数据交互系统“

目录 引言1.ElementUI完成登录注册1. 登录页面设计与实现2. 注册页面设计与实现 2.axios之get请求3.axios之post请求4.跨域问题的解决方案5.总结 引言 在现代Web应用程序开发中&#xff0c;用户认证和数据交互是至关重要的功能。本文将介绍如何使用ElementUI、axios和解决跨域…

C语言每日一题(8):有序序列合并

文章主题&#xff1a;有序序列合并&#x1f525;&#x1f525;&#x1f525;所属专栏&#xff1a;C语言每日一题&#x1f4d7;作者简介&#xff1a;每天不定时更新C语言的小白一枚&#xff0c;记录分享自己每天的所思所想&#x1f604;&#x1f3b6;个人主页&#xff1a;[₽]的…

Linux的socket通信

关于套接字通信定义如下&#xff1a; 套接字对应程序猿来说就是一套网络通信的接口&#xff0c;使用这套接口就可以完成网络通信。网络通信的主体主要分为两部分&#xff1a;客户端和服务器端。在客户端和服务器通信的时候需要频繁提到三个概念&#xff1a;IP、端口、通信数据&…

排序:希尔排序(Shell Sort)算法分析

1.算法思想 希尔排序:先追求表中元素部分有序再逐渐逼近全局有序. 希尔排序∶先将待排序表分割成若干形如 L [ i , i d , i 2 d . . . . , i k d ] L[i,i d,i 2d ...., i kd] L[i,id,i2d....,ikd]的“特殊”子表&#xff0c; 对各个子表分别进行直接插入排序。缩小增量…

4000多配置主机

显卡&#xff1a;盈通大地之神RTX 4060 2069 √ CPU&#xff1a;Intel i5 12400F 845 √ 主板&#xff1a;微星PROH610M-E D4 489 √ 内存&#xff1a;金百达银爵 长鑫Adie 3200MHz C16 16G&#xff08;8G*2&#xff09;205 √ 电源&#xff1a;240.76 √ 固态&#xff1…

报错:appium AttributeError: ‘NoneType‘ object has no attribute ‘to_capabilities‘

报错如下 Traceback (most recent call last):File "C:\Users\wlb\Desktop\test\python\2.py", line 16, in <module>driver webdriver.Remote("http://127.0.0.1:4723/wd/hub", caps)File "D:\software\python3\lib\site-packages\appium\we…

MySQL单表查询和多表查询

一、单表查询 素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作等 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10)…

回溯-求出数组的所有子序列【学习算法】

回溯-求出数组的所有子序列【学习算法】 前言版权推荐回溯-求出数组的所有子序列代码 最后 前言 2023-9-24 22:42:11 以下内容源自《【学习算法】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://b…

恒合仓库 - 采购单管理模块

采购单管理模块 文章目录 采购单管理模块一、添加采购单(核心)1.1 采购流程1.2 采购单实体类1.3 添加采购单1.3.1 Mapper1.3.2 Service1.3.3 Controller1.3.4 效果图 二、采购单管理模块2.1 仓库数据回显2.1.1 Mapper2.1.2 Service2.1.3 Controller2.1.4 效果图 2.2 采购单列表…

【Unity的HDRP渲染管线搭建配置VR交互场景_SteamVR 插件和Pico串流助手】

HDRP渲染管线配置VR交互场景 Unity创建场景和相关配置下载导入项目打开PICO串流助手在Pico中的配置:用Steam串流VR_这篇的前置补充 Unity创建场景和相关配置 带HDRP Sample Scene 示例的 下载 SteamVR Unity插件地址02 导入项目

刷题笔记26——图论二分图判定

世界上的事情,最忌讳的就是个十全十美,你看那天上的月亮,一旦圆满了,马上就要亏厌;树上的果子,一旦熟透了,马上就要坠落。凡事总要稍留欠缺,才能持恒。 ——莫言 visited数组是在如果有环的情况下&#xff0c;防止在图中一直绕圈设置的&#xff0c;类似于剪枝操作&#xff0c;走…

怒刷LeetCode的第10天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;两次拓扑排序 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;分治法 方法二&#xff1a;优先队列&#xff08;Priority Queue&#xff09; 方法三&#xff1a;迭代 第三题 题目来源 题目内容…

el-table 默认数据选中优化版本

直接看代码 <template><div><el-tableref"multipleTable":data"tableData"tooltip-effect"dark"style"width: 100%;height:500px"select"handleSelectChange"select-all"handleSelectAllChange"ro…