首頁 > 軟體

JavaScript相等判斷的避坑實戰指南

2022-08-25 22:01:12

JS中的相等性

1、嚴格相等(===)

嚴格相等本質上是判斷一個值是否與自身相等,在比較前不進行隱式型別轉換。當被比較的兩個值型別相同,值也相同,且不是Number型別時,這兩個值是全等的。當兩個值型別是Number時,我們需要注意NaN,NaN和NaN不相等,+0和-0全等,其餘情況,只要值相等,就是全等的。

NaN === NaN //false
+0 === -0 // true
undefined === undefined //true
null === null //true
undefined === null //false
({}) === {} //false
3 === '3' //false
3 === 3 //true
true === true //true
false === 0 //false

2、非嚴格相等(抽象相等)(==)

判斷比較的兩個值是否相等,在比較前會轉化為相同的型別,轉換型別後,和嚴格相等(===)比較規則一致。

比較規則(A/B)undefinednullNumberStringBooleanObject
undefinedtruetruefalsefalsefalsefalse
nulltruetruefalsefalsefalsefalse
NumberfalsefalseA === BtoNumber(B)===AtoNumber(B)===AtoPrimetive(B) == A
StringfalsefalsetoNumber(A)===BA===BtoNumber(A)===toNumber(B)toPrimetive(B) == A
BooleanfalsefalsetoNumber(A)===BtoNumber(A)===toNumber(B)A===BtoPrimetive(B) == toNumber(A)
ObjectfalsefalsetoPrimitive(A) == BtoPrimitive(A) == BtoPrimetive(A) == toNumber(B)A===B
null == undefined // true
null == 0 // false
null == '' // false
null == 'null' //false
null == false // false
null == [] //false
null == {} //false
null == NaN //false
undefined == 0 //false
undefined == '' //false
undefined == 'undefined' //false
undefined == false //false
undefined == [] //false
undefined == {} //false
undefined == NaN //false
'' == 0 //true
'' == false //true
'' == [] //true
'' == {} // false
0 == false // true
0 == [] // true
0 == {} // false
true == '1' //true
true == 'true' //false
true == 1 // true
true == [] //false
false == [] //true
true == {} //false
([]) == [] //false
({}) == {} //false
3 == '3'  //true
NaN == NaN // false
+0 == -0 // true

總結規律可得: undefined和null認為值相等,但是當undefined和null與其他型別進行相等比較時,不進行隱式型別轉換,與其他的任何型別值都不相等,所有物件與undefined和null不相等,但是有個特例,如:document.all == undefineddocument.all == null均為true

嚴格相等和非嚴格相等比較可得:嚴格相等的結果更具預測性,且無需進行型別轉換,效率也更高

3、同值相等

同值相等是用來判斷兩個值是否是同一個值,通過Object.is()來判斷,是es6新方法。有點類似於嚴格相等,不會對傳入的兩個引數值進行隱式型別轉換,但是與嚴格相等又不完全相同,在對待+0、-0以及NaN上不一致

  • 都是undefined
  • 都是null
  • 相同的兩個字串
  • 都是true或者都是false
  • 參照值相同的兩個物件
  • 都是NaN
  • 都是不為NaN且不為0的值相同的數位
  • 都是+0或者都是-0
Object.is(NaN, NaN) //true
Object.is(NaN, 0 / 0) // true
Object.is(+0, -0) // false
Object.is(+0, +0) //true
Object.is(undefined, undefined) //true
Object.is(null, null) //true
Object.is(undefined, null) //false
Object.is({}, {}) //false
Object.is(3, '3') //false
Object.is(3, 3) //true
Object.is(true, true) //false
Object.is(false, 0) //false

4、零值相等

**與同值相等類似,認為+0和-0相等**

Object.is()實現方案

// 實現方案:
Object.defineProperty(Object, "is", {
    value: function (x, y) {
        if (x === y) {
            // 需要區分一下+0和-0
            return x !== 0 || 1 / x === 1 / y
        } else {
            // 需要區分一下NaN
            return x !== x && y !== y
        }
    }
})

總結

到此這篇關於JavaScript相等判斷避坑的文章就介紹到這了,更多相關JavaScript相等判斷避坑內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com