前言

本文和大家分享一個前幾天寫代碼踩的坑，筆者在業(yè)務邏輯中需要對一個值進行 NaN 的判斷，由于筆者的不嚴謹，使用了isNaN，從而引起了Bug，也正是因為這個，筆者才知道了 isNaN 和 Number.isNaN 的區(qū)別，如果你認為這倆沒區(qū)別，覺得 isNaN 是歷史遺留的全局變量，后面又加到 Number 上的話，建議你接著往下看。如果你知道他們的區(qū)別，可以劃走了。??

筆者將從以下兩個方面來描述這個知識點：

• 什么是NaN。
• isNaN 和 Number.isNaN 的區(qū)別是什么。

什么是NaN

JS 中的 NaN，是 Not a Number 的縮寫，代表一個值 或者 一個表達式的值 不是一個數字。它有以下幾個特點：

• 它是全局作用域中的一個變量。
• Number.NaN 和 NaN 是同一個東西，有相同的特性，只不過一個是全局變量；一個是 Number 上的屬性。但是它倆也不能劃等號，畢竟 NaN 自己都不等于自己。
• NaN 涉及數學運算，通常情況下都會返回 NaN，但是還有例外，看下圖：

• NaN 涉及關系比較（>, <, >=, <=）時，都返回false。

什么情況下會得到NaN呢？

• 顯式將非 NumBer 類型轉為 Number 類型，比如 Number('aaa')。
• 在調用一些需要數字類型參數的 API 時，可能 API 內部會做轉換，一旦無法轉為數字，可能就返回了 NaN，比如 Math.abs('aaa')。
• 等等......

那在平時開發(fā)中，為了保證我們寫的代碼邏輯運行正常，就可能需要對 NaN 判斷，接下來我們就來看下判斷 NaN 的兩個 API 有啥不同。

isNaN 和 Number.isNaN 的區(qū)別

首先，這倆 API 都能夠用于判斷 NaN，這一點從 API 的名字就能看出，然后各位看圖總結不同的地方：

不同點：

• Number.isNaN 是直接拿參數與 NaN 去比，也就是說，你一定要傳 NaN 進去才返回 true。至于怎么比的，咱也不知道，反正不是 ===，因為 NaN 的特性——自己不等于自己。
• isNaN 會先嘗試將參數轉換成數字，如果可以轉換成數字，則返回 false；否則返回true。

咱們不妨來討論一下，Number.isNaN內部的實現(xiàn)，肯定不是：

Number.isNaN = (target) => target === NaN  // 自己不等于自己

我猜可能是：

// 因為只有傳 `NaN` 進去才返回 `true`，而 NaN 是 Number 類型
// 再加上 `NaN + '' === 'NaN'`
// 也許是對的
Number.isNaN = (target) => Object.prototype.toString.call(target) === '[object Number]' && target+'' === 'NaN'

總結

本文主要內容為：

• NaN 的特性
• isNaN 和 Number.isNaN 的區(qū)別，一句話總結：Number.isNaN只有傳 NaN 進去才返回 true；isNaN 傳 NaN 或者不能轉化為 Number 的都會返回 true。

以后咱們還是不要使用isNaN為好！

以上就是JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解的詳細內容，更多關于JavaScript Number.isNaN和isNaN區(qū)別的資料請關注腳本之家其它相關文章！

最新評論