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

在 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

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

讲讲今天:

代码:

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

功能:

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

实现:

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

遇到的问题:

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

然后就解决这个问题了(类型转换一下或者改为==就好)

相关推荐
lang2015092821 分钟前
Spring远程调用与Web服务全解析
java·前端·spring
m0_564264181 小时前
IDEA DEBUG调试时如何获取 MyBatis-Plus 动态拼接的 SQL?
java·数据库·spring boot·sql·mybatis·debug·mybatis-plus
崎岖Qiu1 小时前
【设计模式笔记06】:单一职责原则
java·笔记·设计模式·单一职责原则
Hello.Reader1 小时前
Flink ExecutionConfig 实战并行度、序列化、对象重用与全局参数
java·大数据·flink
熊小猿2 小时前
在 Spring Boot 项目中使用分页插件的两种常见方式
java·spring boot·后端
paopaokaka_luck2 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
老华带你飞2 小时前
机器人信息|基于Springboot的机器人门户展示系统设计与实现(源码+数据库+文档)
java·数据库·spring boot·机器人·论文·毕设·机器人门户展示系统
notion20253 小时前
Adobe Lightroom Classic下载与安装教程(附安装包) 2025最新版详细图文安装教程
java·数据库·其他·adobe
rengang663 小时前
351-Spring AI Alibaba Dashscope 多模型示例
java·人工智能·spring·多模态·spring ai·ai应用编程
小蒜学长4 小时前
springboot酒店客房管理系统设计与实现(代码+数据库+LW)
java·数据库·spring boot·后端