這是一個高頻面試題，我們開發中也進程會遇到，今天我們來實現一個函數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之類的特殊需求。
總結
-
typeOf能判斷出一個變量的類型，但是隻能判斷出number,string,function,boolean,undefined,null和其他對象類型返回結果都爲object. -
instanceof能判斷出一個對象是否是另一個類的實例。 -
Object.prototype.toString.call能判斷出所有變量的類型，返回值爲[Object ***]。
學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。
個人公衆號：
