JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
前言
本文和大家分享一個前幾天寫代碼踩的坑,筆者在業(yè)務(wù)邏輯中需要對一個值進(jìn)行 NaN 的判斷,由于筆者的不嚴(yán)謹(jǐn),使用了isNaN,從而引起了Bug,也正是因?yàn)檫@個,筆者才知道了 isNaN 和 Number.isNaN 的區(qū)別,如果你認(rèn)為這倆沒區(qū)別,覺得 isNaN 是歷史遺留的全局變量,后面又加到 Number 上的話,建議你接著往下看。如果你知道他們的區(qū)別,可以劃走了。??
筆者將從以下兩個方面來描述這個知識點(diǎn):
- 什么是
NaN。 isNaN和Number.isNaN的區(qū)別是什么。
什么是NaN
JS 中的 NaN,是 Not a Number 的縮寫,代表一個值 或者 一個表達(dá)式的值 不是一個數(shù)字。它有以下幾個特點(diǎn):

- 它是全局作用域中的一個變量。
Number.NaN和NaN是同一個東西,有相同的特性,只不過一個是全局變量;一個是Number上的屬性。但是它倆也不能劃等號,畢竟NaN自己都不等于自己。NaN涉及數(shù)學(xué)運(yùn)算,通常情況下都會返回NaN,但是還有例外,看下圖:

NaN涉及關(guān)系比較(>,<,>=,<=)時,都返回false。
什么情況下會得到NaN呢?
- 顯式將非
NumBer類型轉(zhuǎn)為Number類型,比如Number('aaa')。 - 在調(diào)用一些需要數(shù)字類型參數(shù)的
API時,可能API內(nèi)部會做轉(zhuǎn)換,一旦無法轉(zhuǎn)為數(shù)字,可能就返回了NaN,比如Math.abs('aaa')。 - 等等......
那在平時開發(fā)中,為了保證我們寫的代碼邏輯運(yùn)行正常,就可能需要對 NaN 判斷,接下來我們就來看下判斷 NaN 的兩個 API 有啥不同。
isNaN 和 Number.isNaN 的區(qū)別
首先,這倆 API 都能夠用于判斷 NaN,這一點(diǎn)從 API 的名字就能看出,然后各位看圖總結(jié)不同的地方:

不同點(diǎn):
Number.isNaN是直接拿參數(shù)與NaN去比,也就是說,你一定要傳NaN進(jìn)去才返回true。至于怎么比的,咱也不知道,反正不是===,因?yàn)?NaN的特性——自己不等于自己。isNaN會先嘗試將參數(shù)轉(zhuǎn)換成數(shù)字,如果可以轉(zhuǎn)換成數(shù)字,則返回false;否則返回true。
咱們不妨來討論一下,Number.isNaN內(nèi)部的實(shí)現(xiàn),肯定不是:
Number.isNaN = (target) => target === NaN // 自己不等于自己
我猜可能是:
// 因?yàn)橹挥袀?`NaN` 進(jìn)去才返回 `true`,而 NaN 是 Number 類型 // 再加上 `NaN + '' === 'NaN'` // 也許是對的 Number.isNaN = (target) => Object.prototype.toString.call(target) === '[object Number]' && target+'' === 'NaN'
總結(jié)
本文主要內(nèi)容為:
NaN的特性isNaN和Number.isNaN的區(qū)別,一句話總結(jié):Number.isNaN只有傳NaN進(jìn)去才返回true;isNaN傳NaN或者不能轉(zhuǎn)化為Number的都會返回true。
以后咱們還是不要使用isNaN為好!
以上就是JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript Number.isNaN和isNaN區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題
這篇文章主要介紹了JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題做個筆錄,以防出現(xiàn)類似錯誤,需要的朋友可以參考下2016-08-08
JavaScript?顯示一個倒計時廣告牌的實(shí)現(xiàn)示例
本文主要介紹了JavaScript?顯示一個倒計時廣告牌的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04
JavaScript動態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
這篇文章主要是對JavaScript動態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
javascript設(shè)計模式之單體模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計模式之單體模式學(xué)習(xí)筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
原生JavaScript實(shí)現(xiàn)合并多個數(shù)組示例
這篇文章主要介紹了原生的JavaScript及jquery實(shí)現(xiàn)合并多個數(shù)組,很簡單,很實(shí)用,大家可以看看2014-09-09
JS實(shí)現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼,需要的朋友可以參考下2017-09-09
解決layer 關(guān)閉當(dāng)前彈窗 關(guān)閉遮罩層 input值獲取不到的問題
今天小編就為大家分享一篇解決layer 關(guān)閉當(dāng)前彈窗 關(guān)閉遮罩層 input值獲取不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

