js判断数据类型常用的6种方法

野性酷女 2023-03-04 10:27 14阅读 0赞

js判断数据类型常用的方法,不论在开发中开始在面试中,都是经常遇到的问题,尤其是在面试时,当面试官问及js判断数据类型的方法时,回答的越多,说明掌握的广度跟深度越多,感觉自己逼格也越高.废话不多说了,进入正题

1.  面试常问，基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。
2.  引用数据类型(Object类)有常规名值对的无序**对象**\{a:1\}，**数组**\[1,2,3\]，以及**函数**等。

常见的判断js数据类型的方法有如下几种

**1.最常见的判断方法：typeof**

**2.已知对象类型:   instanceof **

**3.对象原型链判断方法： prototype 通用但很繁琐**

**4.根据对象的构造器constructor进行判断**

**5.jQuery方法： jquery.type()**

**6.严格运算符:   ===**

下面依次说下每个方法的写法跟结果

### 一.typeof ###

***其中typeof返回的类型都是字符串形式，需注意!!!!!***

用于判断数据类型，返回值为6个字符串，分别为string、Boolean、number、function、object、undefined。

var a = [34,4,3,54],
            b = 34,
            c = 'adsfas',
            d = function(){ console.log('我是函数')},
            e = true,
            f = null,
            g;
    
            console.log(typeof(a));//object
            console.log(typeof(b));//number
            console.log(typeof(c));//string
            console.log(typeof(d));//function
            console.log(typeof(e));//boolean
            console.log(typeof(f));//object
            console.log(typeof(g));//undefined

但是你可能会发现，typeof在判断null、array、object以及函数实例（new + 函数）时，得到的都是object。这使得在判断这些数据类型的时候，得不到真是的数据类型。由此引出instanceof。

### 二.instance of ###

*注意：instanceof 后面一定要是**对象类型**，并且大小写不能错。*

[1,2,3] instanceof Array                -------->true
    new Date() instanceof Date              -------->true
    new Function() instanceof Function      -------->true
    new Function() instanceof function      -------->false
    null instanceof Object                  -------->false

### **三.对象原型链判断方法：** Object.prototype.toString.call() ###

*适用于所有类型的判断检测,注意区分大小写. toString方法,在Object原型上返回数据格式,*

console.log(Object.prototype.toString.call("123"))           -------->[object String]
     console.log(Object.prototype.toString.call(123))             -------->[object Number]
     console.log(Object.prototype.toString.call(true))            -------->[object Boolean]
     console.log(Object.prototype.toString.call([1, 2, 3]))       -------->[object Array]
     console.log(Object.prototype.toString.call(null))            -------->[object Null]
     console.log(Object.prototype.toString.call(undefined))       -------->[object Undefined]
     console.log(Object.prototype.toString.call({ name: 'Hello'})) -------->[object Object]
     console.log(Object.prototype.toString.call(function () { }))  -------->[object Function]
     console.log(Object.prototype.toString.call(new Date()))      -------->[object Date]
     console.log(Object.prototype.toString.call(/\d/))            -------->[object RegExp]
     console.log(Object.prototype.toString.call(Symbol()))        -------->[object Symbol]

### 四.根据对象的constructor进行判断 ###

constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型

*注意:*

*1.null和undefined没有constructor;*

*2.判断数字时使用(),比如  (123).constructor,如果写成123.constructor会报错*

*3.constructor在类继承时会出错,因为Object被覆盖掉了,检测结果就不对了*

//注意当出现继承的时候,使用constructor会出现问题
        function A() { };
     
        function B() { };
        A.prototype = new B(); //A继承自B
        console.log(A.constructor === B)  -------->false
        var C = new A();
        //现在开始判断C是否跟A的构造器一样
        console.log(C.constructor === B)  -------->true
        console.log(C.constructor === A)  -------->false 
        //解决这种情况,通常是手动调整对象的constructor指向
        C.constructor = A; //将自己的类赋值给对象的constructor属性
        console.log(C.constructor === A);  -------->true
        console.log(C.constructor === B);  -------->false

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NsYXJhX0c_size_16_color_FFFFFF_t_70][]

### **五.jQuery方法： jquery.type()** ###

*据说是无敌万能的方法.如果对象是null跟undefined,直接返回"null"和"undefined",*

*注意:在使用时,一定要引入jquery文件,不然会报错,jQuery is not defined*

console.log(jQuery.type(undefined) === "undefined")           -------->true
        console.log(jQuery.type() === "undefined");                   -------->true
        console.log(jQuery.type(window.notDefined) === "undefined")   -------->true
        console.log(jQuery.type(123) === "number")                    -------->true
        console.log(jQuery.type('123') === "string")                  -------->true
        console.log(jQuery.type([]) === "array")                      -------->true
        console.log(jQuery.type(true) === "boolean")                  -------->true
        console.log(jQuery.type(function(){ }) === "function")         -------->rue
        console.log(jQuery.type(new Date()) === "date")               -------->true
        console.log(jQuery.type(/\d/) === "regexp")                   -------->true
        console.log(jQuery.type(new Error()) === "error")         -------->true jq版本高于1.9.3
        console.log(jQuery.type({ name:'Hello'}) === "object")         ------->true
        console.log(jQuery.type(Symbol()) === "symbol")                ------->true
                                                               ------->其余对象类型一般返回object

### 六.有局限的判断:严格运算符=== ###

通常===出现在我们的条件判断中,比如判断一个变量是否为空,变量是否为数据等,示例如下

var a = null;
    typeof a //object
    a === null  //true
     
    /*扩展补充*/
     
    //判断一个非数组变量是否为空
    if(typeof a != 'undefined' && a ){ }
     
    //判断一个数组变量是否为空
    if (typeof a != “undefined” && a && a.length > 0) { }

总之:

一般变量用typeof,

已知对象类型用instanceof,

通用方法Object.prototype.toString.call()

jQuery项目万能方法jQuery.type()

欢迎大家批评指正

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NsYXJhX0c_size_16_color_FFFFFF_t_70]: /images/20230208/16e9a8389f824f8b951571306e618f1c.png