JS疑惑的資料型別及型別判斷方法詳解

2022-08-16 18:03:54

前言

關於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) =&gt; {
    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方法也可以判斷內建物件。