• js检测数据类型四种办法


    1.typeof

    console.log(typeof "");            // String
    console.log(typeof 1);             // number
    console.log(typeof true);          // boolean
    console.log(typeof null);          // object
    console.log(typeof undefined);     // undefined
    console.log(typeof []);            // object
    console.log(typeof function(){});  // function
    console.log(typeof {});            // object

    可以看到,typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的。
    2.instanceof

    console.log("1" instanceof String);               //false
    console.log(1 instanceof Number);                 //false
    console.log(true instanceof Boolean);             //false
    // console.log(null instanceof Null);             //Null is not defined            
    //console.log(undefined instanceof Undefined);    //Undefined is not defined
    console.log([] instanceof Array);                //true
    console.log(function(){} instanceof Function);   //true
    console.log({} instanceof Object);               //true

    可以看到前三个都是以对象字面量创建的基本数据类型,但是却不是所属类的实例,这个就有点怪了。后面三个是引用数据类型,可以得到正确的结果。如果我们通过new关键字去创建基本数据类型,你会发现,这时就会输出true,如下:

    console.log(new String("1") instanceof String);       // true
    console.log(new Number(1) instanceof Number);         //true
    console.log(new Boolean(true) instanceof Boolean);   //true

    接下再来说说为什么null和undefined为什么比较特殊,实际上按理来说,null的所属类就是Null,undefined就是Undefined,但事实并非如此:控制台输出如下结果:

    l浏览器压根不认识这两货,直接报错。在第一个例子你可能已经发现了,typeof null的结果是object,typeof undefined的结果是undefined

    尤其是null,其实这是js设计的一个败笔,早期准备更改null的类型为null,由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题,就没有更改过来,于是一直遗留到现在。作为学习者,我们只需要记住就好。

    3.constructor

    console.log(("1").constructor === String);   //true
    console.log((1).constructor === Number);  //true
    console.log((true).constructor === Boolean); //true
    //console.log((null).constructor === Null);  //VM471:1 Uncaught TypeError: Cannot read property 'constructor' of null at <anonymous>:1:20
    //console.log((undefined).constructor === Undefined);//VM503:2 Uncaught TypeError: Cannot read property 'constructor' of undefined at <anonymous>:2:25
    console.log(([]).constructor === Array); //true
    console.log((function() {}).constructor === Function); //true
    console.log(({}).constructor === Object); //true

    (这里依然抛开null和undefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么:

    function Fn(){};
    Fn.prototype=new Array();
    var f=new Fn();
    console.log(f.constructor===Fn);      //false
    console.log(f.constructor===Array);   //true

    我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。

    看到这里,是不是觉得绝望了。没关系,终极解决办法就是第四种办法,看过jQuery源码的人都知道,jQuery实际上就是采用这个方法进行数据类型检测的。

    4.Object.prototype.toString.call()

    var a = Object.prototype.toString;
    
    console.log(a.call("aaa"));         //[object String]
    console.log(a.call(1));             //[object Number]
    console.log(a.call(true));          //[object Boolean]
    console.log(a.call(null));          //[object Null]
    console.log(a.call(undefined));    //[object Undefined]
    console.log(a.call([]));       //[object Array]
    console.log(a.call(function() {})); //[object Function]
    console.log(a.call({}));            //[object Object]

    可以看到,所有的数据类型,这个办法都可以判断出来。那就有人质疑了,假如我把他的原型改动一下呢?如你所愿,我们看一下:

    function Fn(){};
    Fn.prototype=new Array();
    Object.prototype.toString.call(Fn)
    //"[object Function]"

    总结:typeof 适用于基本类型 

       constructor  、instanceof 不适用null和undefined

       Object.prototype.toString.call  适用于全部

  • 相关阅读:
    uva 10306
    系统学习Linux的11点建议
    SharePoint 2013 讨论板列表"Connect to Outlook" 不可用解决方案
    Java可视化编程,基于布局管理器的UI设计
    【JavaScript脚本编程技术详解-----(一)】
    一个百度程序员的创业故事
    HDU 4729 An Easy Problem for Elfness (主席树,树上第K大)
    Android SQLite Database Tutorial
    最优化方法在图像处理中的应用【4】
    [置顶] 编辑框Editext光标最后显示
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/15895827.html
Copyright © 2020-2023  润新知