首页 > 代码库 > 原生JS-----论数据类型检测

原生JS-----论数据类型检测

常见的数据类型检测的方法:

一、最为基础的typeof

二、不可不知的instanceof

三、比instanceof更好的constructor

四、检测值或者表达式的结果是否为NaN

五、易用的jQuery函数isArray,isFunction

六、高大上的原型方法Object.prototype.toString


typeof基本数据类型的检测:

语法:typeof  被检测的内容  或者 typeof(要检测的内容)

范例:

<script>
    var num=2;
    console.log(typeof num);//string
</script>

基本解析:

  typeof是一个运算符,针对一个操作数(操作数可以是变量也可以是常量)进行运算,其返回值是一个字符串,返回值包括"number","string","boolean","undefined","object","function".

<script>
    var user;
var obj={
        user:‘‘HTML5学堂"
    }
    var h5course=function(){
         console.log("码农");      
    };
     console.log(tyopeof 234);
     console.log(tyopeof "html5");
     console.log(tyopeof true);
     console.log(tyopeof user);
     console.log(tyopeof obj);
     console.log(tyopeof h5course);
</script>

typeof的局限性:

  typeof的问题在于:针对对象类型数据,无法进行具体细化的检测。对于数组、正则、对象{}、null等数据,虽然均属于对象类型,但却各不相同,使用typeof进行检测时,均返回object

<script>
     console.log(tyopeof null);
     console.log(tyopeof {user:"html5"});
     console.log(tyopeoft [4,5]);
     console.log(tyopeof /\d{3}/);
</script>

不可不知的instanceof:

面对typeof的类型检测缺陷,可以使用instanceof来弥补

语法:要检测的内容 instanceof 类型

范例:

<script>
     console.log([4,5] instanceof Array);//true
     console.log(/\d{3}/  instanceof RegExp);//true
</script>

基本解析:

  instanceof能够用于数据类型的检测,但是仅限于引用数据类型,无法检测基本数据类型的值;检测的返回值内容是布尔值。此外,会受到原型链的影响,只要是在原型链上,返回值都是true

instanceof的局限性:

  局限一:不能够检测以“字面量”方式出现的基本数据类型

<script>
    var str=‘‘HTML5学堂";
    var str2=new String("码农");
     console.log(str instanceof String);//false
     console.log(str2 instanceof String);//true
</script>

  代码解析:str是使用字面量的方式创建的字符串,而str2是使用String对象实例化的字符串,检测str时返回值是false,而检测str2时返回值是true;

  局限性二:会检测该类所归属的原型链,只要在原型链当中能够找到,检测结果均为true,检测结果有可能会出现问题

<script>
    //范例一
    var str=new String("码农");
     console.log(str instanceof String);//true
     console.log(str instanceof Object);//true
    //范例二:
    var box=document.getElementsByTagName("body");
    console.log(box[0] instanceof HTMLBodyElement);
    console.log(box[0] instanceof Node);
    console.log(box[0] instanceof Object);
    //范例三
    var arr=[‘htnl5‘,‘码农‘];
    console.log(arr  instanceof Array);
    console.log(arr instanceof Object);
</script>

  代码解析:

    在此处如果不是很了解原型链可以换个角度来理解,例如:数组隶属于对象,对于这种归属,检测也是成功的

    范例一中的字符串,的确属于string类型,但是他是通过String构造函数实例化得到的,String本身是一个字符串对象,所以str也符合Object这个条件

    范例二中的body标签本身是一个对象,细化一些说是一个节点对象,在细化说一个body元素,所以三种检测均为true,范例三中的数组同理(数组属于对象的一个分类)

比instanceof更好的constructor:

  语法:要检测的内容.constructor===类型

  范例:

 

<script>
    console.log([4,5].constructor=== Array);
    console.log(/\d{3}/.constructor===RegExp);
    console.log(‘html5‘.constructor===String);
    var num=234;
    console.log(num.constructor===Number);
</script>

 

  基本解析;

    constructor是对象的一个属性,不是运算符,constructor属性指向对象的构造函数。

    constuctor的作用与instanceof基本类似,但是对instanceof的两个缺陷均进行了弥补,也就是说:既能够检测基本数据类型,又不受原型链的影响。

<script>
    //范例一
    var box=document.getElementsByTagName("body");
    console.log(box[0].constructor=== HTMLBodyElement);//true
    console.log(box[0].constructor=== Node);//false
    console.log(box[0].constructor=== Object);//false
    //范例二
    var arr=[‘htnl5‘,‘码农‘];
    console.log(arr.constructor=== Array);//true
    console.log(arr.constructor===Object);//false
</script>

  constructor的局限性:

    对于自己创建的构造函数,constructor的局限性会比较大,当然这里不是我主要想说的东西,constructor属性是异变的,可以进行定义,所以并不能够保证他指向相应的构造函数。但是,对于系统的各类构造函数来说,还是可以正常使用的,毕竟我们平日里并不会去修改系统默认对象的constructor的指向

<script>
    function Me(){}
    var demo=new Me();
    console.log(demo.constructor);
    //此处检测的结果是:constructor指向构造函数Me,但是我们却可以人工修改指向,比如修改为Peo;
    function Peo(){}
    demo.constructor=Peo;
    console.log(demo.constructor);
    //此处检测的结果就变成了Peo
</script>

  相关说明:

    如果希望了解instanceof和constructor的基本原理,需要掌握原型,了解构造函数的内在机制。

检测值或者表达式的结果是否为NaN:

  isNaN函数:

    isNaN用于检测值或者表达式“转化为数字”时,是否为NaN,是NaN,结果为false,不是NaN结果为true。可以用于辅助parseFloat()和parseInt()进行进一步的结果检测

<script>
    console.log(isNaN(NaN));//false
    console.log(isNaN(234));//false
    console.log(isNaN("89"));//true
</script>

易用的jQuery函数---isArray、isFunction等:

  jQuery中提供了大量的数据类型的检测方法,可以检测数据属于那种具体的对象类型,此处就不做解释了,在JQ的API文档中都可以查得到

Object.prototype.toString.call():

  语法与范例

<script>
    console.log(Object.prototype.toString.call(236));//[object Number]
   console.log(Object.prototype.toString.call(null));//[object Null]
   console.log(Object.prototype.toString.call(true));//[object Boolean]
   console.log(Object.prototype.toString.call("码农"));//[object String]
   console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
   console.log(Object.prototype.toString.call([4,5]));//[object Array]
</script>

  基本解析:

    Object.prototype.toString比较常用于判断对象值属于那种内置属性,返回值类型为字符串,返回的字符串格式为:“[object 数据类型]”.由于许多引用类型都重写了Object继承来的toString方法,所以通常使用call/apply方法,借用Object.prototype.toString函数来判断数据类型

    每一种数据类型所属的类的原型上都有toString方法,例如:Number.prototype,String.prototype,Array.prototype等等。除了Object上的toString之外,其他原型上的toString都用于将数值转化为字符串

  Plus:

    可以借助字符串截取的方法,获取Object.prototype.toString的结果,并进行处理,从而得到"Number","null"等数据类型字符串,从而更方便进行数据类型比较/检测。

<script>
       var demo="测试用的数据";
       var type=Object.prototype.toString.call(demo).slice(8,-|);
      //slice(8,-|)表示从第八个字符开始截取,到倒数第一个字符之间的部分,不包括倒数第一个字符
   console.log(type);//String
</script>

 

原生JS-----论数据类型检测