檢測js數據類型的方法總結

js中數據類型分爲兩大類，基礎類型和引用數據類型，主要有：

基本數據類型

• Number
• String
• Boolean
• Null
• Undefined
• Symbol

複雜數據類型

• Array
• Function
• Object

檢測js中的數據類型常用的方法有：

1. typeof
2. instanceof
3. Object.prototype.toString

對比一下這三種方法的優缺點：

---

typeof方法

typeof 5   // number  有效
typeof 'dsd'  // string  有效
typeof true   // boolean   有效
typeof undefined  // undefined  有效
typeof function(){}   // function 有效

typeof null   // object  無效
typeof []    // object   無效
typeof {}   // object    無效

從以上例子中可以看到：

• typeof 用來檢測基本數據類型，除了Null無效外，其他都能返回正確的結果；

• 但引用類型，除了function外，其他引用類型一律都返回object結果。

Note：這在需要對數據結構進行詳細劃分的時候就不適用，比如說你要明確區分數組和對象，然後進行處理的時候，typeof就完全達不到效果

好處： 檢測快捷方便

壞處：不能檢測更爲準確的數據類型，如Array、Object、Null

---

instanceof

MDN: 用於檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。

[] instanceof Array;        // true
{} instanceof Object;       // true
newDate() instanceof Date;  // true
 
function Person(){};
newPerson() instanceof Person;   // true
 
[] instanceof Object;            // true
newDate() instanceof Object;     // true
newPerson instanceof Object;     // true

由上面例子可以看出：

• instanceof確實可以檢測部分引用數據類型
• []是Array的實例，也是Object的實例

模擬instanceof的檢測過程

instanceof (A, B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        return true;  // A的內部屬性 __proto__ 指向 B 的原型對象
    }
    return false;
}

instanceof 只能用來判斷兩個對象是否屬於實例關係， 而不能判斷一個對象實例具體屬於哪種類型。

由此可見instanceof在有些場景下依然不能滿足檢測具體類型的需求。

---

toString

toString是Object的原型方法。調用該方法默認返回當前對象的[[class]]

這是一個內部屬性，其格式爲 [object Xxx] ，其中 Xxx 就是對象的類型。

Object.prototype.toString.call(5)  // "[object Number]"
Object.prototype.toString.call('str')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(undefined)  // "[object Undefined]"
Object.prototype.toString.call(null)  // "[object Null]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call([])  // "[object Array]"
Object.prototype.toString.call({})  // "[object Object]"

由上可見toString檢測各數據類型算非常準確了，基本上覆蓋了我們常用的數據類型

所以是判斷數據類型最常用的方法。

這裏利用toString寫一個檢測數據類型的方法

function checkDataType(value) {
    const typeObj = Object.prototype.toString.call(value)
    return typeObj.slice(8, -1)
}

微信公衆號同步更新，不定時更新前端知識點，督促自己和大家不斷進步！

喜歡的話，隨手關注一下微信公衆號吧，不定時更新前端小技巧哦！！