• 总结js的几种数据类型检测方法


    在此总结自己常用的几种js判断数据类型的方法。
    定义几个变量备用:

    let a="string";
    let b=111;
    let c={};
    let d=[1,2,3];
    let e=function () {
        console.log("eee");
    }
    let f = undefined;
    let g = null;
    let h = new Date();
    let i = /test/;
    let j = true;
    

    1. typeof

    console.log(typeof a);//string
    console.log(typeof b);//number
    console.log(typeof c);//object
    console.log(typeof d);//object
    console.log(typeof e);//function
    console.log(typeof f);//undefined
    console.log(typeof g);//object
    console.log(typeof h);//object
    console.log(typeof i);//object
    console.log(typeof j);//boolean
    
    1. typeof可以检测出的数据类型为:
      string、
      number、
      function、
      undefined、
      boolean
    2. typeof 不能判断出object中的对象、数组等方法。typeof null也为object
    3. 此方法的返回值都是字符串数据类型。
      console.log(typeof b=="number");//true
      console.log(typeof (typeof b));//string

    2. instanceof

    instanceof 检测对象数据类型(js中一切接对象) 表示当左侧为右侧的实例时返回true。

    console.log(a instanceof String);//false
    console.log(b instanceof Number);//false
    console.log(c instanceof Object);//true
    console.log(d instanceof Array);//true
    console.log(e instanceof Function);//true
    console.log(h instanceof Date);//true
    console.log(i instanceof RegExp);//true
    
    1. instanceof 表示当左侧为右侧的实例时返回true。所以 a 和 b 返回的是false。这是因为这里 a 和 b 为保存字符串和数字类型值得变量。不是他们的实例:
      let a=new String('string');
      let b=new Number(111);
      console.log(a instanceof String);//true
      console.log(b instanceof Number);//true
      这样通过new一个实例就为true了。
      举这个例子只是说明instanceof的使用,现实中通过instanceof检测string和number类型没有太大意义,一般不使用。
    2. 注意 instanceof 后对象类型的大小写。
    3. 此方法常用一些数据类型的判断中:
      if(d instanceof Array){//如果d为数组执行某方法
      console.log(d);
      }
      此方法有个问题:d不仅为Array的实例,也为Object的实例。
      console.log(c instanceof Object);//true
      console.log(d instanceof Object);//true
      console.log(e instanceof Object);//true
      所以此方法常用在判断中,只需要判断d是否为Array数据类型即可。

    3. constructor

    constructor 为实例原型上的方法,指向他的构造函数。

    console.log(c.constructor===Object);//true
    console.log(d.constructor===Array);//true
    console.log(e.constructor===Function);//true
    console.log(h.constructor=== Date);//true
    console.log(i.constructor=== RegExp);//true
    
    console.log(c.constructor===Object);//true
    console.log(d.constructor===Object);//false
    console.log(e.constructor===Object);//false
    console.log(h.constructor=== Object);//false
    console.log(i.constructor=== Object);//false
    

    cosntructor可以解决instanceof的部分问题,之所以说是部分问题是因为:

    function One() {}
    function Two() {}
    One.prototype = new Two();//此时将One构造函数的原型指向Two构造函数的一个实例。
    let obj = new One();
    
    console.log(obj.constructor === One);//false
    console.log(obj.constructor === Two);//true
    

    修改obj的原型为Two的实例,这时obj的constructor为Two。

    这是因为:已经将One构造函数的原型指向Two构造函数的实例。虽然obj为One构造函数的实例,但是它的原型已经为Two构造函数的实例,已经没有constructor方法,根据原型链会继续向上寻找。找到的是Two

    解决办法为重新手动赋值一下obj的constructor

    function One() {}
    function Two() {}
    One.prototype = new Two();
    let obj = new One();
    obj.constructor=One;
    
    console.log(obj.constructor === One);//true
    console.log(obj.constructor === Two);//false
    

    4. Object.prototype.toString.call()

    let a = "string";
    let b = 111;
    let c = {};
    let d = [1, 2, 3];
    let e = function () {
        console.log("eee");
    }
    let f = undefined;
    let g = null;
    let h = new Date();
    let i = /test/;
    let j = true;
    
    console.log(Object.prototype.toString.call(a) === '[object String]');//true
    console.log(Object.prototype.toString.call(b) === '[object Number]');//true
    console.log(Object.prototype.toString.call(c) === '[object Object]');//true
    console.log(Object.prototype.toString.call(d) === '[object Array]');//true
    console.log(Object.prototype.toString.call(e) === '[object Function]');//true
    console.log(Object.prototype.toString.call(f) === '[object Undefined]');//true
    console.log(Object.prototype.toString.call(g) === '[object Null]');//true
    console.log(Object.prototype.toString.call(h) === '[object Date]');//true
    console.log(Object.prototype.toString.call(i) === '[object RegExp]');//true
    
    console.log(Object.prototype.toString.call(c) === '[object Object]');//true
    console.log(Object.prototype.toString.call(d) === '[object Object]');//false
    console.log(Object.prototype.toString.call(e) === '[object Object]');//false
    

    虽然很长、很繁琐但是能够准确地判断数据类型了。

    5. jquery.type()

    jQuery.type( undefined ) === "undefined"
    jQuery.type() === "undefined"
    jQuery.type( null ) === "null"
    jQuery.type( true ) === "boolean"
    jQuery.type( 3 ) === "number"
    jQuery.type( "test" ) === "string"
    jQuery.type( function(){} ) === "function"
    jQuery.type( [] ) === "array"
    jQuery.type( new Date() ) === "date"
    jQuery.type( /test/ ) === "regexp"
  • 相关阅读:
    其他权益工具
    2股缩为1股
    ubuntu查看网络流量
    修改iphone hosts文件
    Win10 家庭中文版HOST文件更改
    债权投资和其他债权投资的区别
    win10 Administrator没有管理员权限解决方案
    实际发放股票股利
    Could not get lock /var/lib/dpkg/lock
    R语言代写Gibbs抽样的贝叶斯简单线性回归仿真分析
  • 原文地址:https://www.cnblogs.com/chenhuichao/p/13529360.html
Copyright © 2020-2023  润新知