常见的数据类型检测的方法:
一、最为基础的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>