javascript 数据类型判断

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.个别浏览器的处理。

 

 

学习中.....