正确判断js数据类型 总结记录

正确判断js数据类型 总结记录

判断js中的数据类型有一下几种方法：typeof、instanceof、 constructor、 prototype、 三方库。

js六大数据类型

number：   数字，整数、浮点数等等，
string：   单引号或者双引号来说明，
Boolean：  返回true和false，这两个值不一定对应1和0
object：   对象，可以执行new操作符后跟要创建的对象类型的名称来创建。
null：     只有一个值得数据类型，逻辑上讲，null值表示一个空对象指针。
undefined：未定义，使用var声明变量但未对其初始化时，变量的值就是undefined。

1、typeof

在实际的项目应用中，typeof只有两个用途，就是检测一个元素是否为undefined，或者是否为function。原因如下：
JavaScript Garden整理出来了如下表格

Value               function   typeof
-------------------------------------
"foo"               String     string
new String("foo")   String     object
1.2                 Number     number
new Number(1.2)     Number     object
true                Boolean    boolean
new Boolean(true)   Boolean    object
new Date()          Date       object
new Error()         Error      object
[1,2,3]             Array      object
new Array(1, 2, 3)  Array      object
new Function("")    Function   function
/abc/g              RegExp     object
new RegExp("meow")  RegExp     object
{}                  Object     object
new Object()        Object     object 

2、instanceof

var a = [1,2,3];
var b = new Date();
var c = function(){};

alert(a instanceof Array) ---------------> true
alert(b instanceof Date) 
alert(c instanceof Function) ------------> true
alert(c instanceof function) ------------> false

3、constructor

var a = [1,2,3];
var b = new Date();
var c = function(){};

alert(a.constructor === Array) ----------> true
alert(b.constructor === Date) -----------> true
alert(c.constructor === Function) -------> true

注：
      使用instaceof和construcor,被判断的引用类型（Object Array）必须是在当前页面声明的！比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个array，并将其赋值给父页面的一个变量，这时判断该变量，Array ==object.constructor;会返回false；
原因：
1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array。

4、Object.prototype.toString（通用）

Object.prototype.toString.call()

var toString = Object.prototype.toString;

toString.call(undefined);  -------------> [object Undefined]
toString.call(null);       -------------> [object Null]
toString.call(new Date);   -------------> [object Date]
toString.call(new String); -------------> [object String]
toString.call(Math);       -------------> [object Math]

jQuery.type()源码

var class2type = {} ;
"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
    class2type[ "[object " + e + "]" ] = e.toLowerCase();
}) ;

function _typeof(obj){
    if ( obj == null ){
        return String( obj );
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ class2type.toString.call(obj) ] || "object" :
        typeof obj;
}

注：数组还可以用 Array.isArray(); 或者根据其具有的方法去判断。不再细述

原文地址：https://segmentfault.com/a/1190000016940601