检测数据类型的方法有哪些

目录

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]’);//true

5.编码实战

6.扩展思考

7.参考文献

js检测数据类型的四种方法：https://www.cnblogs.com/zt123123/p/7623409.html

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