跟我學習javascript的undefined與null_javascript技巧-js教程-PHP中文網

當討論JavaScript中的原始資料類型時，大多數人都知道從String、Number到Boolean的基本知識。這些原始類型相當簡單，行為符合常識。但是，本文將更關注獨特的原始資料類型Null和Undefined，是什麼讓它們如此相似，卻又似是而非。

一、理解null和undefined

在JavaScript中，null是字面量同時也是語言中的關鍵字，用來表示無法辨識的物件值。換句話說，這用來表示“無值（no value）”，但你可以決定什麼時候得到期望值。

雖然相似，undefined實際上代表了不存在的值（non-existence of a value），也即你有東西丟失了。兩者都是完全不可變的，沒有屬性和方法，也不能給其屬性賦值。事實上, 當你試圖存取或定義null 與 undefined的一個屬性將會引發一個類型錯誤（TypeError）。

沒有值代表的布林值是false，這表示他們在條件上下文中會被計算為false，如if語句。使用相等運算子(= =)比較這兩個值和其他false值,他們並不等於除了自己：

null == 0; // false 
undefined == ""; // false 
null == false; // false 
undefined == false; // false 
null == undefined; // true

登入後複製

儘管如此，和其他相似之處，但null和undefined並不是等價的。每個作為其獨特的類型的唯一成員,undefined是Undefined類型和null是Object類型。使用全等運算子（===）比較這兩個值，這要求類型和值都相等，下面證明這一點：

null === undefined; //false
typeof null; //"object"
typeof undefined; //"undefined"

登入後複製

上面說明：null 這是一個對象，但是為空。而且 null 是 JavaScript 保留關鍵字。
另外null 參與數值運算時其值會自動轉換為 0 ，因此，下列表達式計算後會得到正確的數值：

123 + null;　　　//123 
123 * null;　　　//0

登入後複製

undefined是全域物件（window）的一個特殊屬性，其值是未定義的。但 typeof undefined 回傳 ‘undefined' 。
雖然undefined是有特殊意義的，但它確實是一個屬性，而且是全域物件（window）的屬性。請看下面的程式碼：

alert('undefined' in window);//输出：true 
var anObj = {}; 
alert('undefined' in anObj); //输出：false

登入後複製

從中可以看出，undefined是window物件的屬性，但卻不是anObj物件的屬性。
注意：

儘管undefined是有特殊意義的屬性，但卻不是JavaScript的保留關鍵字。 undefined參與任何數值計算時，其結果一定是NaN。隨便說一下，NaN是全域物件（window）的另一個特殊屬性，Infinity也是。這些特殊屬性都不是JavaScript的保留關鍵字！
驗證一個值或一個物件為null時，需要用「===」來判定，若只用「==」,則無法判定是null 還是 undefined.

二、產生Undefined情況
有許多的方法產生一個undefined值的程式碼。它通常會遇到當試圖存取不存在的值時。在這種情況下，在JavaScript這種動態的弱型別語言中，只會預設回傳一個undefined值，而不是上升為一個錯誤。

1、任何宣告變數時沒有提供初始值，都會有一個為undefined的預設值：

var foo; // 默认值为 undefined

登入後複製

2、當試圖存取一個不存在的物件屬性或陣列項目時，傳回一個undefined值：

var array = [1, 2, 3]; 
var foo = array.foo; // foo 属性不存在, 返回 undefined 
var item = array[5]; // 数组中没有索引为5的项，返回 undefined

登入後複製

3、如果省略了函數的回傳語句, 或return語句未帶任何參數回傳undefined：

var value = (function(){

})(); // 返回 undefined 
var value1 = (function(){
  return;
})(); // 返回 undefined

登入後複製

4、呼叫函數時，應該提供的參數沒有提供，該參數等於undefined

function f(x){
  console.log(x)
}
f(); // undefined

登入後複製

最後，undefined是一個預先定義的全域變數(不像null關鍵字)初始化為undefined值：

'undefined' in window; // true

登入後複製

ECMAScript 5中，这个变量是只读的，以前并非如此。

三、null的用例

null的用例是使他与众不同的主要方面，因为不像undefined，null被认为是更有用。这正是为什么typeof操作符作用于null值时返回“object”。最初的理由是，现在仍然是，通常用作一个空引用一个空对象的预期,就像一个占位符。typeof的这种行为已经被确认为一个错误，虽然提出了修正，出于后兼容的目的，这一点已经保持不变。

一般来说,如果你需要给一个变量或属性指定一个不变值，将它传递给一个函数，或者从一个函数返回null，null几乎总是最好的选择。简而言之，JavaScript使用undefined并且程序员应该使用null。

null的另一个可行的用例，也被认为是良好的实践是一个显式指定变量为无效(object= null)当一个引用不再是必需的。通过分配null值，有效地清除引用，并假设对象没有引用其他代码，指定垃圾收集，确保回收内存。

四、提高undefined性能

当我们在程序中使用undefined值时，实际上使用的是window对象的undefined属性。同样，当我们定义一个变量但未赋予其初始值，例如：

var aValue;

登入後複製

这时，JavaScript在所谓的预编译时会将其初始值设置为对window.undefined属性的引用，于是，当我们将一个变量或值与undefined比较时，实际上是与window对象的undefined属性比较。这个比较过程中，JavaScript会搜索window对象名叫‘undefined'的属性，然后再比较两个操作数的引用指针是否相同。

由于window对象的属性值是非常多的，在每一次与undefined的比较中，搜索window对象的undefined属性都会花费时间。在需要频繁与undefined进行比较的函数中，这可能会是一个性能问题点。因此，在这种情况下，我们可以自行定义一个局部的undefined变量，来加快对undefined的比较速度。例如：

function anyFunc() { 
  var undefined; 
  //自定义局部undefined变量 
  if(x == undefined) 
  //作用域上的引用比较 
  while(y != undefined) 
  //作用域上的引用比较 
};

登入後複製

其中，定义undefined局部变量时，其初始值会是对window.undefined属性值的引用。新定义的局部undefined变量存在与该函数的作用域上。在随后的比较操作中，JavaScript代码的书写方式没有任何的改变，但比较速度却很快。因为作用域上的变量数量会远远少于window对象的属性，搜索变量的速度会极大提高。

这就是许多前端JS框架为什么常常要自己定义一个局部undefined变量的原因！

以上就是本文的全部内容，希望对大家的学习有所帮助。