前言

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

typeof是否能正確判斷類(lèi)型？

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

由于由于歷史原因，在判斷原始類(lèi)型時(shí)，typeof null會(huì)等于object。而且對(duì)于對(duì)象（Object）、數(shù)組（Array）來(lái)說(shuō)，都會(huì)轉(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ù)類(lèi)型，但是難以判斷除了函數(shù)以外的復(fù)雜數(shù)據(jù)類(lèi)型。于是我們可以使用第二種方法，通常用來(lái)判斷復(fù)雜數(shù)據(jù)類(lèi)型，也可以用來(lái)判斷基本數(shù)據(jù)類(lèi)型。

對(duì)于返回值為object，有三種情況：

• 值為null
• 值為object
• 值為array

對(duì)于null，我們可以直接用===來(lái)進(jìn)行判斷，那么數(shù)組和對(duì)象呢？不急，我們接著說(shuō)。

instanceof是否能正確判斷類(lèi)型？

instanceof 是用來(lái)判斷 A 是否為 B 的實(shí)例，表達(dá)式為：A instanceof B，如果 A 是 B 的實(shí)例，則返回 true,否則返回 false。

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

    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

單獨(dú)使用instanceof好像也是不行的，但是我們對(duì)于typeof已經(jīng)得出結(jié)論，不能區(qū)分?jǐn)?shù)組和對(duì)象，那么，我們結(jié)合下instanceof，來(lái)寫(xiě)一個(gè)完整的判斷邏輯

    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()

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

每個(gè)對(duì)象都有一個(gè)toString()方法，當(dāng)要將對(duì)象表示為文本值或以預(yù)期字符串的方式引用對(duì)象時(shí)，會(huì)自動(dòng)調(diào)用該方法。默認(rèn)情況下，從Object派生的每個(gè)對(duì)象都會(huì)繼承toString()方法。如果此方法未在自定義對(duì)象中被覆蓋，則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]

所以綜合上述知識(shí)點(diǎn)，我們可以封裝出以下通用類(lèi)型判斷方法：

    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檢測(cè)Object與instanceof不一樣,constructor還可以處理基本數(shù)據(jù)類(lèi)型的檢測(cè),不僅僅是對(duì)象類(lèi)型。

注意:

1.null和undefined沒(méi)有constructor;

2.判斷數(shù)字時(shí)使用(),比如  (123).constructor,如果寫(xiě)成123.constructor會(huì)報(bào)錯(cuò)

3.constructor在類(lèi)繼承時(shí)會(huì)出錯(cuò),因?yàn)镺bject被覆蓋掉了,檢測(cè)結(jié)果就不對(duì)了

    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() 用于確定傳遞的值是否是一個(gè) Array。如果對(duì)象是 Array ，則返回true，否則為false。

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

正則判斷

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

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

總結(jié)

到此這篇關(guān)于JS中數(shù)據(jù)類(lèi)型的正確判斷方法的文章就介紹到這了,更多相關(guān)JS數(shù)據(jù)類(lèi)型判斷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

到此這篇關(guān)于JS中數(shù)據(jù)類(lèi)型的正確判斷方法的文章就介紹到這了,更多相關(guān)JS數(shù)據(jù)類(lèi)型判斷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論