JS中準確判斷變量類型的方法

這是一個高頻面試題，我們開發中也進程會遇到，今天我們來實現一個函數getValType(val)用來獲取一個變量的類型。從1. JS基礎變量類型。2. Js中判斷變量的函數。 3. 實現getValType函數。3個方面來分析實現。

Js基礎變量類型
 

在 JS 中，有 5 種基本數據類型和 1 種複雜數據類型，基本數據類型有：Undefined, Null, Boolean, Number和String；複雜數據類型是Object，Object中還細分了很多具體的類型，比如：Array, Function, Date等等。

判斷變量的函數

我們先定義一組變量來用下面的函數來測試：

  var allVarMap = {   // 數字   num:123,   // Infinity   num1: 1 / 0,   // NaN   num2: null / 0,   // 字符串   str: 'abcdef',   // 布爾類型   bool: true,   // 數組   arr :[1, 2, 3, 4],   // json對象   json :{name:'wenzi', age:25},   // 函數   func:function(){ console.log('this is function'); },   // 箭頭函數   func1: () => {console.log('arrow function')},   // undefined類型   und:undefined,   // null類型   nul:null,   // date類型   date:new Date(),   // 正則表達式   reg :/^[a-zA-Z]{5,20}$/,   // 異常類型   error:new Error()  }

typeof判斷變量類型

typeof運算符用於判斷對象的類型，但是對於一些創建的對象，它們都會返回object。我們用該函數來判斷上面的結果：

  var results = []  for (let i in allVarMap) {  	results.push(typeof allVarMap[i])  }  console.log(results.join())  // number,number,number,string,boolean,object,object,function,function,undefined,object,object,object,object

可以看到，NaN和Infinity都檢查為number類型，其他的 string,function,boolean,undefined包括箭頭函數都能正確檢查出來，但是對於reg,date,null都得到了object。看來還需要具體的判斷。

instanceof檢查
 

ECMAScript 引入了另一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與typeof 運算符相似，用於識別正在處理的對象的類型。instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。與 typeof 方法不同的是，instanceof方法要求開發者明確地確認對象為某特定類型。

  console.log(allVarMap.date instanceof Date) // true  console.log(allVarMap.func instanceof Function) // true

可以看到instanceof可以正確判斷出date,func的類型，但是前提是已知該變量的類型，所以這裡不符合我們的預期。

使用Object.prototype.toString.call
 

定義：首先，取得對象的一個內部屬性[[Class]]，然後依據這個屬性，返回一個類似於”[object Array]“的字符串作為結果（看過ECMA標準的應該都知道，[[]]用來表示語言內部用到的、外部不可直接訪問的屬性，稱為“內部屬性”）。利用這個方法，再配合call，我們可以取得任何對象的內部屬性[[Class]]，然後把類型檢測轉化為字符串比較，以達到我們的目的。
 我們看看下面的函數運行結果：

  var results = []  for (let i in allVarMap) {  	results.push(Object.prototype.toString.call(allVarMap[i]))  }  console.log(results.join())  // [object Number],[object Number],[object Number],[object String],[object Boolean],[object Array],[object Object],[object Function],[object Function],[object Undefined],[object Null],[object Date],[object RegExp],[object Error]

實現getValType函數
 

根據上面的分析，我們可以先用typeOf函數判斷出基礎類型number,string,function,boolean,undefined。然後如果結果是object，我們再用Object.prototype.toString.call來判斷出具體的類型。

  var getVarType = function (val = 0) {  	var type = typeof val  	// object需要使用Object.prototype.toString.call判斷  	if (type === 'object') {  		var typeStr = Object.prototype.toString.call(val)  		// 解析[object String]  		typeStr = typeStr.split(' ')[1]  		type = typeStr.substring(0, typeStr.length - 1)  	}  	return type  }  var results = []  for (let i in allVarMap) {  	results.push(getVarType(allVarMap[i]))  }  console.log(results.join())  // number,number,number,string,boolean,Array,Object,function,function,number,Null,Date,RegExp,Error

可以看到，完美判斷出了所有變量的類型，該函數可以再添加一些邏輯，判斷一個變量是否是NaN,Infinity之類的特殊需求。

總結

1 typeOf能判斷出一個變量的類型，但是隻能判斷出number,string,function,boolean,undefined,null和其他對象類型返回結果都為object.

2 instanceof能判斷出一個對象是否是另一個類的實例。

3 Object.prototype.toString.call能判斷出所有變量的類型，返回值為[Object ***]。