JavaScript漫談之理解類型操作符typeof

在本文中，將簡述JavaScript類型系統和數據類型，以及如何使用typeof操作符執行類型檢查。

還講解了使用typeof操作符進行某些數據類型檢查是不完善的，並介紹其他幾種類型檢查的方法。

更多內容歡迎關注GitHub

每種編程語言都有自己的類型系統和數據類型，但各種編程語言的數據結構常有不同之處。使用JavaScript時，其引擎會在腳本執行期間隱式強制轉換執行值的類型。類型檢查對於編寫可預測的JavaScript程序是非常有必要的。

JavaScript中的typeof操作符就是用於基礎的類型檢查

typeof操作符返回字符串，表示未經計算的操作數的類型（來自MDN）

一、JavaScript的數據類型

在此之前，需要了解JavaScript有哪些數據類型，最新標準定義了8種數據類型：

• 7種原始類型：

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

• 其他爲引用類型：

  • Object

  • 數組array()、函數function()、正則表達RegExp特殊的物體：

    • array是一種特殊的對象，它是一個有序的編號值集合
    • function是一種特殊類型的對象，具有與之關聯的可執行腳本塊有關

JavaScript還有幾個對象類構造函數，用於創建其他類型的對象：

• Date—用於創建日期對象
• RegExp—用於創建正則表達式
• Error—用於創建JavaScript錯誤

二、typeof功能

1、語法

typeof使用一元操作符（只需要一個操作數）的計算結果作爲其操作數的類型結果字符串。

另一種替代語法就是將操作數放入括號中使用，這種對JavaScript表達式返回的值進行類型檢查非常有用。

typeof 參數
typeof(參數)

參數：一個表示對象或原始值的表達式，其類型將被返回

typeof "sueRimn";        // 'string'
typeof 22;                // 'number'
typeof NaN;              // 'number'
typeof Infinity;         // 'number'
typeof true;             // 'boolean'
typeof false;            // 'boolean'
typeof [1, 2];           // 'object'
typeof {age: 22};        // 'object'
typeof null;             // 'object'
typeof undefined;        // 'undefined' 
typeof String;           // 'function'
typeof Boolean;          // 'function' 
typeof Number;           // 'function'
typeof Object;           // 'function'
typeof Function;         // 'function'
typeof person;           // 'function'

undefined是它自己的JavaScript類型

在ES6之前，typeof不管操作數是否聲明，總是返回一個字符串，即對於未聲明的標識符，總是返回而不是拋出錯誤。

在ES6中，使用let或const聲明的塊級作用域變量在初始化之前與typeof操作符使用，將拋出錯誤。

原因是：塊級作用域變量在被初始化之前一直保留在臨時死區。

console.log(typeof name === 'undefined'); // ReferenceError
const name = 'sueRimn';

2、一般類型檢查

在JavaScript中執行類型檢查主要使用typeof操作符

function add(a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw '參數必須是數值'
    }
    return a + b;
}

以下是對類型檢查的簡單摘要：

值	類型
undefined	"undefined"
null	"object"
原始對象	"object"
所有數組	"object"
其他對象	"object"
true/false	"boolean"
字符串	"string"
所有符號	"symbol"
所有函數	"function"
宿主對象	依賴於實現

檢測值是否存在在不同環境是這樣的：

if (typeof window !== 'undefined') {
  // 瀏覽器
};

if (typeof process !== 'undefined') {
  // Node.js
}

if (typeof $ !== 'undefined') {
  // jQuery 
}

3、其他類型檢查

對於某些值需要額外的類型檢查纔可以區分，例如null和[]在使用typeof操作符執行type-check時都是"object"類型，但是區分它們需要額外的操作。

一些其他數據類型值檢查方法：

• 使用instanceof
• 檢查對象的constructor屬性
• 使用對象的toString()方法檢查對象類

（1）檢測是否爲空

使用typeof操作符檢查值是否爲空並不好，檢查值是否爲空的最佳方法是對值與關鍵字進行嚴格相等比較。

以上代碼呈現的結果是不一樣的，所以使用嚴格相等操作符是非常重要的。

（2）檢測NaN

任何涉及NaN的算術運算都將對NaN求值，如果想爲任何形式的算術運算使用值，那麼需要確保該值不是NaN。

使用typeof操作符檢查NaN值是否返回"number"。要檢查NaN值，可以使用全局函數isNaN()，或者ES6中的Number.isNaN()函數:

NaN值非常特殊，通過比較，它永遠不等於任何其他值，包括它自己:

可以使用以下方法在非ES6環境下檢測NaN：

function isNan(value) {
  return value !== value;
}

最後，你可以利用ES6中的Object.is()函數來測試值是否爲NaN。

以下函數作用是檢查兩個值是否相同：

function isNan(value) {
  return Object.is(value, Number.NaN);
}

（3）檢測數組

使用typeof檢查數組將返回object。這裏介紹幾種檢測數組的方法，並進行對比：

• 使用constructor屬性（不推薦）

function isArray(value) {
  return typeof value == 'object' && value.constructor === Array;
}

• 使用instanceof（不推薦，因爲對象的原型可以更改）

function isArray(value) {
  return value instanceof Array;
}

• 使用Object.prototype.toString()（推薦，類似於ES6 Array.isArray()）

function isArray(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

object.prototype.tostring()方法對於檢查任何JavaScript值的對象類型都非常有用

• 使用ES6 Array.isArray()

 

function isArray(value) {
  return Array.isArray(value);
}