JavaScript相等判斷的避坑實戰(zhàn)指南
更新時間：2022年08月25日 16:16:01 作者：夢想敲木魚
JavaScript中的相等性判斷,在項目開發(fā)中,我經(jīng)常會遇到,今天我們一起探討下,下面這篇文章主要給大家介紹了關于JavaScript相等判斷的避坑實戰(zhàn)指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
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 //false2、非嚴格相等(抽象相等)(==)
判斷比較的兩個值是否相等，在比較前會轉化為相同的類型，轉換類型后，和嚴格相等(===)比較規(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總結規(guī)律可得: undefined和null認為值相等，但是當undefined和null與其他類型進行相等比較時，不進行隱式類型轉換，與其他的任何類型值都不相等，所有對象與undefined和null不相等，但是有個特例，如：document.all == undefined和document.all == null均為true
嚴格相等和非嚴格相等比較可得：嚴格相等的結果更具預測性，且無需進行類型轉換，效率也更高
3、同值相等
同值相等是用來判斷兩個值是否是同一個值，通過Object.is()來判斷，是es6新方法。有點類似于嚴格相等，不會對傳入的兩個參數(shù)值進行隱式類型轉換，但是與嚴格相等又不完全相同，在對待+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) //false4、零值相等
**與同值相等類似，認為+0和-0相等**
Object.is()實現(xiàn)方案
// 實現(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
}
}
})總結
到此這篇關于JavaScript相等判斷避坑的文章就介紹到這了,更多相關JavaScript相等判斷避坑內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文重點給大家介紹js判斷json對象是否為空的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解
js中事件監(jiān)聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用并且簡單,但在原生js中比較復雜,下面這篇文章主要給大家介紹了關于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關資料,需要的朋友可以參考下2023-05-05
javascript一些實用技巧小結，學習js的朋友可以看下。2011-03-03
JavaScript實現(xiàn)的開關燈泡點擊切換特效示例
這篇文章主要介紹了JavaScript實現(xiàn)的開關燈泡點擊切換特效,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了javascript中提供了Date對象來進行時間和日期的計算，這里簡單的介紹下， 方便需要的朋友2013-03-03
這篇文章主要介紹了有關js對字符串數(shù)組進行拼接的性能問題，字符串連接一直是js中性能最低的操作之一，應該如何解決呢？請參看本文的介紹2014-10-10
本篇文章主要對javascript獲取url信息的常見方法進行介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
javascript 中按屬性值查找數(shù)組中的對象多種方法
JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動增長和動態(tài)，這篇文章主要介紹了javascript 中按屬性值查找數(shù)組中的對象多種方法,需要的朋友可以參考下2023-06-06
LRU（Least Recently Used）緩存淘汰算法是一種常見的緩存淘汰策略，它的核心思想是優(yōu)先淘汰最近最少使用的緩存數(shù)據(jù)，以保證緩存中的數(shù)據(jù)始終是最熱門的。本文主要介紹了一些關于如何實現(xiàn)LRU緩存淘汰算法的方法，感興趣的小伙伴可以參考一下2023-04-04
這篇文章主要介紹了es6新特性之 class 基本用法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05