js判断数据类型的方法

一、typeof方法

1、可以判断数据类型，它返回表示数据类型的字符串（返回结果只包括number,boolean,string,function,object,undefined）；

2、可以使用typeof判断变量是否存在（如if(typeof a!=“undefined”){…}）；

3、Typeof 运算符的问题是无论引用的对象是什么类型 它都返回object

<script>
    console.log(
        typeof 100, //"number"
        typeof 'abc', //"string"
        typeof false, //"boolean"
        typeof undefined, //"undefined"
        typeof null, //"object"
        typeof [1, 2, 3], //"object"
        typeof {
            a: 1,
            b: 2,
            c: 3
        }, //"object"
        typeof function() {
            console.log('aaa');
        }, //"function"
            )
</script>

运行结果

typeof.png

二、instanceof方法

一般用来检测引用数据类型，表达式为：A instanceof B，判断A是否是B的实例，如果 A 是 B 的实例，则返回 true,否则返回 false，由构造类型判断出数据类型

注意：instanceof主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，不太适合用于简单数据类型的检测

<script>
    console.log(
        100 instanceof Number, //false
        'dsfsf'
        instanceof String, //false
        false instanceof Boolean, //false
        undefined instanceof Object, //false
        null instanceof Object, //false
        [1, 2, 3] instanceof Array, //true
        {
            a: 1,
            b: 2,
            c: 3
        }
        instanceof Object, //true
        function() {
            console.log('aaa');
        }
        instanceof Function, //true
        /^[a-zA-Z]{5,20}$/
        instanceof RegExp, //true
    )
//注意： instanceof 后面一定要是对象类型，大小写不能写错，该方法适用于一些条件选择或分支
</script>

运行结果

instanceof.png

三、constructor方法

用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同则返回true，就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。

注意：undefined和null没有constructor属性，无法判断。

<script>
    var num = 123;
        var str = 'abcdef';
        var bool = true;
        var arr = [1, 2, 3, 4];
        var obj = {
            name: 'wenzi',
            age: 25
        };
        var fn = function() {
            console.log('this is function');
        }
        var und = undefined;
        var nul = null;
        var reg = /^[a-zA-Z]{5,20}$/;

        // undefined和null没有constructor属性
        console.log(
            num.constructor == Number, //true
            str.constructor == String, //true
            bool.constructor == Boolean, //true
            arr.constructor == Array, //true
            obj.constructor == Object, //true
            fn.constructor == Function, //true
            reg.constructor == RegExp, //true
        );
</script>

运行结果

constructor.png

四、Object.prototype.toString.call()方法

适用于所有类型的判断检测，检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。

使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。

<script>
    var toString = Object.prototype.toString;
        console.log(
            toString.call(123), //"[object Number]"
            toString.call('abcdef'), //"[object String]"
            toString.call(true), //"[object Boolean]"
            toString.call([1, 2, 3, 4]), //"[object Array]"
            toString.call({
                name: 'wenzi',
                age: 25
            }), //"[object Object]"
            toString.call(function() {
                console.log('this is function');
            }), //"[object Function]"
            toString.call(undefined), //"[object Undefined]"
            toString.call(null), //"[object Null]"
            toString.call(/^[a-zA-Z]{5,20}$/), //"[object RegExp]"
        )
</script>

运行结果

Object.prototype.toString .png

欢迎各位大佬批评指正！一起交流！