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

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

作者: 老鼠AI大米_Java全栈 | 来源:发表于2018-11-16 20:46 被阅读12次

    参考https://www.pandashen.com/2017/06/30/20170630162209/,做了好几年前端,都是使用插件判断,还没有自己写过,看了这篇文章感觉还不错。
    本篇主要对 JavaScript 数据类型检测做一些介绍,并封装一个相对靠谱的数据类型检测模块。

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

    1、typeof

    typeof 可以满足大部分基本数据类型的检测,如 number、string、boolean、undefined 和 symbol,对于 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 的对象,上面对应着检测不同类型的方法,每个方法的参数都为被检测数据,返回值都为布尔值。
    checkTypes.js

    (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
    

    相关文章

      网友评论

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

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