前言

關(guān)于javascript這門語言的數(shù)據(jù)類型你了解多少呢？你有什么方法能夠快速的判斷數(shù)據(jù)類型呢？如果可以那如何實(shí)現(xiàn)類型轉(zhuǎn)換呢？帶著這三個(gè)問題開始我們今天的學(xué)習(xí)吧

數(shù)據(jù)類型

在javascript中數(shù)據(jù)類型我們一般分為基本數(shù)據(jù)類型（值類型） 和 引用數(shù)據(jù)類型（對象類型）；

基本數(shù)據(jù)類型有：

• number
• String
• boolean
• Null
• Undefined
• BigInt
• Symbol

引用數(shù)據(jù)類型有：

• Object（對象）
• Array（數(shù)組）
• Function（函數(shù)）
• Date等（內(nèi)置對象）

類型判斷

一、typeof方法

typeof 123 // "number" 
typeof 'a'  // "string"
typeof true  // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof 21n // "bigint"

通過以上這些例子我們可以總結(jié)出一個(gè)規(guī)律： typeof方法可以準(zhǔn)確判斷出除了Null之外的所有的基本數(shù)據(jù)類型（注：typeof null // "object" 是javascript這門語言的歷史遺留問題，需要記憶），其他六種基本數(shù)據(jù)類型都能準(zhǔn)確判斷，所以我們可以用（typeof 變量 === “undefined”）來判斷一個(gè)變量是否被聲明；但是在判斷引用類型時(shí)typeof智能判斷出函數(shù)類型，其他的引用類型都返回'object'。 所以我們通常會使用typeof方法來判斷基本數(shù)據(jù)類型。

二、Object.prototype.toString.call()方法

Object.prototype.toString.call()方法，它的返回值是"[ object , 類型]"（注：返回值前面是小寫字母，后面是大寫字母開頭的類型）

Object.prototype.toString.call(123) // "[object Number]"
Object.prototype.toString.call('abc') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(21n) // "[object BigInt]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(true) // "[object Boolean]

由此可見Object.prototype.toString.call()方法可以準(zhǔn)確判斷所有的基本數(shù)據(jù)類型，那么對引用數(shù)據(jù)類型呢？

Object.prototype.toString.call({a:1}) // "[object Object]"
Object.prototype.toString.call([1,2]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call(new Error()) // "[object Error]"
Object.prototype.toString.call(/a/g) // "[object RegExp]"--正則表達(dá)式
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call(JSON) // "[object JSON]"

所以O(shè)bject.prototype.toString.call()方法可以識別出javascript這門語言中所有的數(shù)據(jù)類型（據(jù)我所知，上述例子中Math屬性和正則嚴(yán)格意義上也不算數(shù)據(jù)類型，因?yàn)榭梢宰R別出，所以也放在例子里）。

小插曲

如何使用上述的兩種方法優(yōu)雅的封裝一個(gè)方法，使得我們可以傳入任意數(shù)據(jù)，直接返回它的數(shù)據(jù)類型（小寫字母的字符串）？

方法一:

function dataType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1)
    }

方法二：

let dataType = {}
['Boolean', 'Number', 'String', 'Array', 'Function', 'Date', 'RegExp', 'Object',
'Error', 'Undefined', 'Null'].map((item, index) => {
    dataType["[object" + item + "]"] = item.toLowerCase();
})
function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? dataTypeObject.prototype.toString.call(obj)] 
        || 'object' : typeof obj
}

我們一起來解讀一下方法二，首先我們先將數(shù)據(jù)類型的首字母都轉(zhuǎn)化為小寫字母，并在添加為我們創(chuàng)建的dataType對象的屬性（toLowerCase() 方法將字符串轉(zhuǎn)換為小寫。）

當(dāng)我們傳入一個(gè)數(shù)據(jù)時(shí)，首先用typeof去判斷是基本數(shù)據(jù)類型還是引用數(shù)據(jù)類型，因?yàn)閠ypeof null // "object"，所以我們的判定條件typeof obj === 'object' || typeof obj === 'function'，就把特殊的null當(dāng)做引用類型，使用Object.prototype.toString.call()方法也能識別出，實(shí)現(xiàn)我們想要的效果。

（在學(xué)習(xí)過程中我們盡可能多去復(fù)雜化問題，使得理解更加深刻，方法一實(shí)用性較大）

三、Array.isArray()

在數(shù)組身上有一種isArray方法可以判斷是否為數(shù)組類型數(shù)據(jù)，返回值是布爾類型（true || false）（在其他語言中arr2 = [1, 'abc', true]嚴(yán)格意義上不算數(shù)組，但是在javascript中屬于數(shù)組 ）

四、obj instanceof Object

左邊放你要判斷的內(nèi)容，右邊放類型來進(jìn)行JS類型判斷，只能用來判斷復(fù)雜數(shù)據(jù)類型,因?yàn)閕nstanceof 是用于檢測構(gòu)造函數(shù)（右邊）的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對象（左邊）的原型鏈上。

[1,2] instanceof Array  // true
(function(){}) instanceof Function // true
({a:1}) instanceof Object // true
(new Date) instanceof Date // true
實(shí)現(xiàn)原理：
function instance_of(L,R){
    let O = R.prototype
    let L = L.__proto__
    while(L !== null){
        if(L === O) return true
        L = L.__proto__
    }
    return false
}
obj instanceof Object方法也可以判斷內(nèi)置對象。

結(jié)語

以上就是本期的所有內(nèi)容，相信此時(shí)，判斷javascript中的數(shù)據(jù)類型已經(jīng)沒有什么可以難倒你了，當(dāng)然判斷數(shù)據(jù)類型的方法不僅這些，但是以上的幾種方法（應(yīng)該）可以解決所有的數(shù)據(jù)類型判斷的問題。

以上就是JS疑惑的數(shù)據(jù)類型及類型判斷方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JS數(shù)據(jù)類型判斷的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論