JavaScript数据类型判定的总结笔记
用typeof来检测数据类型
Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。
但是如果尝试用typeof来检测对象类型都一律返回"object"并不能加以区分
typeofnull//"object" typeof[]//"object" typeofdocument.childNodes//"object" typeof/\d///"object" typeofnewNumber()//"object"
用constructor属性来检测类型的构造函数
[].constructor===Array//true document.childNodes===NodeList//true /\d/.constructor===RegExp//true functionisRegExp(obj){ returnobj&&typeofobj==="object"&&obj.constructor===RegExp; }//检测正则表达式对象 functionisNull(obj){ returnobj===null; }
用construct检测可以完成大多数的类型检测,null特殊直接比较。然而iframe中的数组类型确无法检测出正确类型,这是用construct检测的一个缺陷;同时在旧版本IE下DOM和BOM的construct是无法访问的
利用Object.prototype.toString来判断
Object.prototype.toString.call([])//"[objectArray]" Object.prototype.toString.call(/\d/)//"[objectRegExp]" Object.prototype.toString.call(1)//"[objectNumber]"
来看看jQuery源码中是如何使用toString方法的
/* *jQueryJavaScriptLibraryv1.11.2 */ varclass2type={};//用来保存js数据类型 jQuery.each("BooleanNumberStringFunctionArrayDateRegExpObjectError".split(""),function(i,name){//构造class2type存储常用类型的映射关系,遍历基本类型并赋值,键值为[object类型] class2type["[object"+name+"]"]=name.toLowerCase(); }); type:function(obj){ if(obj==null){//首先如果是null则返回null字符串 returnobj+""; } //接着判断给定参数类型是否为object或者function,是的话在映射表中寻找toString后的键值名称并返回,不是的话利用typeof就可以得到正确类型。 returntypeofobj==="object"||typeofobj==="function"? class2type[toString.call(obj)]||"object": typeofobj; }, /****************************/ jQuery.type(/\d/)//"regexp" jQuery.type(newNumber())//"number"
这里能够使用toString方法来检测是因为不同对象都会重新定义自己的toString方法
说说一些特殊类型的检测
上述调试是在IE8中进行的,因为undefined在javascript中并不是关键字,在IE8以下(之后的版本不可以赋值)是可以赋值的,查看jQuery.type源码可知,对于undefined检测由是typeofundefined完成的。jQuery.type并不能在旧的IE中检测出undefined的正确性。想要获得纯净的undefined可以使用void0
另外,对于DOM,BOM对象在旧的IE中使用Objec.prototype.toString检测出来的值均为“[objectObject]”
但是在chrome下的结果却完全不同(chrome可以检测出真实类型)
了解一下jQuery检测特殊类型
isWindow:function(obj){//ECMA规定window为全局对象global,且global.window===global returnobj!=null&&obj==obj.window; }, isPlainObject:function(obj){ varkey; if(!obj||jQuery.type(obj)!=="object"||obj.nodeType||jQuery.isWindow(obj)){ returnfalse; } try{//判断它最近的原形对象是否含有isPrototypeOf属性 if(obj.constructor&& !hasOwn.call(obj,"constructor")&& !hasOwn.call(obj.constructor.prototype,"isPrototypeOf")){ returnfalse; } }catch(e){ returnfalse; } if(support.ownLast){ for(keyinobj){ returnhasOwn.call(obj,key); } }
massFramework相对jQuery中改善的地方
varclass2type={//将可能出现的类型都映射在了class2type对象中,从而减少isXXX函数 "[objectHTMLDocument]":"Document", "[objectHTMLCollection]":"NodeList", "[objectStaticNodeList]":"NodeList", "[objectDOMWindow]":"Window", "[objectglobal]":"Window", "null":"Null", "NaN":"NaN", "undefined":"Undefined" }; type:function(obj,str){ varresult=class2type[(obj==null||obj!==obj)?obj:serialize.call(obj)]||obj.nodeName||"#";//serialize==class2type.toString if(result.charAt(0)==="#"){//兼容旧式浏览器与处理个别情况,如window.opera //利用IE678window==document为true,document==window竟然为false的神奇特性 if(obj==obj.document&&obj.document!=obj){//对DOM,BOM对象采用nodeType(单一)和item(节点集合)进行判断 result="Window";//返回构造器名字 }elseif(obj.nodeType===9){ result="Document";//返回构造器名字 }elseif(obj.callee){ result="Arguments";//返回构造器名字 }elseif(isFinite(obj.length)&&obj.item){ result="NodeList";//处理节点集合 }else{ result=serialize.call(obj).slice(8,-1); } } if(str){ returnstr===result; } returnresult; }
类数组
类数组是一类特殊的数据类型存在,他们本身类似Array但是又不能使用Array的方法,他们有一个明显的特点就是含有length属性,而且键值是以整数有序的排列的。这样的数组可以通过Array.slice()这样的方法转换成真正的数组,从而使用Array提供的方法。
常见类数组:arguments,document.forms,document.getElementsByClassName(等一些列节点集合NodeList,HTMLCollection),或者是一些特殊对象,如下所示:
vararrayLike={ 0:"a", 1:"b", 2:"c", length:3 }
通常情况下通过Array.slice.call既可以转换类数组,但是旧IE的HTMLCollection,NodeList不是Object的子类,不能使用该方法,这时候需要构建一个空数组,然后将遍历节点push就如空数组中,返回新生成的数组即可,同时要区别出window和string对象,因为这类的对象同样含有length>=0(length不可被修改),但是不是类数组。
jQuery如何处理类数组的
makeArray:function(arr,results){ varret=results||[]; if(arr!=null){ if(isArraylike(Object(arr))){ jQuery.merge(ret, typeofarr==="string"? [arr]:arr );//jQuery.merge合并数组,若是字符串则封装成数组河滨,不是则世界合并 }else{ push.call(ret,arr); } } returnret; }
Ext.js是如何处理类数组的
toArray:function(iterable,start,end){ if(!iterable||!iterable.length){ return[];//非类数组类型直接返回[] } if(typeofiterable==='string'){ iterable=iterable.split('');//分解字符串 } if(supportsSliceOnNodeList){ returnslice.call(iterable,start||0,end||iterable.length);//对于NodeList支持 } vararray=[], i; start=start||0; end=end?((end<0)?iterable.length+end:end):iterable.length; for(i=start;i<end;i++){ array.push(iterable[i]); } returnarray; }
massFramework.js是如何处理类数组的
slice:W3C?function(nodes,start,end){//varW3C=DOC.dispatchEvent;IE9开始支持W3C的事件模型 returnfactorys.slice.call(nodes,start,end); }:function(nodes,start,end){ varret=[], n=nodes.length; if(end===void0||typeofend==="number"&&isFinite(end)){ start=parseInt(start,10)||0; end=end==void0?n:parseInt(end,10); if(start<0){ start+=n; } if(end>n){ end=n; } if(end<0){ end+=n; } for(vari=start;i<end;++i){ ret[i-start]=nodes[i]; } } returnret;
以上就是本文的全部内容,希望对大家的学习有所帮助