搞定NaN,靠這一篇就夠了

NaN, “Not a Numbe**r”的縮寫,直譯過來就是“非數字”。本質上是“非數字的特殊值**”,我們把這個詞拆分成“非數字”和“特殊值”,
“非數字”很好理解,

var str = “i am string”;
var nl = null;
var bl = true;

上面都是非數字。那麼怎麼理解“特殊值”呢?“特殊值”就是無法用數字表示的值。好,可能不好理解,先放一放,先看一下NaN的類型,

typeof NaN  // 'number'

很奇怪不是嗎?NaN表示非數字,但是他又是number類型,感覺有點矛盾。以前看到有篇文章說,這是JavaScript設計的一個錯誤,後來ECMAScript沿用了這個錯誤。不管了,我們只要記住NaN的類型是number這點就行了。那麼

什麼情況下會出現NaN?
1.直接定義

var nan = NaN;

2.在轉換爲number的過程中出現了錯誤

var str = "i am string";
var str2int = parseInt(str);   //NaN

此時str2int就是NaN。
前面說過,NaN表示“非數字的特殊值”,而“特殊值就是無法用數字表示的值”。來理解一下這句話,str顯然是一個字符串,即string類型,我們用parseInt函數將其轉換爲number類型。實際上確實是轉換成功了,我們可以驗證一下:

typeof parseInt(str)  //'number'

我們發現轉換後的結果是number類型,說明類型確實是轉換成功了。但是轉換後的值是多少呢?不知道,或者說無法用數字表示,這種情況下就用NaN表示。

如何判斷一個值是否是NaN?
方案一:用 ==

console.log(NaN == NaN);

打印false。很多初學者看到這裏可能會大跌眼鏡,沒錯,你沒看錯,NaN與所有值都不相等,包括他自己

console.log(NaN !== NaN);   //true

parseInt(“i am string”)是NaN,parseFloat(“bbb”)也是NaN,這兩個NaN不相等,也是有一定道理的。所以用這個方法來判斷一個值是否是NaN是行不通的。
方案二:用isNaN()方法
從函數名就可以知道,該方法是用來判斷一個值是否是NaN的。該方法會先隱式的將它的參數轉換成數字

isNaN("i am string");

你可以將上面的過程看成兩步,第一步,將參數轉換成數字,parseInt(“i am string”)或parseFloat(“i am string”),我們知道,這個結果一定是NaN,然後再isNaN(NaN),返回true。所以isNaN(“i am string”)的結果就是true。同理:

console.log(isNaN('hello'));  // true
console.log(isNaN(['hello']));    // true
console.log(isNaN({}));       // true

那麼什麼時候返回false呢?
如果第一步(將參數轉換成數字)的結果不是NaN,那麼就會返回false了。

console.log(isNaN('123'));       // false

parseInt(‘123’)的結果是123,而123不是NaN,所以調用isNaN(123)的結果自然就是false了。
不過這個方案容易給人一種錯覺,如isNaN(‘hello’)的結果是NaN,搞得好像字符串’hello’是NaN一樣,因此我不建議採用這種方法。
方案三: 用 Number.isNaN()方法
如果傳入的參數是NaN,就返回true,如果不是,就返回false。

console.log(Number.isNaN(NaN));            // true
console.log(Number.isNaN(parseInt('i am string')));  // true
console.log(Number.isNaN('hello'));        // false
console.log(Number.isNaN(['hello']));          // false
console.log(Number.isNaN({}));             // false

該方法相對於方案二嚴謹多了,推薦使用這種方式。
原文地址:
http://tanlian.co/2015/11/16/%E6%90%9E%E5%AE%9ANaN%EF%BC%8C%E9%9D%A0%E8%BF%99%E4%B8%80%E7%AF%87%E5%B0%B1%E5%A4%9F%E4%BA%86/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章