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]

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

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