在 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
是数字类型。===
不会进行类型转换,直接比较false
和0
,因为它们的类型不同,所以结果为false
。
总结:
==
会进行 类型转换,如果值可以转换成相同类型,它们就会被认为是相等的。===
不会进行类型转换,只有 类型和值都相等 时,结果才为true
。
因此,为了避免潜在的错误和不可预期的结果,推荐使用 ===
,即严格相等运算符,这样比较更为准确和清晰。
讲讲今天:
代码:
computed: {selectedDurationLabel() {const option = this.durationOptions.find(option => option.value === this.room.duration);return option ? option.label : '选择起订时长';}},
功能:
在点击编辑的时候,起订时长那显示原先存的值,
实现:
我在这里有一个判断,拿原先存的值去和我的durationOptions去比较,如果找到一样的,那么就给他返回该值,可以做到默认显示的效果
遇到的问题:
这里一直都是显示:选择起订时长,并没有达到我要的效果,然后我想办法测试了一下,尝试分别输出这两个值,发现,这两个值在控制台上颜色不一样,突然就想到会不会是因为这个原因引起的(因为颜色不一样肯定字段类型也不一样)
然后就解决这个问题了(类型转换一下或者改为==就好)