JS - undefined 資料類型

在了解

undefined

資料類型之前，我們來複習一下js資料類型。

JS 的資料類型包括:

• Boolean:

  true

  和

  false

• Number: 整數

  1

  和浮點數

  1.2

• String:

  Conan Wang

• Null:

  null

• Undefined:

  undefined

• Symbol:

  Symbol("name")

  (ES2015)

undefined 的資料類型：

typeof undefined === “undefined”; //true

2. 導緻undefined的常見場景

2.1 未初始化變量

尚未指派的（未初始化）的聲明變量預設為

undefined

var res;

console.log(typeof res); //undefined

技巧1 ： 使用let 和 const 來代替的 var

const 和 let 具有塊級作用域，在聲明行之前存在于暫時性死區。

當變量一次性且永久地接收到一個值時，建議使用const聲明const聲明，它建立一個不可變的綁定。

技巧2 ：增加内聚性

内聚描述子產品的元素（命名空間、類、方法、代碼塊）内聚在一起的程度。凝聚力的測量通常被稱為高凝聚力或低内聚力。

高内聚是優選的，因為它建議設計子產品的元素以僅關注單個任務，它構成了一個子產品。

• 專注且易懂
• 可維護且更容易重構
• 可重用

• 可測試

  高内聚和低耦合是一個設計良好的系統的特征。

  代碼塊本身可能被視為一個小子產品，為了盡可能實作高内聚，需要使用變量盡可能接近使用它們代碼塊的位置。

2.2 通路不存在的屬性

通路不存在的對象屬性時，JS傳回的

undefined

var obj = {
   name: 'conan';
}
//使用屬性選擇器obj.age通路不存在的屬性age将被計算為`undefined`;
           

本身通路不存在的屬性不會引發錯誤，但是嘗試從不存在的屬性中擷取資料時就會發生出問題。

技巧3 檢查屬性是否存在

JS提供了很多方法來确定對象具有特定屬性：

• obj.name !== undefined

  : 直接與

  undefined

  進行比較

• typeof obj.name !== 'undefined'

  : 驗證屬性值類型
• obj.hasOwnProperty(‘name’) : 驗證對象是否具有自己的屬性 僅在對象自己的屬性中進行驗證

• 'name' in obj

  : 驗證對象的是否具有自己的屬性或繼承屬性

建議使用

in

操作符，它的文法短小精悍。

in

操作符的存在表明一個明确的意圖，即檢查對象是否具有特定的屬性，而不通路實際的屬性值。

技巧4 解構通路對象屬性

技巧5 用預設屬性填充對象

2.3 函數參數

函數參數隐式預設為

undefined

技巧6：使用預設參數值

2.4 函數傳回值

隐式地， 沒有

return

語句， JS函數傳回

undefined

.

技巧7：不要相信自動插入分号

JS中的以下語句必須以分号結尾：

• 空語句

• let

  ,

  const

  ,

  var

  ,

  import

  ,

  export

  聲明
• 表達語句

• debugger

  語句

• continue

  語句，

  break

  語句

• throw

  語句

• return

  語句

void 操作符

void <expression>

計算表達式計算結果如何都傳回

undefined

.

3. 未定義的數組

通路越界索引的數組元素時，會得到

undefined

.

var arr = [name, age, desc];
arr[5];  //=> undefined
           

通路稀疏數組的間隙（空槽）時，也會得到

undefined

.

4. undefined 和 null 之間的差別

兩個特殊值都表示空狀态，主要差別在于

undefined

表示尚未初始化的變量的值，

null

表示故意不存在對象。

var num;
console.log(num);//undefined
// num 變量未定義，這清楚的表明未初始化的變量。
           

undefined == null; //true

undefined === null; //false

總結

undefined

的存在是JS的允許性質的結果，它允許使用：

• 未初始化的變量
• 不存在的對象屬性或方法
• 通路越界索引的數組元素
• 不傳回任何結果的函數的調用結果

減少代碼中的

undefined

關鍵字的出現：

• 減少未初始化變量的使用
• 使變量生命周期變短并接近其使用的位置
• 盡可能為變量配置設定初始值
• 多敷衍 const 和 let
• 使用預設值來表示無關緊要的函數參數
• 驗證屬性是否存在或使用預設屬性填充不安全對象
• 避免使用稀疏數組