前言 & 廢話:

這篇是基礎打底系列第二篇,這篇其實比較簡單些,要來搞懂的是 null、undefined、NaN 的差別

Javascript 這語言有很多特別的地方,除了上篇根據原始值、複合值來決定by value、by reference 外

其他語言只會有一種型態來表示 "沒有" 的意思,像 C# 是 null、VB.Net 是 Nothing

但 Javascript 至少就有 null 跟 undefined 兩種,另外還有個 NaN 不知道幹嘛的

這篇要來稍微了解一下它們之間的差異為何,還有開發時該怎麼處理這些特別的值

雖然簡短,但也有目錄,懶得看過程可以直接點結論:

1. 容易出包的狀況

2. Undefined

3. Null

4. NaN

5. 結論

 

容易出包的狀況:

首先,因為 null 跟 undefined 和 NaN 在 if 判斷時值都會轉換為 false,所以一般不容易遇到錯誤

但還是有些特殊的例子可能會因為這樣就包了,像下面這段網路上看到的例子

window.onbeforeunload = function() {
return $body.hasClass('playing') ? '遊戲仍在進行中!' : undefined;
};

IE 必須要返回 undefined 才不會跳提示

或是你有一個非常良好的習慣,每次都是用 === 來做判斷,那也會非常容易出包

請看下面的例子

console.log(null == undefined); // 輸出 true,因為都是 false

但你如果用這樣就會是 false

console.log(null === undefined); // 輸出 false

來看一下 null 跟 undefined 的型態,會發現一個是 object 一個是 undefined

console.log(typeof null);  // 輸出 object
console.log(typeof undefined); // 輸出 undefined

還記得上一篇講的嗎?

當 Javascript 變數為複合值時,if 判斷式中比對的是記憶體位址

因為 null 被視為 object 也就是複合值,所以當然就不相等了

再來是 NaN,假設 a 是某個頁面上來的值,拿來 parseInt 之後再加 10 就 GG 了

var a = "test";
var b = parseInt(a) + 10;
console.log(b);  // 輸出 NaN

以下來看看它們的差異

 

Undefined

來看看下面幾個 undefined 例子:

上面例子一開始用 var 宣告了 a 這個變數,但卻沒有指定值,javascript 是在給值時才決定型態的

所以直接輸出的時候就是 undefined 未定義型態

下一個例子:

呼叫函數時,缺少的參數是 undefined 

下一個例子:

要使用一個物件所沒有的屬性也是 undefined 

 

Null

在 js 裡反而比較少直接返回 null 的

以下的例子會返回 null

 

NaN

最後是 NaN 

NaN 是 "Not a Number" 的簡稱,常會發生在轉型的時候

ex : 

因為傳入了一個怎麼看都不像數字的字串進去,所以就會返回 NaN 

NaN 這東西很詭異,他跟任何數字相加都會是 NaN

但是跟字串相加就會變成真的字串相加

而且他的型態還是 number

NaN 可以使用 if 直接判斷,因為跟 null、undefined 一樣,在判斷式裡值轉為 false   

或是可以用內建的 isNaN() 函數判斷

 

結論:

綜合以上的例子可以大概知道:

null:這地方會有一個值,但這個值目前還沒準備好的意思,所以先填入 null

undefined:這地方沒有這個東西,所以你無法使用

NaN:要轉型成數字時傳入參數非數字的時候

而 null、undefined、NaN 在判斷上都可以直接當作 false 來判斷

var a = null;
var b = undefined;
if (!a && !b) {
console.log("null && undefined");  // 輸出 null && undefined
}

因為在 if 判斷式裡會自動將 null、undefined、NaN 的值轉換為 false

但如果你要很確定的判斷 null 或 undefined,就請使用 ===

var c = undefined;
var d = null;
if (c === undefined && d === null) {
console.log("null && undefined");  // 輸出 null && undefined
}

 

NaN 的話也可以使用內建的 isNaN() 函數來判斷

 

下篇待續....

 

 

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

Javascript 基礎打底系列 (二) - null、undefined、NaN 的差異與檢查方式

Javascript 基礎打底系列 - By Value、By Reference 的課後考題!

Javascript 基礎打底系列 (三) - 邏輯運算子,與短路邏輯 (short circuit logic) 的應用

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()