美文网首页web前端开发
简单封装一个靠谱的检测数据类型模块

简单封装一个靠谱的检测数据类型模块

作者: PandaShen | 来源:发表于2018-10-12 01:01 被阅读18次

    原文出自:https://www.pandashen.com

    简介

    本篇主要对 JavaScript 数据类型检测做一些介绍,并封装一个相对靠谱的数据类型检测模块。

    常见检测数据类型的三种方式

    1、typeof

    typeof 可以满足大部分基本数据类型的检测,如 numberstringbooleanundefinedsymbol,对于 null 使用 typeof 则会直接返回 object,对于引用类型的检测,只有 function 是可以正确返回的,其他都返回 object,可以看出 typeof 只适用于部分场景,并不是那么的靠谱。

    2、instanceof

    instanceof 本质是用来检测一个对象是不是一个构造函数的实例,因为基本数据类型是基本包装类,已经不是对象了,所以 instanceof 是用不适合检测基本数据类型,instanceof 也有一个缺点,用 instanceof 检测一个对象原型链上的其他原型对象对应的构造函数时,也返回 true,所以说 instanceof 也不能保证绝对的准确。

    3、Object.prototype.toString.call

    Object.prototype.toString.call 在我们传入数据的时候,可以 [object Object] 的形式精准的返回给我们当前的数据类型,如 [object Array] 等等,我们本次要封装的类型检测工具就是基于这个方法。

    封装检测类型模块

    最终在全局会产生一个 checkTypes 的对象,上面对应着检测不同类型的方法,每个方法的参数都为被检测数据,返回值都为布尔值。

    // 检测类型模块
    (function() {
        // 存储检测数据类型方法的对象
        var checkTypesFun = {};
    
        // 涉及到的数据类型
        var types = [
            "String",
            "Number",
            "Boolean",
            "Undefined",
            "Null",
            "Symbol",
            "Function",
            "Array",
            "Object",
            "RegExp"
        ];
    
        // 通过闭包返回检测单个类型的函数
        function isType(type) {
            return function(content) {
                var result = Object.prototype.toString.call(content).replace(/\[object\s|\]/g, "");
                return type === result;
            };
        }
    
        types.forEach(function(type) {
            // 构建检测不同类型的方法,返回布尔值
            checkTypesFun["is" + type] = isType(type);
        });
    
        // 将检测类型模块暴露在全局
        window.checkTypes = checkTypesFun;
    })();
    

    使用方法

    上面代码是自执行函数,执行后会将 checkTypes 对象暴露在全局,可以直接使用。

    // 使用模块
    checkTypes.isString("123"); // true
    checkTypes.isNumber("123"); // false
    checkTypes.isArray([1, 2, 3]); // true
    checkTypes.isRegExp(/^[0-9]$/); // true
    checkTypes.isObject({}); // true
    

    可以使用 console.log(checkTypes) 查看所有的方法。

    相关文章

      网友评论

        本文标题:简单封装一个靠谱的检测数据类型模块

        本文链接:https://www.haomeiwen.com/subject/ocfwaftx.html