【JavaScript】变量类型判断总结

前言

JavaScript中存在七种数据类型，这七种数据类型又可以分为基本类型和引用类型，分别是：

• 基本类型：
  • 数值(Number)
  • 布尔值(Boolean)
  • 字符串(String)
  • 空值(Null)
  • 未定义(Undefined)
  • ES6还新增了Symbol类型
• 引用类型：
  • 对象(Object)，又包括数组(Array)和函数(Function)

但由于JS是弱类型语言，所以使用时经常无法判断具体的数据类型，因此总结了几种数据类型的判断方法。

判断方法

1. typeof

typeof可以简单的判断大多数数据类型，但无法区分个别类型，具体如下:

    typeof 'a'  //string
    typeof 1    //number 
    typeof NaN  //number
    typeof null //object
    typeof undefined    //undefined
    typeof {}   //object
    typeof []   //object
    typeof function(){} //function
    typeof class a{}    //function

从执行结果可以看到，typeof基本可以判断出数据类型。但需要注意几个类型：

• NaN会被判断为number,即使它的定义是"Not-A-Number"
• null会被判断成object,因为NULL在定义时表示，这个值是一个对象但暂时还没有赋值
• 数组和对象均会被判断为object,所以如果想要单独区分出数组需要用其它方法

2. instance of

instanceof运算符用来检测 constructor.prototype 是否存在于参数object的原型链上,直白的说就是隐式原型链上是否存在该参数。instanceof只能用于判断引用类型的数据具体属于哪一类，因为基本数据类型没有原型。具体代码如下：

    //直接判断
    [] instanceof Array //true
    {} instanceof Array //false
    {} instanceof Object    //true
    function(){} instanceof Function    //true
    //继承判断
    function(){} instanceof Object  //true
    Function instanceof Object      //true
    Function instanceof Function    //true
    Object instanceof Function      //true

• instanceof用于直接判断时比较直观，用法跟constructor类似，用于继承判断时则需要考虑原型链了。
• instanceof判断可能会出现错误，因为对象原型可以手动改变，因此不一定准确。比如：

//这里用ES5的语法实现继承
     //构造父类Animal，子类Dog和Cat
     function Animal(){}
     function Dog(){}
     function Cat(){}
     
     //实现Dog和Cat继承Animal类
     Dog.prototype=new Animal()
     Cat.prototype=new Animal()
     
     //创建一个Dog类实例wangcai
     var wangcai=new Dog()
     console.log(wangcai instanceof Dog)    //true
     console.log(wangcai instanceof Animal) //true
     /*此时的wangcai通过instanceof判断还是属于Dog类*/
     
     //将wangcai的隐式原型__proto__指向Cat类的原型prototype
     wangcai.__proto__=Cat.prototype
     console.log(wangcai instanceof Dog)    //false
     console.log(wangcai instanceof Cat)    //true
     console.log(wangcai instanceof Animal) //true
     /*此时的wangcai通过instanceof判断变成了Cat类*/

3. Array.isArray()

• 这个方法是Array类原型上的一个方法，用于精准判断是否为array类型，一般在需要具体特殊判断是否为数组的场景下使用。具体情况如下:

1.所有为true的情况:
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(Array.prototype);

2.所有为false的情况:
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

总结一下Array.isArray的一些注意点:

• 用于需要指定判断是否为数组的场景，且优先级高
• Array.prototype也是一个数组
• 在对数组的判断上，isArray的准确度比instanceof更高

4. Object.prototype.toString.call()

这样做的原理是通过Object原型上的toString方法做复杂类型的判断，那么为什么要通过原型上的方法手动调用呢?可以看下例子:

var arr=[1,2];

//数组本身直接调用toString
arr.toString();// "1,2"
//通过call指定
Object.prototype.toString.call(arr); //"[object Array]"

可以看到，虽然数组也可以调用Object原型上的toString，但它自身也重写过该方法，所以无法直接拿来用于类型的判断了，因此使用Object.prototype.toString来进行类型的判断，例子如下:

Object.prototype.toString.call(123)   //[object Number]
Object.prototype.toString.call('123') //[object String]
Object.prototype.toString.call(undefined)    //[object Undefined]
Object.prototype.toString.call(true)  //[object Boolean]
Object.prototype.toString.call({})    //[object Object]
Object.prototype.toString.call([])    //[object Array]
Object.prototype.toString.call(function(){}) //[object Function]
Object.prototype.toString.call(Function)     //[object Function]
Object.prototype.toString.call(null)  //[[object Null]]
Object.prototype.toString.call(new Date());  //[object Date]
Object.prototype.toString.call(/at/); //[object RegExp]

可以看到，基本所有的类型都精准的判断出来了，但这还不是我们想要的最终目标，我们想要的是直接获得类型，而不是这样一个包含类型的结构体，因此我们可以用函数包装一下得到最终我们想要的方法:

function checkType(obj){
return Object.prototype.toString.call(obj).slice(8,-1);
}
checkType(Object)           //"Function"
checkType(Array.prototype)  //"Array"
checkType(new Date())       //"Date"
checkType(new RegExp())     //"RegExp"

总结

本文介绍了三种方法判断数据类型，总结一下使用场景大概就是:

• typeof 适合用于判断基本数据类型，写法简单
• instance of 适合用于实例构造函数的判断，不一定准确
• Array.isArray 在指定判断是否为数组的场景优先级更高
• Object.prototype.toString.call 通用性强，写法稍微复杂

写在最后

新人初来乍到，小白一枚，如果哪里写的不对或者有错误，还望指出，一定会虚心改正。最后，希望大家多多支持，谢谢大家~