快捷導(dǎo)航

JavaScript相等判斷的避坑實(shí)戰(zhàn)指南

更新時間：2022年08月25日 16:16:01 作者：夢想敲木魚

JavaScript中的相等性判斷,在項目開發(fā)中,我經(jīng)常會遇到,今天我們一起探討下,下面這篇文章主要給大家介紹了關(guān)于JavaScript相等判斷的避坑實(shí)戰(zhàn)指南,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

JS中的相等性

1、嚴(yán)格相等(===)

嚴(yán)格相等本質(zhì)上是判斷一個值是否與自身相等，在比較前不進(jìn)行隱式類型轉(zhuǎn)換。當(dāng)被比較的兩個值類型相同，值也相同，且不是Number類型時，這兩個值是全等的。當(dāng)兩個值類型是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、非嚴(yán)格相等(抽象相等)(==)

判斷比較的兩個值是否相等，在比較前會轉(zhuǎn)化為相同的類型，轉(zhuǎn)換類型后，和嚴(yán)格相等(===)比較規(guī)則一致。

比較規(guī)則(A/B)	undefined	null	Number	String	Boolean	Object
undefined	true	true	false	false	false	false
null	true	true	false	false	false	false
Number	false	false	A === B	toNumber(B)===A	toNumber(B)===A	toPrimetive(B) == A
String	false	false	toNumber(A)===B	A===B	toNumber(A)===toNumber(B)	toPrimetive(B) == A
Boolean	false	false	toNumber(A)===B	toNumber(A)===toNumber(B)	A===B	toPrimetive(B) == toNumber(A)
Object	false	false	toPrimitive(A) == B	toPrimitive(A) == B	toPrimetive(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

總結(jié)規(guī)律可得: undefined和null認(rèn)為值相等，但是當(dāng)undefined和null與其他類型進(jìn)行相等比較時，不進(jìn)行隱式類型轉(zhuǎn)換，與其他的任何類型值都不相等，所有對象與undefined和null不相等，但是有個特例，如：document.all == undefined和document.all == null均為true

嚴(yán)格相等和非嚴(yán)格相等比較可得：嚴(yán)格相等的結(jié)果更具預(yù)測性，且無需進(jìn)行類型轉(zhuǎn)換，效率也更高

3、同值相等

同值相等是用來判斷兩個值是否是同一個值，通過Object.is()來判斷，是es6新方法。有點(diǎn)類似于嚴(yán)格相等，不會對傳入的兩個參數(shù)值進(jìn)行隱式類型轉(zhuǎn)換，但是與嚴(yán)格相等又不完全相同，在對待+0、-0以及NaN上不一致

都是undefined
都是null
相同的兩個字符串
都是true或者都是false
引用值相同的兩個對象
都是NaN
都是不為NaN且不為0的值相同的數(shù)字
都是+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、零值相等

**與同值相等類似，認(rèn)為+0和-0相等**

Object.is()實(shí)現(xiàn)方案

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