==和===的区别,被坑的一天

在 JavaScript 中,===== 都用于比较两个值,但它们有一个重要的区别:

1. == (宽松相等运算符)

== 进行比较时,会 自动类型转换(也叫做强制类型转换),即如果比较的两个值的类型不同,JavaScript 会尝试将它们转换成相同的类型,再进行比较。

2. === (严格相等运算符)

=== 进行比较时 不会进行类型转换,也就是说,只有当两个值 类型相同且值相等 时,=== 才返回 true

举个例子:

1. 使用 == 时的情况(类型转换):
javascript复制代码
console.log(1 == '1');  // true
  • 1 是数字类型,'1' 是字符串类型。
  • == 会尝试将字符串 '1' 转换为数字 1,然后比较 1 == 1,结果为 true
javascript复制代码
console.log(false == 0);  // true
  • false 是布尔值,0 是数字。
  • == 会把 false 转换为 0,然后比较 0 == 0,结果为 true
2. 使用 === 时的情况(不进行类型转换):
javascript复制代码
console.log(1 === '1');  // false
  • 1 是数字类型,'1' 是字符串类型。
  • === 不会进行类型转换,直接比较 1'1',因为它们的类型不同,所以结果为 false
javascript复制代码
console.log(false === 0);  // false
  • false 是布尔值,0 是数字类型。
  • === 不会进行类型转换,直接比较 false0,因为它们的类型不同,所以结果为 false

总结:

  • == 会进行 类型转换,如果值可以转换成相同类型,它们就会被认为是相等的。
  • === 不会进行类型转换,只有 类型和值都相等 时,结果才为 true

因此,为了避免潜在的错误和不可预期的结果,推荐使用 ===,即严格相等运算符,这样比较更为准确和清晰。

讲讲今天:

代码:

computed: {selectedDurationLabel() {const option = this.durationOptions.find(option => option.value === this.room.duration);return option ? option.label : '选择起订时长';}},

功能:

在点击编辑的时候,起订时长那显示原先存的值,

实现:

我在这里有一个判断,拿原先存的值去和我的durationOptions去比较,如果找到一样的,那么就给他返回该值,可以做到默认显示的效果

遇到的问题:

这里一直都是显示:选择起订时长,并没有达到我要的效果,然后我想办法测试了一下,尝试分别输出这两个值,发现,这两个值在控制台上颜色不一样,突然就想到会不会是因为这个原因引起的(因为颜色不一样肯定字段类型也不一样)
在这里插入图片描述
然后就解决这个问题了(类型转换一下或者改为==就好)

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

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

相关文章

Git的使用流程(详细教程)

目录 01.Git是什么? 1.1 Git简介 1.2 SVN与Git的最主要的区别 1.3 GIt主要特点 02.Git是干什么的? 2.1.Git概念汇总 2.2 工作区/暂存区/仓库 2.3 Git使用流程 03.Git的安装配置 3.1 Git的配置文件 3.2 配置-初始化用户 3.3 Git可视化…

使用Docker部署最新版JupyterHub

拉取镜像 docker pull jupyterhub/jupyterhub:latest启动镜像 docker run -d -p 8000:8000 --name jupyterhub jupyterhub/jupyterhub:latest jupyterhub进入容器 docker exec -it jupyterhub bash生成jupyterhub的配置文件 jupyterhub --generate-config# 有需要可以安装中…

liunx下载gitlab

1.地址: https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 安装 postfix 并启动 yum install postfix systemctl start postfix systemctl enable postfix ssh服务启动 systemctl enable sshd systemctl start sshd开放 ssh 以及 http 服务&#xff0c…

【AI大模型】深入GPT-2模型细节:揭秘其卓越性能的秘密

目录 🍔 GPT2的架构 🍔 GPT2模型的细节 2.1 模型过程 2.2 GPT2工作细节探究 🍔 小结 学习目标 掌握GPT2的架构掌握GPT2的训练任务和模型细节 🍔 GPT2的架构 从模型架构上看, GPT2并没有特别新颖的架构, 它和只带有解码器模块…

oceanbase集群访问异常问题处理

1.报错现象 2.问题排查 检查obproxy状态发现为不可用状态 重启obproxy 依次重启Obproxy集群 观察任务状态 重启完成 Obproxy状态正常 3.验证登录 登录成功

Echarts+vue电商平台数据可视化——webSocket改造项目

websocket的基本使用,用于测试前端能否正常获取到后台数据 后台代码编写: const path require("path"); const fileUtils require("../utils/file_utils"); const WebSocket require("ws"); // 创建WebSocket服务端的…

【数据结构】双向循环链表的使用

双向循环链表的使用 1.双向循环链表节点设计2.初始化双向循环链表-->定义结构体变量 创建头节点(1)示例代码:(2)图示 3.双向循环链表节点头插(1)示例代码:(2&#xff…

【深度学习】卷积网络代码实战ResNet

ResNet (Residual Network) 是由微软研究院的何凯明等人在2015年提出的一种深度卷积神经网络结构。ResNet的设计目标是解决深层网络训练中的梯度消失和梯度爆炸问题,进一步提高网络的表现。下面是一个ResNet模型实现,使用PyTorch框架来展示如何实现基本的…

【51项目】51单片机自制小霸王游戏机

视频演示效果: 纳新作品——小霸王游戏机 目录: 目录 视频演示效果: 目录: 前言: 一、连接方式: 1.1 控制引脚 1.2. 显示模块 1.3. 定时器 1.4. 游戏逻辑与硬件结合 1.5. 中断处理 二、源码分析&#xff1a…

2024/12/29 黄冈师范学院计算机学院网络工程《路由期末复习作业一》

一、选择题 1.某公司为其一些远程小站点预留了网段 172.29.100.0/26,每一个站点有10个IP设备接到网络,下面那个VLSM掩码能够为该需求提供最小数量的主机数目 ( ) A./27 B./28 C./29 D./30 -首先审题我们需要搞清楚站点与网…

【OpenCV】使用Python和OpenCV实现火焰检测

1、 项目源码和结构(转) https://github.com/mushfiq1998/fire-detection-python-opencv 2、 运行环境 # 安装playsound:用于播放报警声音 pip install playsound # 安装opencv-python:cv2用于图像和视频处理,特别是…

Vue2: table加载树形数据的踩坑记录

table中需要加载树形数据,如图: 官网给了两个例子,且每个例子中的tree-props都是这么写的: :tree-props="{children: children, hasChildren: hasChildren}" 给我一种错觉,以为数据结构中要同时指定children和hasChildren字段,然而,在非懒加载模式下,数据结…

深度学习模型预测值集中在某一个值

深度学习模型,训练过程中,经常遇到预测的结果集中在某个值,而且在学习的过程中会变,样例如下。 主要有如下解决方案 1、更换relu ->tanh 或者其他激活函数 2、更改随机种子,估计是没有初始化好,或者调…

图书项目:整合SSM

步骤: pom文件:导包,写入静态资源导出配置,连接数据库 建包:controller dao/mapper pojo service 配置文件:mybatis-config.xml applicationContext.xml(Spring的配置文件) datab…

javacript中function (res) {}与箭头函数表达式(res) =>{}的区别

javacript中function (res) {}与(res) >{}的区别 function (res) {} 代码演示 let shape {name:长方形,say:function(){console.log(我是this.name)setTimeout(function(){console.log(3秒后输出我是: this.name); //this.name为undefined}, 3000)} }shape.sa…

Docker安装(Docker Engine安装)

一、Docker Engine和Desktop区别 Docker Engine 核心组件:Docker Engine是Docker的核心运行时引擎,负责构建、运行和管理容器。它包括守护进程(dockerd)、API和命令行工具客户端(docker)。适用环境&#…

【卡通风格的的登录界面】

卡通风格的的登录、注册界面模板&#xff0c;使用uni-app编写&#xff0c;直接复制粘贴即可。 废话不多说&#xff0c;代码如下&#xff1a; login.vue文件 <template><view class"content"><view class"login-form"><view class&quo…

【AI】最近有款毛茸茸AI生成图片圈粉了,博主也尝试使用风格转换生成可爱的小兔子,一起来探索下是如何实现的

应用名称&#xff1a;一键变身毛茸茸小兔子 体验地址&#xff1a;点击跳转体验 模型名称&#xff1a;Kolors&#xff0c;点击跳转 背景 Gitee AI最近发起了一个社群挑战赛。 如果最近你也没什么好点子&#xff0c;想练习又无从下手&#xff0c;怎么办呢&#xff1f; 没关系&a…

重学 Android 自定义 View 系列(十):带指针的渐变环形进度条

前言 该篇文章根据前面 重学 Android 自定义 View 系列(六)&#xff1a;环形进度条 拓展而来。 最终效果如下&#xff1a; 1. 扩展功能 支持进度顺时针或逆时针显示在进度条末尾添加自定义指针图片使用线性渐变为进度条添加颜色效果 2. 关键技术点解析 2.1 进度方向控制的…

Oracle 23ai 图形界面安装

新年的第一篇博客&#xff0c;展示下Oracle 23ai的图形化安装。 主要给大家看下界面&#xff0c;安装的过程与19c没什么不同。 安装前 安装Oracle Database Preinstallation RPM&#xff1a; sudo dnf install oracle-database-preinstall-23aioracle用户有了&#xff1a; …