檢測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)
}
           

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

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