最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS 检测对象类型

    正文概述 掘金(咸肉)   2021-06-18   338

    判断对象类型(原始、复杂),一般有四种方法:

    • typeof
    • instanceof
    • constructor
    • Object.prototype.toString.call()

    需注意:检测的完整性,依次递增,推荐使用最后一种 Object.prototype.toString.call

    一、typeof

    typeof 可以检测number、string、boolean、undefined,symbol和object、function七种数据类型

    • 一般用做区分基本数据类型
    • 无法区分对象和数组(typeof 判断对象和数组都返回object)
    typeof 0;  //number;
    typeof true;  //boolean;
    typeof undefined;  //undefined;
    typeof "hello world"   //string;
    typeof function(){};   //function;
    
    typeof null; //object
    typeof {};  //object;
    typeof []; //object
    
    let s = Symbol();
    typeof s    //"symbol"
    s instanceof Symbol  //false
    

    二、instanceof

    instanceof 运算符用于检测构造函数的 prototype 属性是否存在于某个实例对象的原型链上。

    • 一般用来判断数组和对象
    var o = { };
    var a = ['reg','blue'];
    
    o instanceof Object; // true
    o instanceof Array;  // false
    
    a instanceof Array;   // true
    a instanceof Object; // true
    
    • 不能区分基本类型 string 和 boolean,除非是字符串对象和布尔对象
    var c = 'abc';
    c instanceof String; //false
    
    var d = new String();
    d instanceof String  //true
    
    • new实例 改变函数的 prototype 时,情况有点特殊
    // 定义构造函数
    function C(){}
    
    var o = new C();
    o instanceof C; // true,因为 Object.getPrototypeOf(o) === C.prototype
    
    C.prototype = {};  // 改变构造函数的prototype
    
    var o2 = new C();
    o2 instanceof C; // true
    o instanceof C;  // false,C.prototype被重写,但是 o 的原型对象指向的是之前的原型对象
    

    三、constructor

    • 除了 undefined 和 null,其他类型的变量均能使用 constructor 判断出类型
    var o={};
    o.constructor == Object  //true
    
    var arr = [];
    arr.constructor == Array  //true
    arr.constructor == Object //false
    
    var n = true;
    n.constructor == Boolean  //true
    
    var num1 = 1;
    var num2 = new Number();
    num1.constructor == Number   //true
    num2.constructor == Number  //true
    
    var str = 'hello world';
    str.constructor == String     //true
    
    • 不过要注意,constructor属性是可以被修改的,会导致检测出的结果不正确
    function Person(){ }
    function Student(){ }
    
    Student.prototype = new Person();
    
    var John = new Student();
    John.constructor == Student; // false
    John.constructor == Person; // true
    

    四、Object.prototype.toString.call() (推荐)

    推荐使用该方法,检测的类型很全面哦

    Object.prototype.toString.call(null)  //"[object Null]"
    
    Object.prototype.toString.call(undefined)  //"[object Undefined]"
    
    Object.prototype.toString.call(123)   //"[object Number]"
    
    Object.prototype.toString.call('str')  //"[object String]"
    
    Object.prototype.toString.call(true)  //"[object Boolean]"
    
    Object.prototype.toString.call({})  //"[object Object]"
    
    Object.prototype.toString.call([])  //"[object Array]"
    

    判断数据类型,以数组、对象为例:

    function typeObj(obj){
        if(type=='[object Array]'){
            return 'Array';
        }elseif(type=='[object Object]'){
            return 'Object';
        }
    }
    

    上面的方法也可以封装成如下这种

    function type(obj) {
        return Object.prototype.toString.call(obj).replace(/\[object\s/g, "");
    }
    
    function isArray(list) {
        return type(list) === "Array";
    }
    
    function isObject(obj) {
        return type(obj) === "Object";
    }
    
    function isString(str) {
        return type(str) === "String";
    }
    

    起源地下载网 » JS 检测对象类型

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元