從 Number.isNaN 與 isNaN 的區別說起例子

2bdenny 發布于2019-08-22 11:14 / 721人閱讀

摘要：但是跟普通的是的不一樣的是，代表這一意義。的沒有的情況下，可以采用以下簡單來看，就是在原有的基礎上增加了一個的判斷，因為的是。還有一種更加簡單的實現利用了只有不跟自己相等的特性。不過我們可以通過以上方式來解釋判斷為什么會出現這樣的情況了。

例子

大家先看一看下面這個例子，

isNaN(NaN);

isNaN("A String");

isNaN(undefined);

isNaN({});

Number.isNaN(NaN);

Number.isNaN("A String");

Number.isNaN(undefined);

Number.isNaN({});

如果你能很清楚答案，那么這篇文章你可以略過。
不清楚的朋友，我們來慢慢來分析。

答案如下：

isNaN(NaN); // true

isNaN("A String"); // true

isNaN(undefined); // true

isNaN({}); // true

Number.isNaN(NaN); // true

Number.isNaN("A String"); // false

Number.isNaN(undefined); // false

Number.isNaN({}); // false

為什么看起來同樣的函數，得出的結果為什么不同呢？

NaN 是什么？

在解釋 NaN 之前，我想先解釋下 type/value/variable 這個幾個容易混淆的概念，已經很清楚的朋友可以跳過這一小節

type / value / variable 是什么

在 JavaScript 中，value一共有七種type

null

undefined

boolean

number

string

object

symbol (ES6新增)

那么，variable是什么呢？就是我們平時 var 之后的聲明的那個東西。

type, value, variable 之間的關系可以這么說：variable是存放value的容器，而value是有著type概念的，但是容器variable是沒有type的概念的，舉個例子

var a = "foo";

容器 variable a 裝著 value "foo", value "foo" 的type是string

NaN

MDN里面這么描述

The global NaN property is a value representing Not-A-Number.

意思是是說：NaN是一個放在 global（瀏覽器里是window）對象里的一個value，是一個代表Not-A-Number的value.

意思還是很含糊。

那么我們在看神書《You Don"t Know JS》里的描述

NaN literally stands for "not a number", though this label/description is very poor and misleading, It would be much more accurate to think of NaN as being "invalid number," "failed number," or even "bad number," than to think of it as "not a number."

根據上一個小結的知識，我們知道了，NaN是一個 value, 這個 value 的 type 是 number。

但是跟普通的type是number的value不一樣的是，NaN 代表 "Not a number" 這一意義。

那么問題來了，怎么判斷一個 value 是不是 NaN 呢?

isNaN()

也許有人會說，判斷還不容易嗎？直接比較不就好了。

NaN === NaN // false

NaN 跟它自己比較會返回false。

所以，我們就需要一個特殊的函數來判斷一個value是不是NaN了。

isNaN() 就橫空出世了。

我們再回頭看一看上面的例子

isNaN(NaN); // true

OK, 成功了，看似很完美，但是接著看以下例子

isNaN("A String"); // true

isNaN(undefined); // true

isNaN({}); // true

會發現，很明顯不是 NaN 的 value 也被誤判成 NaN 了。

這個BUG已經存在了20年，從JavaScript最開始就一直存在。很明顯當初的設計者，在設計isNaN()的時候，局限了在 "Not a Number" 這一字面意思上了：只要不是number就會返回 true。

于是 ES6 為了彌補這一BUG（而不是修正，因為isNaN存在時間太長，有可能很多功能都是基于這個BUG之上的）引入了 Number.isNaN().

Number.isNaN(NaN); // true

Number.isNaN("A String"); // false

Number.isNaN(undefined); // false

Number.isNaN({}); // false

回頭看上面的例子，就明白了修復了什么問題。

Number.isNaN() 的 polyfill

沒有ES6的情況下，可以采用以下polyfill

if (!Number.isNaN) {
  Number.isNaN = function(n) {
    return (
      typeof n === "number" &&
      window.isNaN( n )
    );
  };
}

簡單來看，就是在原有 isNaN() 的基礎上增加了一個 type 的判斷，因為 NaN 的 type 是 number。

還有一種更加簡單的實現

if (!Number.isNaN) {
    Number.isNaN = function(n) {
        return n !== n;
    };
}

利用了只有 NaN 不跟自己相等的特性。

順便吐槽一下MDN的解釋，他是這么解釋 isNaN() 的

You could think of isNaN as:

var isNaN = function(value) {
    return Number.isNaN(Number(value));
}

他是在ES6新函數Number.isNaN()的基礎上，去解釋舊函數isNaN()的。

不過我們可以通過以上方式來解釋判斷 isNaN() 為什么會出現

isNaN("A String"); // true

isNaN(undefined); // true

isNaN({}); // true

這樣的情況了。

作者微博

作者博客

云服務器 GPU云服務器公有云私有云的區別舉例子空間與域名的區別接口與類的區別云服務與云盤的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92016.html

記isNaN與Number.isNaN的區別

摘要：有一次項目中發現原來和是有著不一樣的判斷結果。要了解他們的區別，首先得明確到底是什么在的官方解釋中是一個全局代表的值。目前的結論的類型是，這還是有點令人困惑。但從我們上述對的理解來看，這樣的判斷顯然不正確。有一次項目中發現原來isNaN和Number.isNaN是有著不一樣的判斷結果。記錄一下避免下次踩坑。要了解他們的區別，首先得明確NaN到底是什么？在MDN的官方解釋中 The...

Render 2019-08-26 11:57 評論0 收藏0
js常見基礎對象屬性方法 (二)

摘要：常見基礎對象屬性方法二關于的箭頭函數的返回對象的問題箭頭函數具有隱式返回的特性。返回值函數累計處理的結果。語句將某個對象添加的作用域鏈的頂部，如果在中又某個未使用命名空間的變量，跟作用域鏈中的某個屬性同名，則這個變量將指向這個屬性值。 js常見基礎對象屬性方法 (二) 關于es6的箭頭函數的返回對象的問題箭頭函數(=>)具有隱式返回的特性。如果某個函數體只有單個表達式，你就可以忽略r...

Donald 2019-08-23 10:50 評論0 收藏0
JavaScript值介紹

摘要：的數字類型是基于標準實現的，該標準也被稱為浮點數使用的是雙精度即位進制由于數字值可以使用對象進行封裝，因此數字值可以調用中的方法。數組和其他語言不同，在JavaScript中，數組可以擁有不同值類型,可以使字符串，數字，對象，還可以是數組(多維數組就是這樣形成的). 聲明數組后，可以直接通過索引的方式進行賦值: var arr = []; arr.length; //0 ...

hsluoyz 2019-08-20 15:21 評論0 收藏0
「讀懂源碼系列2」我從 lodash 源碼中學到的幾個知識點

摘要：今天要講的，是我從的源碼實現文件中學到的幾個很基礎，卻又容易被忽略的知識點。在函數式編程中，函數是一等公民，它可以只是根據參數，做簡單的組合操作，再作為別的函數的返回值。所以，閱讀源碼，是一種很棒的重溫基礎知識的方式。 showImg(https://segmentfault.com/img/bVbpTSY?w=750&h=422); 前言上一篇文章「前端面試題系列8」數組去重(1...

Amio 2019-08-26 13:38 評論0 收藏0
ES6（2）-各種類型的擴展（字符串、正則、數值、函數）

摘要：返回布爾值，表示參數字符串是否在原字符串的頭部。模板字符串之中還能調用函數。其他對字符串還有許多擴展，例如對字符表示的擴充以及為字符串提供了遍歷方法詳情請點擊正則的擴展構造函數在中，構造函數的參數有兩種情況。 ES6對各種基本類型都做了擴展，內容有些多，本章節挑選比較重要的擴展說明。 1 字符串的擴展 1.1 includes(), startsWith(), endsWith() 傳...

godruoyi 2019-08-20 19:02 評論0 收藏0