JS中检测数据类型的多种方法

面试当中经常会问到检测 js 的数据类型，我在工作当中也会用到这些方法。让我们一起走起！！！

首先给大家上一个案例

console.log(typeof "langshen");       // String
console.log(typeof 666);              // Number
console.log(typeof true);             // Boolean
console.log(typeof false);            // Boolean
console.log(typeof function(){});     // Function
console.log(typeof undefined);        // Undefined
console.log(typeof null);             // Object
console.log(typeof []);               // Object
console.log(typeof {});               // Object

通过这些案例大家不难看出 

第一种 ： 当 typeof 检测基本数据类型（Number、String、Boolean 、Undefined、Null）的时候是没有问题的。

但是检测引用型数据类型（Array、Object、RegExp等）的时候全都是 Object。

由于 typeof 检测的数据类型不是那么的 perfect ！！！会有局限性。

使用场景：

　　　　　　可以判断传递的参数是否有值

function fn(a, b) {
  if (typeof b === "undefined") { // 没有传递参数
    b = 0;
  }
  console.log(a, b); //1 0
}
fn(1);

第二种 ： instanceof   检测一个实例是不是属于某个类

console.log("langshen" instanceof String);         //false
console.log(666 instanceof Number);                //false
console.log(true instanceof Boolean);              //false
console.log(null instanceof Null);
console.log(undefined instanceof Undefined);
console.log([] instanceof Array);                  //true
console.log(function(){} instanceof Function);     //true
console.log({} instanceof Object);                 //true

咱们先不要看 null 和 undefined

首先看基本数据类型，打印出来的都是false,这是为什么呢？

前三个都是以对象字面量创建的基本数据类型，但是却不是所属类的实例，只有实例方式创建出来的才是标准的对象数据类型值

如果我们换种方式来检测

new String("langshen") instanceof String       //true
new Number(666) instanceof Number              //true
new Boolean(true) instanceof Boolean           //true

当我们通过New的方式去创建基本数据类型就输出true

所以当我们检测的数据只要在当前实例的原型链上，我们用其检测出来的结果都是true 。

另外两个特例：Null 和  Undefined 这两个没有办法比较，比较特殊

总结：

instanceof是一个操作符，返回值是一个布尔值
instanceof是检测引用数据类型，而不能检测基本数据类型

第三种： constructor

constructor这个属性存在于构造函数的原型上，指向构造函数，对象可以通过  __proto__ 在其所属类的原型上找到这个属性

console.log(("1").constructor === String);      　　　　　　 //true
console.log((1).constructor === Number);    　　　　　　　　  //true 
console.log((true).constructor === Boolean);　　　　　　　　　//true
console.log(([]).constructor === Array);　　　　　　　　　　　  //true
console.log((function() {}).constructor === Function);　　　 //true
console.log(({}).constructor === Object);　　　　　　　　　　　 //true

现在看起来是不是很完美呢，其实并不是这样的，在看下面这个例子

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();

console.log(f.constructor===Fn);   //false
console.log(f.constructor===Array); // true

看了这个例子是不是觉得对这个世界都没有爱了！！

但我要告诉你不不不，我们要对世界保持100%热爱，由于这种热爱让我们总结出了最后一种万能的检测方法！！！

第四种：Object.prototype.toString.call()

console.log(Object.prototype.toString.call(1));　　　　　　　　　　　　　　//[object Number]
console.log(Object.prototype.toString.call(''));　　　　　　　　　　　　　//[object String]
console.log(Object.prototype.toString.call(true));　　　　　　　　　　　　//[object Boolean]
console.log(Object.prototype.toString.call(null));　　　　　　　　　　　　// [object Null]
console.log(Object.prototype.toString.call(undefined));　　　　　　　　　//[object Undefined]
console.log(Object.prototype.toString.call([]));　　　　　　　　　　　　　// [object Array]
console.log(Object.prototype.toString.call({}));　　　　　　　　　　　　　// [object Object]
console.log(Object.prototype.toString.call(/^$/));　　　　　　　　　　　　//[object RegExp]
console.log(Object.prototype.toString.call((function () {})));　　　　　//[object Function]

这种方法可以把多有的数据类型进行转换，是不是很神奇呢！！

想要看到更多神奇的请关注我的博客园！！！