前言 & 廢話: 這篇是基礎打底系列第二篇,這篇其實比較簡單些,要來搞懂的是 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) 的應用
|
|