面试当中经常会问到检测 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]
这种方法可以把多有的数据类型进行转换,是不是很神奇呢!!
想要看到更多神奇的请关注我的博客园!!!