JS实用功能-10、谈谈JS的==和===运算符

接触JS三年多了,遇到很多数学方面的知识,赋值相等可能是最简单的一部分,但真的是这样吗?大家先来看看下面的一些例子:

false == 0; //true
['1', '2', '3'] == '1, 2, 3'; //true
undefined == null; //true
'wtf' == 'WTF'; //true

看到上述的赋值判断,是不是觉得有点不可思议。

首先,JavaScript有两个相等的运算符:==(等等于)===(全等于)

为了理解相等,我们必须了解这两种平等判断之间的区别。正如我们从其他编程语言和数学===中学到的一样,我们的行为与以前一样。

有时候,我们要慎用==。建议多使用===号。

x == y

我们就以简单的判断 x和y,尝试让大家对==和===的深刻理解。

一、当x和y是相同的数据类型 ==与===行为一致

1==1 => 1===1 //true
"abc" == "ABC => "abc" === "ABC" //false
[1,2,3] == [1,2,3] => [1,2,3] === [1,2,3] //false

二、如果x和y是undefined和null

null == undefined // true
undefined == null // true
null === undefined // false(特殊数据类型)

三、x和y不同数据类型(String和Number)

'2' == 2 => Number('2') == 2 // true
'2.5' == 2.5 => Number('2.5') == 2.5 // true
'' == 0 => Number('') == 0 // true
'evil' == 666 => Number('evil') == 666 // false
BigInt(2) == "2" -> BigInt(2) == BigInt("2") // true

如果一个值是字符串类型,而另一个值是数字类型,则JavaScript将比较字符串的数字值。请记住,将空字符串转换为数字0

四、x或y为布尔类型

false == 0  => 0 == 0 // true
false == '0' => 0 == '0' => 0 == 0  // true
true == 1 => 1 == 1 // true
false == '' => 0 == '' => 0 == 0 // true

转换为数字类型的布尔值0(false)或1(true)。请注意第二行,转换false为0后,比较现在是数字和字符串数据类型。正如上面第三点,您刚刚了解了它的工作原理!

五、如果xy分别是一个对象,并且是字符串,数字,Bigint或符号,则将对象转换为基本类型并执行==

['1', '2', '3'] == '1,2,3' => ['1', '2', '3'].toString() === '1,2,3' // true
[1,2,3] == '1,2,3' => true
const me = {
  toString() {
    return "lazy";
  },
  valueOf() {
    return "1337"
  }
}
    
const you = {
  toString() {
    return "lazy";
  },
  valueOf() {
    return { 
      key: "1337" 
    }
  }
}
    
me == "lazy" // false
me == "1337" // true
me == [1,3,3,7] // false
you == "lazy" // true
you == {key: "1337"} // false
me == BigInt(1337) // true
me == 1337 // true   

通常通过返回valueOf()-函数的值将数据类型对象转换为基本类型 。如果未实现或未返回原始值,则它将返回toString()-函数的值。

六、如果x和y是BigInt和Number,则true在数学值相同的情况下返回

123 == BigInt(123) // true
123 === BigInt(123) //false
999 == BigInt(123) // false

七、以下全为false

[1,2,3] == { valueOf() { return "1,2,3" } } // false
0 == null // false
0 == NaN // false
0 == undefined // false
null == false // false
NaN == false // false
undefined == false // false

 

上一篇:photoshop使用叠加蒙版和图层样式制作出彩色天空壁纸效果


下一篇:解决更新页面版本后用户需CTRL+F5强刷才能应用最新页面