JS疑惑的數據類型及類型判斷方法詳解

Posted on by

前言

關於javascript這門語言的數據類型你瞭解多少呢？你有什麼方法能夠快速的判斷數據類型呢？如果可以那如何實現類型轉換呢？帶著這三個問題開始我們今天的學習吧

數據類型

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

基本數據類型有：

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

引用數據類型有：

  • Object（對象）
  • Array（數組）
  • Function（函數）
  • Date等（內置對象）

類型判斷

一、typeof方法

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

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

二、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()方法可以準確判斷所有的基本數據類型，那麼對引用數據類型呢？

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]"

所以Object.prototype.toString.call()方法可以識別出javascript這門語言中所有的數據類型（據我所知，上述例子中Math屬性和正則嚴格意義上也不算數據類型，因為可以識別出，所以也放在例子裡）。

小插曲

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

方法一:

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
}

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

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

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

三、Array.isArray()

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

四、obj instanceof Object

左邊放你要判斷的內容，右邊放類型來進行JS類型判斷，隻能用來判斷復雜數據類型,因為instanceof 是用於檢測構造函數（右邊）的 prototype 屬性是否出現在某個實例對象（左邊）的原型鏈上。

[1,2] instanceof Array  // true
(function(){}) instanceof Function // true
({a:1}) instanceof Object // true
(new Date) instanceof Date // true
實現原理：
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方法也可以判斷內置對象。

結語

以上就是本期的所有內容，相信此時，判斷javascript中的數據類型已經沒有什麼可以難倒你瞭，當然判斷數據類型的方法不僅這些，但是以上的幾種方法（應該）可以解決所有的數據類型判斷的問題。

以上就是JS疑惑的數據類型及類型判斷方法詳解的詳細內容，更多關於JS數據類型判斷的資料請關註WalkonNet其它相關文章！

推薦閱讀：