浅谈js数据类型识别方法

js有6种基本数据类型  Undefined , Null , Boolean , Number , String ,Symbol和一种引用类型Object,下面我们就来一一看穿,哦不,识别他们。

  1. typeof

前面6种虽多,但是是基本类型,也容易识别,typeof 操作符就能差不多把他们都识别了,
null 不服的站了出来:“能识别我么?”,typeof这下犯难了:"你,你你先坐下。" typeof对Object基本上是脸盲的,除了function之外看谁都是Object, 数组是对象,日期对象是对象,正则是对象,对象也是对象。都特么是对象,typeof 范晕了,只好去请教表哥 instanceof

console.log(typeof "hello");//"string"
console.log(typeof 666);//"number"
console.log(typeof true);//"boolean"
console.log(typeof undefined);//"undefined"
console.log(typeof null);//"object"
var sm = Symbol();
console.log(typeof sm);//"symbol"
console.log(typeof {name: "hello"});//"object"
console.log(typeof function(){});//"function"
console.log(typeof []);//"object"
console.log(typeof new Date);//"object"
console.log(typeof /\d/);//"object"
function Person(){};
console.log(typeof new Person);//"object"

  简单说,记住两点就好了1.typeof可识别出null之外的基本类型        2.不能识别除function之外的具体对象类型

2. instanceof
 instanceof 给人一种成大事不拘小节的感觉,5个基本类型一个也识别不了。不过对对象的识别还是有一套的,不仅能识别内置对象类型,还能识别自定义对象类型,厉害了我的instanceof ,

console.log("jerry" instanceof String);//false
console.log(12 instanceof Number);//false
console.log(true instanceof Boolean);//false
console.log(undefined instanceof Undefined);//会报错滴
console.log(null instanceof Null); //会报错滴 console.log({name: "hehe"} instanceof Object);//true
console.log(function(){} instanceof Function);//true
console.log([] instanceof Array);//true
console.log(new Date instanceof Date);//true
console.log(/\d/ instanceof RegExp);//true
function Car(){};
var bmw=new Car;
console.log(bmw instanceof Car);//true
console.log(bmw instanceof Object);//true

简单说,记住一句话就好了,判断对象类型找instanceof就好了,不管是自定义的还是内置的统统拿下。

3.constructor

以上两种方法的优缺点很明显,constructor 高调的来了,嘴里还嚷嚷着:“我可是什么都能识别的哦。” 据说他可以通过这些招式判断 类型

比如这样:

(3).constructor === Number // true
true.constructor === Boolean // true
'abc'.constructor === String // true

或者这样:

[].constructor==Array   //true
var obj= new Object();
obj.constructor==Object //true
function BadCat(){};
var cat=new BadCat;
cat.constructor === BadCat; //true

一切看起来都很美好,然鹅,,null 和undefined 首先站出来实名反对,constructor 一看傻眼了,这两个是什么东东,在我这里完全识别不了啊,接着cat也发话说上次被constructor 欺骗,还不忘拿出了证据

function BadCat(){};
var cat=new BadCat;
cat.constructor = 123;
cat.constructor === BadCat; //false

这下大家都明白了 原来constructor 不靠谱啊,于是纷纷不再理会他,继续寻找下一个判定类型的英雄。

4.Object.prototype.toString
Object.prototype.toString就在这时低调的出现了,虽然长得有点怪,但是能力没得说。但这玩意怎么用呢?简单来说这样用

Object.prototype.toString.call(obj)
比如:
console.log(Object.prototype.toString.call(233));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]

感觉输出的有点怪怪的,没关系,待会我们用函数把他封装一下就会顺眼多了(斜眼笑),听起来好像很完美,氮素,金无足赤啊盆友们,这家伙不能识别自定义对象啊有木有,如果想识别自定义对象,还是乖乖的找instanceof比较靠谱。

识别标准类型和内置对象类型的函数封装如下:

function type(param){
return Object.prototype.toString.call(param).slice(8,-1).toLowerCase();
}

然后就可以直接拿来用了,美滋滋。

5.最后介绍一项黑科技$.type(),当然这是jQuery封好的方法,引用了jQuery1.4.3及以上的版本可以随意使用。

上一篇:在centos7 上部署 vuepress


下一篇:HTML5滑动(swipe)事件