目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

JS的数据类型

ECMAScript中有5种简单的数据类型:Undefined,Null,Boolean,Number,String.还有一种复杂的数据类型–Object 我们经常需要判断一些数据类型再做回调函数,对于后端的接口如果传的数据类型不符,也经常会报错,而且数据类型的判断也是面试的一大必考题

我们需要了解什么

1.判断数据类型的几种方法
2.各方法的区别

2.知识剖析

判断数据类型共有四种方法:

1.typeof
2.instanceof
3.constructor
4.Object.prototype.toString.call
3.常见问题
各方法的区别
4.解决方案
1.最常见的判断方法typeof
 console.log(typeof “”) //string;
 console.log(typeof 1) //number; 
 console.log(typeof true) //boolean;
 console.log(typeof null) //object;
 console.log(typeof undefined) //undefined;
 console.log(typeof []) //object;
 console.log(typeof function(){}) //function;
 console.log(typeof {}) //object;
 可以看到,typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的。2.判断已知对象类型的方法instanceof
 console.log(“1” instanceof String);//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
 可以看到instanceof判断引用数据类型,可以得到正确的结果,基础类型却不行,而null和undefined浏览器直接报错。尤其是null,其实这是js设计的一个败笔,早期准备更改null的类型为null,由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题,就没有更改过来,于是一直遗留到现在。作为学习者,我们只需要记住就好。 3、根据对象的constructor判断: constructor
 console.log((“1”).constructor === String);//true
 console.log((1).constructor === Number);//true
 console.log((true).constructor === Boolean);//true
 //console.log((null).constructor === Null);//报错
 //console.log((undefined).constructor === Undefined);//报错
 console.log(([]).constructor === Array);//true
 console.log((function() {}).constructor === Function);//true
 console.log(({}).constructor === Object);//true
 (这里依然抛开null和undefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么: 
  function Fn(){}; 
 
 Fn.prototype=new Array(); 
 
 var f=new Fn(); 
 
 console.log(f.constructor===Fn);//false 
 
 console.log(f.constructor===Array);//true 
 我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。
注意: constructor 在类继承时会出错
4.万能的Object.prototype.toString.call
 function Type() { };
 var toString = Object.prototype.toString;
 console.log(toString.call(new Date) === ‘[object Date]’);//true
 console.log(toString.call(new String) ===’[object String]’);//true
 console.log(toString.call(new Function) ===’[object Function]’);//true
 console.log(toString.call(Type) ===’[object Function]’);//true
 console.log(toString.call(‘str’) ===’[object String]’);//true
 console.log(toString.call(Math) === ‘[object Math]’);//true
 console.log(toString.call(true) ===’[object Boolean]’);//true
 console.log(toString.call(/^[a-zA-Z]{5,20}$/) ===’[object RegExp]’);//true
 console.log(toString.call({name:’wenzi’, age:25}) ===’[object Object]’);//true
 console.log(toString.call([1, 2, 3, 4]) ===’[object Array]’);//true
 console.log(toString.call(undefined) === ‘[object Undefined]’);//true
 console.log(toString.call(null) === ‘[object Null]’);//true5.编码实战
6.扩展思考
7.参考文献
js检测数据类型的四种方法:
8.更多讨论
 Q1:如何判断是否是null值 
 
 使用typeof会返回object 
 
 instanceof会报错 
 
 constructor会报错 
 
 Object.prototype.toString.call返回[object Null] 
 

 Q2:typeof的局限性 
 
 if(typeof a!=”undefined”){alert(“ok”)},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错,对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性 
 

 Q3:判断NaN: 
 
 var tmp = 0/0; 
 
 if(isNaN(tmp)){ 
 
 alert(“NaN”); 
 
 }