Undefined vs Null

在JavaScript中，將一個變量賦值爲undefined或null，感受沒啥區別，都表示「無」；但在實際應用中，遠非如此，這兩個之間區別的不明確可能會致使一些問題。

在這篇文章中，我已經簡略介紹了undefined和null的特性了。

本文將探討JavaScript中undefined和null之間的類似和差別之處。

類似性

（1）undefined和null在if語句中，都會被自動轉爲false，加!轉換爲true，相等運算符對於二者比較是相等的。

if (!undefined) 
    console.log('undefined is false');
// undefined is false

if (!null) 
    console.log('null is false');
// null is false

undefined == null
// true
複製代碼

（2）在JavaScript中，只有六個falsy值，null和undefined都包含在六個falsy值中，當進行邏輯判斷時全部的Falsy值均爲false。

• false
• 0
• '' (空字符串，''和""同樣)
• null
• undefined
• NaN

除了這六個值，JavaScript中的任何其餘值都被認爲是truthy值，當進行邏輯判斷時均爲true。

（3）一樣在JavaScript中，有六個原始值，null和undefined都包含在這六個原始值中。

• Boolean
• Null
• Undefined
• Number
• String
• Symbol

既然undefined和null的含義與用法都比較類似，那爲何還要無故增長另一個值，這不是增長混淆嗎？

歷史緣由

最近，在閱讀阮一峯老師的博客文章時，才從歷史因素裏獲得答案！

1995年JavaScript誕生之初，像Java同樣，只設置了null做爲表示"無"的值。

根據C語言的傳統，null被設計成能夠自動轉爲0。

Number(null)
// 0

6 + null
// 6
複製代碼

可是，JavaScript的設計者Brendan Eich，以爲這樣作達不到本身的預想，其中有兩個緣由。

首先，null像在Java裏同樣，被當成一個對象。可是，JavaScript的數據類型分紅原始類型（primitive）和合成類型（complex）兩大類，Brendan Eich以爲表示"無"的值最好不是對象。

其次，JavaScript的最第一版本沒有包括錯誤處理機制，發生數據類型不匹配時，每每是自動轉換類型或者默默地失敗。Brendan Eich以爲，若是null自動轉爲0，很不容易發現錯誤。

所以，Brendan Eich又設計增長了一個undefined。

差別性

（1）數據類型區別

undefined類型只有一個值，undefined；null類型只有一個值，null。

也就是說undefined值和null值分別屬於不一樣的數據類型，而且這兩個數據類型都只有一個值，使用「typeof」運算符判斷類型。

console.log(typeof undefined);  // undefined
console.log(typeof null);   // object 
複製代碼

第一行輸出沒毛病，正確打印出undefined類型；而第二行打印結果爲object，難道null不是null類型？

緣由解釋：這是JS一個設計失誤，本來正確的結果應該是null，如今只能將錯就錯，或許之後哪一個新版本會修正此問題。

（2）轉爲數值區別

JavaScript的最第一版本爲了更好區分這兩個值，是這樣設定的：null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

var a1= 5 + null;
console.log(a1)  // 5

var a2= 5 + undefined;
console.log(a2)  // NaN
複製代碼

（3）null !== undefined

如上所見，null和undefined不一樣，但有一些類似之處， 所以，ECMAScript規範規定null不嚴格等於undefined。

null !== undefined  // true

null === undefined  // false
複製代碼

可是，上面也提到了，null鬆散相等於undefined（相比===的相等程度更低）。

null == undefined  // true
複製代碼

在JavaScript中，==適用鬆散相等，意味着咱們在將它們轉換爲通用類型後比較兩個值。

只要記住null == undefined會返回true，由於它們是相似的值；但null === undefined會返回false，由於它們是不一樣類型的值。後續也會增長==與===區別的文章，敬請期待。

實際用法

可是，上面的區分，在實踐中都不經常使用。實際上，null和undefined被視爲幾乎同義的，只有一些細小的差異。

null表示一個變量被人爲的設置爲空對象，而不是原始狀態，即該處不該該有值。通常會在如下 2 種場景中出現：

（1） 利用document.getElementById(‘XXX’) 尋找一個不存在的元素，將返回null。

console.log(null == document.getElementById('notExistElement'))  // true
複製代碼

（2） 做爲對象原型鏈的終點。

Object.getPrototypeOf(Object.prototype)  // null
複製代碼

undefined表示一個變量天然的、最原始的狀態值，就是此處應該有一個值，可是尚未定義。通常會在如下 4 種場景中出現：

（1）聲明瞭一個變量，但沒有賦值，就等於undefined。

var a
console.log(a) // undefined
複製代碼

（2) 函數定義了形參，但沒有傳遞實參，該參數等於undefined。

//函數定義了形參 a 
function f(a) {
     console.log(a); // undefined 
}  
f(); //未傳遞實參
複製代碼

（3）訪問對象上不存在的屬性，該屬性的值爲undefined。

var  a = new Object()
a.p // undefined
複製代碼

（4）函數沒有返回值時，默認返回undefined。

var a = f()
a // undefined
複製代碼

因此，在實際使用過程當中，爲了保證變量所表明的語義，不要對一個變量顯式的賦值 undefined，當須要釋放一個對象時，直接賦值爲 null 便可。

最後引用玉伯大大對null和undefined的解釋：

值類型的「虛無」用undefined，引用類型的「虛無」，用null。

本人Github連接以下，歡迎各位Star

github.com/miqilin21/m…