快捷導(dǎo)航

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

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

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

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

判斷類型常用的方法

typeof

js內(nèi)置的一個(gè)運(yùn)算符，返回一個(gè)字符串，表示操作數(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，無法細(xì)分；其中值得注意的是typeof null結(jié)果也是object。這是因?yàn)樵趈s的最初實(shí)現(xiàn)中，js中的值是由一個(gè)表示類型的標(biāo)簽以及實(shí)際數(shù)據(jù)值組合表示的。對象類型的標(biāo)簽是0，我們都知道null表示空，在大多數(shù)平臺下其值為0x00，因此對象和null的類型標(biāo)簽是一樣的。類型標(biāo)簽一樣，但是null卻沒有正常對象的屬性以及方法。

instanceof

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

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

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

toString

每一個(gè)對象都有一個(gè)toString()方法，因?yàn)槊總€(gè)對象都會繼承自Object?？赡茉诖蠖鄶?shù)人的印象中，toString()只是用來返回一個(gè)字符串，并沒有什么特別的地方，那是因?yàn)槟憧吹降?code>toString()基本上都是被重寫后的，原始的toString()是可以用來獲取對象的類型的。

舉個(gè)例子：

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

每個(gè)對象都能通過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還是有點(diǎn)麻煩，所以我們還是封裝一個(gè)函數(shù)getType

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

typeof + instanceof（不推薦）

之前我們也提到了typeof可以獲取部分?jǐn)?shù)據(jù)類型，instanceof可以用枚舉來表示剩下的類型，那么這兩者結(jié)合是不是就可以實(shí)現(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

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

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

toString

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

function getType(obj) {
    const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type]，需要提取出type的值
    const firstSpaceIndex = originType.indexOf(' '); // 找到第一個(gè)空格所在下標(biāo)
    const type = originType.slice(firstSpaceIndex + 1, -1); // 跳過空格，截取到倒數(shù)第一個(gè)字符（不含最后一個(gè)）
    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

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

function getType(obj) {
    const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type]，需要提取出type的值
    const tmpType = originType.split(' ')[1]; // 根據(jù)空格分割，并取第二個(gè)
    const type = tmpType.slice(0, -1); // 從0截取到倒數(shù)第一個(gè)字符（不含最后一個(gè)）
    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

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