JS中數(shù)據(jù)類型的正確判斷方法實例

更新時間：2021年08月26日 14:24:46 作者：so丶簡單

怎么去判斷一個數(shù)據(jù)屬于哪個數(shù)據(jù)類型,這個是很常見的操作,我們一般都會想到typeof和instanceof這兩個常見的方法,但有時候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下

前言

Javascript是一門動態(tài)類型的語言，一個變量從聲明到最后使用，可能經(jīng)過了很多個函數(shù)，而數(shù)據(jù)類型也會發(fā)生改變，那么，對一個變量的數(shù)據(jù)類型判斷就顯得尤為重要。

typeof是否能正確判斷類型？

typeof 是一個操作符，其右側(cè)跟一個一元表達式，并返回這個表達式的數(shù)據(jù)類型。返回的結(jié)果用該類型的字符串(全小寫字母)形式表示，包括以下 7 種：number、boolean、symbol、string、object、undefined、function 等。

由于由于歷史原因，在判斷原始類型時，typeof null會等于object。而且對于對象（Object）、數(shù)組（Array）來說，都會轉(zhuǎn)換成object。例子如下：

    typeof 1 // 'number'
    typeof "1" // 'string'
    typeof null // 'object'
    typeof undefined // 'undefined'
    
    typeof [] // 'object'
    typeof {} // 'object'
    typeof function() {} // 'function'

所以我們可以發(fā)現(xiàn)，typeof可以判斷基本數(shù)據(jù)類型，但是難以判斷除了函數(shù)以外的復雜數(shù)據(jù)類型。于是我們可以使用第二種方法，通常用來判斷復雜數(shù)據(jù)類型，也可以用來判斷基本數(shù)據(jù)類型。

對于返回值為object，有三種情況：

值為null
值為object
值為array

對于null，我們可以直接用===來進行判斷，那么數(shù)組和對象呢？不急，我們接著說。

instanceof是否能正確判斷類型？

instanceof 是用來判斷 A 是否為 B 的實例，表達式為：A instanceof B，如果 A 是 B 的實例，則返回 true,否則返回 false。

instanceof是通過原型鏈來判斷的，但是對于對象來說，Array也會被轉(zhuǎn)換成Object，而且也不能區(qū)分基本類型string和boolean?？梢宰筮叿拍阋袛嗟膬?nèi)容，右邊放類型來進行JS類型判斷，只能用來判斷復雜數(shù)據(jù)類型,因為instanceof 是用于檢測構(gòu)造函數(shù)（右邊）的 prototype 屬性是否出現(xiàn)在某個實例對象（左邊）的原型鏈上。例如：

    function Func() {}
    const func = new Func()
    console.log(func instanceof Func) // true
    
    const obj = {}
    const arr = []
    obj instanceof Object // true
    arr instanceof Object // true
    arr instanceof Array // true
    
    const str = "abc"
    const str2 = new String("abc")
    str instanceof String // false
    str2 instanceof String // true

單獨使用instanceof好像也是不行的，但是我們對于typeof已經(jīng)得出結(jié)論，不能區(qū)分數(shù)組和對象，那么，我們結(jié)合下instanceof，來寫一個完整的判斷邏輯

    function myTypeof(data) {
        const type = typeof data
        if (data === null) {
            return 'null'
        }
        if (type !== 'object') {
            return type
        }
        if (data instanceof Array) {
            return 'array'
        }
        return 'object'
    }

Object.prototype.toString.call()

上面我們通過typeof和instanceof實現(xiàn)了一版類型判斷，那么是否有其他渠道，使我們的代碼更加簡潔嗎？答案就是使用Object.prototype.toString.call()。

每個對象都有一個toString()方法，當要將對象表示為文本值或以預期字符串的方式引用對象時，會自動調(diào)用該方法。默認情況下，從Object派生的每個對象都會繼承toString()方法。如果此方法未在自定義對象中被覆蓋，則toString()返回

    Object.prototype.toString.call(new Date()) // [object Date]
    Object.prototype.toString.call("1") // [object String]
    Object.prototype.toString.call(1) // [object Numer]
    Object.prototype.toString.call(undefined) // [object Undefined]
    Object.prototype.toString.call(null) // [object Null]

所以綜合上述知識點，我們可以封裝出以下通用類型判斷方法：

    function myTypeof(data) {
        var toString = Object.prototype.toString;
        var dataType = data instanceof Element ? "element" : toString.call(data).replace(/\[object\s(.+)\]/, "$1").toLowerCase()
        return dataType
    };

    myTypeof("a") // string
    myTypeof(1) // number
    myTypeof(window) // window
    myTypeof(document.querySelector("h1")) // element

constructor

constructor 判斷方法跟instanceof相似,但是constructor檢測Object與instanceof不一樣,constructor還可以處理基本數(shù)據(jù)類型的檢測,不僅僅是對象類型。

注意:

1.null和undefined沒有constructor;

2.判斷數(shù)字時使用(),比如 (123).constructor,如果寫成123.constructor會報錯

3.constructor在類繼承時會出錯,因為Object被覆蓋掉了,檢測結(jié)果就不對了

    function A() {};
    function B() {};
    A.prototype = new B();
    console.log(A.constructor === B)  // false

    var C = new A();
    console.log(C.constructor === B)  // true
    console.log(C.constructor === A)  // false 

    C.constructor = A;
    console.log(C.constructor === A);  // true
    console.log(C.constructor === B);  // false

Array.isArray()

Array.isArray() 用于確定傳遞的值是否是一個 Array。如果對象是 Array ，則返回true，否則為false。

    Array.isArray([1, 2, 3]); // true
    Array.isArray({foo: 123}); // false
    Array.isArray("foobar"); // false
    Array.isArray(undefined); // false

正則判斷

我們可以把對象和數(shù)組轉(zhuǎn)成一個字符串，這樣就可以做格式判斷，從而得到最終的類型。

    function myTypeof(data) {
        const str = JSON.stringify(data)
        if (/^{.*}$/.test(data)) {
            return 'object'
        }
        if (/^\[.*\]$/.test(data)) {
            return 'array'
        }
    }