检测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)
}
           

微信公众号同步更新，不定时更新前端知识点，督促自己和大家不断进步！

喜欢的话，随手关注一下微信公众号吧，不定时更新前端小技巧哦！！