javascript 中判断数据类型有两种情况:1.基本数据类型 2.引用数据类型
1.基本数据类型:boolean,(object/null),string,number,undefined,function
判断方式:typeof
console.log(typeof 45) //number console.log(typeof true) //boolean console.log(typeof alert) //function console.log(typeof {}) //object console.log(typeof str) //undefined console.log(typeof "test") //string
2.引用数据类型:Date,Array,RegExp等
console.log(/a/g instanceof RegExp ? "RegExp" : false); //RegExp console.log([1,2,3] instanceof Array ? "Array" : false); //Array console.log(new Date() instanceof Date ? "Date" : false); //Date
如果是引用数据类型用typeof来检查就变成了下面的情况:
console.log(typeof /a/g ); //object console.log(typeof [1,2,3] ); //object console.log(typeof new Date()); //object
反过来用instanceof来检查基本数据类型是什么情况呢?
console.log(23 instanceof Number); //false console.log(true instanceof Boolean); //false console.log(alert instanceof Function); //true console.log({} instanceof Object); //true console.log(str instanceof undefined); //报错 console.log("test" instanceof String); //false
从结果看出,检查类型前,要先知道是基本数据类型,还是引用类型很重要。
于是在很多框架中出现了,isXXX这样的方法,用于类型判断,但研究源码发现,判断类型和上面的方式不一样。
判断类型不用typeof、instanceof呢?看看下面的代码
console.log((23).toString()); //23 console.log((/2/).toString()); ///2/ console.log(({}).toString()); //[object Object] console.log(alert.toString()); //函数源码 //console.log(str.toString()); //报错 str 未定义 console.log("test".toString()); //test
上面的代码中有一个很特别: [object Object],这是一个对象的toString方法,输出的结果与别的类型的toString方法不一样。如果其它类型也调用对象的toString方法会是什么样的结果呢?
console.log({}.toString.call(23)); //[object Number] console.log({}.toString.call(/2/)); //[object RegExp] console.log({}.toString.call({})); //[object Object] console.log({}.toString.call(alert)); //[object Function] //console.log({}.toString.call(str)); //报错 console.log({}.toString.call("test")); //[object String]
上面的输出是不是很有意义?看到这个结果,看以知道数据类型了。 其中{}.toString.call(23)(call起了关键作用,{}是一个字面量的写法。)简单理解就是让23调用对象的toString方法。
再看看几个例子:
console.log({}.toString.call([1,2,3])); //[object Array] console.log({}.toString.call(alert)); //[object Function] console.log({}.toString.call(true)); //[object Boolean]
看了上面的输出他们都有一个共同点:[object .....]这样的形式。
我们如果要判断常用的数据类型,只要定义好映射关系。就能正确的得到数据类型了。
//定义关系 var types={ "[object Number]":"Number", "[object Object]":"Object", "object Function]":"Function", "[object String]":"String", "[object Boolean]":"Boolean", "[object RegExp]":"RegExp", "[object Array]":"Array" } //类型判断调用函数 function type(para){ return types[{}.toString.call(para)]; } console.log(type(/a/)); //RegExp console.log(type({})); //Object console.log(type(true)); //boolean console.log(type([])); //Array console.log(type(12)); //Number
上面能正确判断类型够用吗?
我们再利用{}.toString.call()输出几个结果。
console.log({}.toString.call(new Date())); //[object Date] console.log({}.toString.call(document)); //[object XULDocument] console.log({}.toString.call(window)); //[object Window]
看看一个比较完整的判断:mass FrameWork GitHub
var class2type={ "[objectHTMLDocument]":"Documnt", "[objectHTMLCollection]":"NodeList", "[objectStaticNodeList]":"NodeList", "[objectIXMLDOMNodeList]":"nodeList", "[objectDOMWindow]":"Window", "object gloabal":"Window", "null":"Null", "NaN":"NaN", "undefined":"Undefined" }, toString = class2type.toString; "Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList".replace(/[^,]+/g,function(name){ class2type["[object "+ name +"]"] = name; }); var type = function(obj,str){ var result = class2type[(obj == null || obj !==obj) ? obj : toString.call(obj)] || obj.nodeName || "#"; if(result.charAt(0) ==="#"){//兼容旧式浏览器与处理个别情况,如window.opera //利用IE678 window == document为true,document == window竟然为false的神奇特性 if(obj == obj.document && obj.document != obj){ result ="Window";//返回构造器名字 }else if(obj.nodeType === 9 ){ result = "Document";//返回构造器名字 }else if(obj.callee){ result = "Arguments";//返回构造器名字 }else if(isFinite(obj.length) && obj.item){ result = "NodeList"; //处理节点集合 }else{ result = toString.call(obj).slice(8,-1); } } if(str){ return str === result; } return result; }
使用如下:
console.log(type(1)); //Number console.log(type(document)); //Document console.log(type(true)); //Boolean console.log(type([],"Array")); //true
注意:
1.replace的用法。
2.null,undefined判断
3.个别浏览器的处理。
学习中.....