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

Posted 2020-09-17

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

一、最为基础的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>