js中，封装一个判断所有数据类型的方法getType，入参为任意变量，返回值为该参数类型的字符串形式
js中，封装一个判断所有数据类型的方法getType，入参为任意变量，返回值为该参数类型的字符串形式
1、封装方法
基本数据类型，包括：undefined/null/string/number/boolean。
- typeof 对null值进行判断时，返回的是object。因为null是一个空数据的地址，该方法误判其为object，然后这个错误保留。
- 引用数据类型，typeof打印都是有 object，对常用的数据类型（Array/Date/RegExp）进行 typeof 操作时，返回的也只是 object，这就导致我们在使用时没法准确的区分了。因此我们需要一个方法，能够返回更详细的数据类型信息。
tool.js
<script>
function getType(data) {
let type;
type = typeof data;
if (type != 'object') {
return type;
} else {
if (data === null) {
return 'null'
}
let typeArr = [Date, Array, RegExp, Error, Object];
for (let i = 0, len = typeArr.length; i < len; i++) {
if (data instanceof typeArr[i]) {
return typeArr[i].name.toLowerCase()
}
}
}
}
console.log(getType([1,2])) // array
console.log(getType('123456')) // string
console.log(getType(39)) // number
console.log(getType(null)) // null
console.log(getType(undefined)) // undefined
console.log(getType({id:12})) // object
</script>
2、检测数据类型的方法
2.1、typeof
typeof操作符返回一个用来表示数据类型的字符串，即：typeof运算之后的结果都是字符串类型。
注意：typeof是一个操作符,不是一个函数!
| key | value |
|---|---|
| string | 字符串 |
| boolean | 布尔值 |
| number | 数值 |
| undefined | 未定义 |
| object | 对象，数组或null |
| function | 函数 |
| symbol | symbol |
实例
var num=123;
var str="123";
var boo=true;
var und=undefined;
var arr=[];
var obj={};
var nul=null;
var fun=function(){};
var s = Symbol();
console.log(typeof num); //"number"
console.log(typeof str); //"string"
console.log(typeof boo); //"boolean"
console.log(typeof und); //"undefined"
console.log(typeof arr); //"object"
console.log(typeof obj); //"object"
console.log(typeof nul); //"object"
console.log(typeof fun); //"function"
- 优点
能检测出number,boolean,string,symbol,undefined,function,object - 缺点
基本数据类型,null返回object 其他都可以返回正确结果
引用数据类型,除了function以外,都返回object
function返回function类型
2.2、instanceof
instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置.
语法: object instanceof 构造函数
返回值：如果是这个构造函数构造出来的，返回true，否则返回false。
实例
console.log(1 instanceof Number); //false
console.log("liuqiao" instanceof String); //false
console.log(true instanceof Number); //false
console.log(function(){} instanceof Function); //true
console.log({} instanceof Object);//true
console.log([1,2,3] instanceof Array);//true
结论：
instanceof 运算符用于对象类型检测,无法检测基本数据类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
并且也无法检测undefined和null ,因为他们两个比较特殊,使用instanceof检测时,浏览器根本不识别,会报错
instanceof 只要该实例的父亲辈,爷爷辈以及祖先辈,都会返回true
- 优点
可以检测出某特定的引用类型具体是某种类型 - 缺点
只能检测引用类型
2.3、constructor
每个对象都有一个隐藏属性constructor,该属性指向对象的构造函数(类)
实例
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
-
优点
基本上基本数据类型和引用数据类型都可以检测,但是除了自定义的对象外 -
缺点
为什么说除了自定义对象外都可以检测 ,因为检测自定义对象时不可靠!具体原因参考用constructor来做类型识别,并不可靠。函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object。
undefined和null无法检测
2.4、Object.prototype.toString.call()
使用Object.prototype上的原生toString()方法判断数据类型当要判断多类型比较复杂的时候,强烈推荐使用这个方法
jQuery就是通过这种方式来判断的!
实例
var m = Object.prototype.toString;
console.log(m.call("aaa"));//[object String]
console.log(m.call(1));//[object Number]
console.log(m.call(true));//[object Boolean]
console.log(m.call(null));//[object Null]
console.log(m.call(undefined));//[object Undefined]
console.log(m.call([]));//[object Array]
console.log(m.call(function () { }));//[object Function]
console.log(m.call({}));//[object Object]
console.log(m.call(new Date));//[object Date]
console.log(m.call(/\d/));//[object RegExp]
function Person() { };
console.log(m.call(new Person));//[object Object]
- 优点
基本上的数据类型都可以检测
- 缺点
自定义的类是不能准确判断的,这里可以采用instanceof
Object.prototype.toString()本身是允许被修改的，而我们目前所讨论的关于Object.prototype.toString()这个方法的应用都是假设toString()方法未被修改为前提的。
- 扩展
我们发现上面打印[object String]类似这种不太完美,比如我想直接打印string呢