快捷導航

詳解JavaScript如何準確獲取任意變量的數(shù)據(jù)類型

更新時間：2022年06月27日 09:20:29 作者：諸葛小愚

js是弱類型語言，或者說是動態(tài)語言，在定義變量時我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準確獲取任意變量的數(shù)據(jù)類型，需要的可以參考一下

js是弱類型語言，或者說是動態(tài)語言，在定義變量時我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。變量的類型會在程序運行的過程中被確定。對于開發(fā)者來說，雖然可以不用頻繁的定義不同的數(shù)據(jù)類型，但是如果是比較復(fù)雜的項目，或者接手他人的項目，發(fā)現(xiàn)一個變量到處被使用并且賦予不同類型的值，也許頭都大了。變量類型的不確定還可能出現(xiàn)運行時報錯：xxx is not a function，根本原因就是不同的數(shù)據(jù)類型所具有的方法是不一樣的，也許有的大家都有，因此不報錯；但是如果是特有的，或者有差異的，不判斷變量的類型就直接調(diào)用，就有可能出現(xiàn)生產(chǎn)bug。那么應(yīng)該如何才能獲取準確的變量類型呢？

判斷類型常用的方法

typeof

js內(nèi)置的一個運算符，返回一個字符串，表示操作數(shù)的類型?？捎糜趎umber、string、boolean等值類型，function函數(shù)，object等引用類型，如果是判斷對象類型，則只能得到object，無法得到具體的值。

console.log(typeof ''); // string
console.log(typeof (() => {})); // function
console.log(typeof Symbol()); // symbol
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof {}); // object

我們可以看到，數(shù)組、對象通過typeof都是返回了object，無法細分；其中值得注意的是typeof null結(jié)果也是object。這是因為在js的最初實現(xiàn)中，js中的值是由一個表示類型的標簽以及實際數(shù)據(jù)值組合表示的。對象類型的標簽是0，我們都知道null表示空，在大多數(shù)平臺下其值為0x00，因此對象和null的類型標簽是一樣的。類型標簽一樣，但是null卻沒有正常對象的屬性以及方法。

instanceof

instanceof也是js內(nèi)置的一個運算符，用于判斷兩個參數(shù)之間是否存在聯(lián)系，實現(xiàn)原理是檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上。如果是，則返回true；否則，返回false。

console.log({} instanceof Array); // false
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log([] instanceof Object); // true

instanceof是判斷兩個參數(shù)，并不會直接獲取變量的類型，可以通過枚舉的方式簡介獲取。

toString

每一個對象都有一個toString()方法，因為每個對象都會繼承自Object。可能在大多數(shù)人的印象中，toString()只是用來返回一個字符串，并沒有什么特別的地方，那是因為你看到的toString()基本上都是被重寫后的，原始的toString()是可以用來獲取對象的類型的。

舉個例子：

const o = new Object();
o.toString(); // [object Object]
const arr = [1,2,3]; // 數(shù)組也會繼承自O(shè)bject
arr.toString(); // '1,2,3'，因為數(shù)組重寫了toString

每個對象都能通過Object.prototype.toString.call(thisArg)或者Object.prototype.toString.apply(thisArg)來獲取其類型：

console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(() => {})); // [object Function]

每次都調(diào)用js內(nèi)置的API還是有點麻煩，所以我們還是封裝一個函數(shù)getType

封裝一個獲取類型的函數(shù)

typeof + instanceof（不推薦）

之前我們也提到了typeof可以獲取部分數(shù)據(jù)類型，instanceof可以用枚舉來表示剩下的類型，那么這兩者結(jié)合是不是就可以實現(xiàn)getType了呢？

function getType(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) return 'array';
        if (obj instanceof Map) return 'map';
        if (obj instanceof Set) return 'set';
        if (obj instanceof RegExp) return 'regexp';
        // 盡可能枚舉類型，最后兜底返回object
        return 'object'
    }
    return (typeof obj);
}
console.log(getType(null)); // object
console.log(getType(undefined)); // undefined
console.log(getType('')); // string
console.log(getType([])); // array
console.log(getType(/a/)); // regexp
console.log(getType(new WeakMap())); // object
console.log(getType(new WeakSet())); // object

使用此方式雖然可以實現(xiàn)getType，但是存在弊端；

由于是枚舉，導致代碼長度可能會很長
枚舉的數(shù)據(jù)類型可能有限，未能覆蓋常用數(shù)據(jù)類型
如果要新增類型，則需要修改代碼

toString

關(guān)于toString()的用法剛剛已經(jīng)說了，我們以此來實現(xiàn)一個getType

function getType(obj) {
    const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type]，需要提取出type的值
    const firstSpaceIndex = originType.indexOf(' '); // 找到第一個空格所在下標
    const type = originType.slice(firstSpaceIndex + 1, -1); // 跳過空格，截取到倒數(shù)第一個字符（不含最后一個）
    return type.toLowerCase(); // 轉(zhuǎn)換為小寫
}
console.log(getType(null)); // null
console.log(getType(undefined)); // undefined
console.log(getType('')); // string
console.log(getType([])); // array
console.log(getType(/a/)); // regexp
console.log(getType(new WeakMap())); // weakmap
console.log(getType(new WeakSet())); // weakset

實現(xiàn)getType我們也可以借助于操作數(shù)組的方式：

function getType(obj) {
    const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type]，需要提取出type的值
    const tmpType = originType.split(' ')[1]; // 根據(jù)空格分割，并取第二個
    const type = tmpType.slice(0, -1); // 從0截取到倒數(shù)第一個字符（不含最后一個）
    return type.toLowerCase(); // 轉(zhuǎn)換為小寫
}
console.log(getType(null)); // null
console.log(getType(undefined)); // undefined
console.log(getType('')); // string
console.log(getType([])); // array
console.log(getType(/a/)); // regexp
console.log(getType(new WeakMap())); // weakmap
console.log(getType(new WeakSet())); // weakset

兩者實現(xiàn)結(jié)果是一致的，基本上實現(xiàn)了我們的既定目標，而且可以獲取到所有的數(shù)據(jù)類型。不同的是，操作數(shù)組比直接操作字符串更消耗性能。