目录
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”);
}