快捷導(dǎo)航

JS疑惑的數(shù)據(jù)類型及類型判斷方法詳解

更新時間：2022年08月16日 15:37:42 作者：寒月十九

這篇文章主要為大家介紹了JS中疑惑的數(shù)據(jù)類型及類型判斷方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

關(guān)于javascript這門語言的數(shù)據(jù)類型你了解多少呢？你有什么方法能夠快速的判斷數(shù)據(jù)類型呢？如果可以那如何實現(xiàn)類型轉(zhuǎn)換呢？帶著這三個問題開始我們今天的學(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é)出一個規(guī)律： typeof方法可以準確判斷出除了Null之外的所有的基本數(shù)據(jù)類型（注：typeof null // "object" 是javascript這門語言的歷史遺留問題，需要記憶），其他六種基本數(shù)據(jù)類型都能準確判斷，所以我們可以用（typeof 變量 === “undefined”）來判斷一個變量是否被聲明；但是在判斷引用類型時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()方法可以準確判斷所有的基本數(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]"--正則表達式
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屬性和正則嚴格意義上也不算數(shù)據(jù)類型，因為可以識別出，所以也放在例子里）。

小插曲

如何使用上述的兩種方法優(yōu)雅的封裝一個方法，使得我們可以傳入任意數(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) =&gt; {
    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)換為小寫。）

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

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

三、Array.isArray()

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

四、obj instanceof Object

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

[1,2] instanceof Array  // true
(function(){}) instanceof Function // true
({a:1}) instanceof Object // true
(new Date) instanceof Date // true
實現(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)置對象。