ECMAScript 的 6 種簡單數據類型

前言

本文為JSRedBook數據類型， 主要講述 ECMAScript 的 6 種簡單數據類型（原始類型）中的其中三種：Undefined、Null、Boolean以及常用的操作符。

ECMAScript 的數據類型很靈活，一種數據類型可以當作多種數據類型來使用

typeof 操作符

typeof操作符用於確定（檢測）任意變量的數據類型

類型檢測

對一個值使用 typeof 操作符會返回下列字符串之一：

使用說明

下面是使用 typeof 操作符的例子：

 const message = "Hello"
 console.log(typeof(msssage)) // "string"
 console.log(typeof 99 ) // "number"

註意：因為 typeof 是一個操作符而不是函數，所以不需要參數（但可以使用參數）

小知識

調用typeof null 返回的是 "object"。這是因為特殊值 null 被認為是一個對空對象的引用

註意： 嚴格來講，函數在 ECMAScript 中被認為是對象，並不代表一種數據類型；但函數也有自己特殊的屬性，所以就有必要通過 typeof 操作符來區分函數和其他對象。

Undefined 類型

Undefined 類型隻有一個值，就是特殊值 undefined

增加這個特殊值的目的就是為瞭正式明確空對象指針（null）和未初始化變量的區別

練習場景

當使用 var 或 let 聲明瞭變量但沒有初始化時，就相當於給變量賦予瞭 undefined 值，如下：

 let message; 
 console.log(message == undefined); // true 

變量 message 在聲明的時候並未初始化，因此比較它和 undefined 的字面值時，兩者是相等的

我們再來看看下面這個例子：

 let message = undefined; 
 console.log(message == undefined); // true

這是個不必要的預定義，因為默認情況下任何未經初始化的變量都會取得 undefined 值。

註意： 一般來說，永遠不用顯式地給某個變量設置 undefined 值，字面值 undefined主要用於比較，而且在 ECMA-262 第 3 版之前是不存在的。

undefined 與 not defined 的區別

包含 undefined 值的變量跟未定義變量是有區別的，如下：

 let message;   // 這個變量被聲明瞭，隻是值為 undefined 
 // let age;  確保沒有聲明過這個變量
 ​
 console.log(message); // "undefined" 
 console.log(age); // 報錯；

在上面的例子中，第一個 console.log 因為變量message未定義值，即為"undefined"；而第二個console.log 要輸出一個未聲明的變量 age 的值，因此會導致報錯。

註意： 對未聲明的變量，隻能執行一個有用的操作就是對它調用 typeof。（對未聲明的變量調用 delete 也不會報錯，但這個操作沒什麼用，實際上在嚴格模式下會拋出錯誤）

使用 typeof 檢測 undefined

在對未初始化的變量調用 typeof 時，返回的結果是"undefined"，但對未聲明的變量調用它時，返回的結果還是"undefined"，這就有點讓人看不懂瞭。比如下面的例子：

 let message; //這個變量被聲明瞭，隻是值為 undefined 
 // 確保沒有聲明過這個變量
 ​
 // let age 
 console.log(typeof message); // "undefined"
 console.log(typeof age); // "undefined"

這就奇怪瞭(⊙ˍ⊙)，為什麼無論是聲明還是未聲明，typeof 返回的都是字符串"undefined"？。

因為嚴格來講這兩個變量存在根本性差異，但它們都無法執行實際操作，所以都返回 undefined。

註意： 即使未初始化的變量會被自動賦予 undefined 值，但仍然建議在聲明變量的同時進行初始化。這樣當 typeof 返回 "undefined"時，你就會知道那是因為給定的變量尚未聲明，而不是聲明瞭但未初始化。

小知識

undefined是一個假值。

但是也有很多其他的值可能也是假值，所以一定要明確自己想檢測的就是 undefined 這個字面值，而不僅僅是假值，如下：

 let message; // 這個變量被聲明瞭，隻是值為 undefined 
 ​
 if (message) { 
  // 這個塊不會執行
 } 
 ​
 if (!message) { 
  // 這個塊會執行
 } 
 ​
 if (age) { // age 沒有聲明 
  // 這裡會報錯
 }

Null 類型

null 值表示一個空對象指針

練習場景

因為它的值表示空對象指針，所以用typeof 傳一個 null 會返回 “object”，如下：

 const test = null;
 console.log(typeof test);   // "object"  

建議： 在定義將來要保存對象值的變量時，建議使用 null 來初始化，不要使用其他值；

這樣隻要檢查這個變量的值是不是 null 就可以知道這個變量是否在後來被重新賦予瞭一個對象的引用，如下：

 if (car != null) { 
  // car 是一個對象的引用
 } 

註意： 用等於操作符（==）比較 null 和 undefined 始終返回 true

因為 undefined 值是由 null 值派生而來的，因此 ECMA-262 將它們定義為表面上相等，如下：

 console.log(null == undefined); // true 

小知識

即使 null 和 undefined 有關系，它們的用途也是完全不一樣的。

如前所述，永遠不必顯式地將變量值設置為 undefined，但 null 不是這樣的；任何時候，隻要變量要保存對象，而當時又沒有那個對象可保存，就要用 null 來填充該變量；這樣就可以保持 null 是空對象指針的語義，並進一步將其與 undefined 區分開來。

還有一點：null 也是個假值，檢測方法與上述 undefined 一致

Boolean 類型

Boolean（佈爾值）類型是 ECMAScript 中使用最頻繁的類型之一，有兩個字面值：true 和 false。

• 這兩個佈爾值不同於數值，因此 true 不等於 1，false 不等於 0。

練習場景

佈爾值字面量 true 和 false 是區分大小寫的

因此 True 和 False（及其他大小混寫形式）是有效的標識符，但不是佈爾值，如下：

 const a = true; // ✅
 const b = false; // ✅
 const c = True; // 報錯：True is not defined

類型轉換

雖然佈爾值隻有兩個，但所有其他 ECMAScript 類型的值都有相應佈爾值的等價形式。

要將一個其他類型的值轉換為佈爾值，可以調用特定的 Boolean()轉型函數，如下：

 const message = "Hello juejin";
 const remessage = Boolean(message); // true

在上述例子中，字符串 message 會被轉換為佈爾值並保存在變量 remessage 中。

轉換表

Boolean()轉型函數 可以在任意類型的數據上調用，而且始終返回一個佈爾值；什麼值能轉換為 true或 false 的規則取決於數據類型和實際的值。

下表總結瞭不同類型與佈爾值之間的轉換規則：

這個表非常重要，基本佈爾轉換都得依靠這個表

if 中的轉換

像 if 等流控制語句會自動執行其他類型值到佈爾值的轉換，如下：

 const test = "Hey";
 if (test) { 
     console.log("Value is True");
 }
 // "Value is True"

上面的例子中，字符串 test 會被自動轉換為等價的佈爾值 true，因此成功輸出 "Value is True"；

由於存在這種自動轉換，理解控制流語句中使用的是什麼變量就非常重要，錯誤地使用對象而不是佈爾值會明顯改變應用程序的執行流。

總結

• typeof 操作符用於確定任意變量的數據類型
• undefined 屬性表示變量沒有被賦值，或者根本沒有被聲明
• undefined字面值主要用於比較
• null 值表示一個空對象指針
• null用來填充一個要保存對象，而當時又沒有那個對象可保存的變量
• Boolean 兩個字面值：true 和 false，泛指正確與錯誤；
• Boolean()轉型函數 可以在任意類型的數據上調用，而且始終返回一個佈爾值

到此這篇關於ECMAScript 的 6 種簡單數據類型的文章就介紹到這瞭,更多相關ECMAScript 數據類型內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

• 一篇文章讓你輕松記住js的隱式轉化
• Javascript基礎知識詳解
• 一篇文章弄懂js中的typeof用法
• JavaScript原始值與包裝對象的詳細介紹
• ECMAScript 數據類型之Number類型