JavaScript中检测数据类型的四种方法总结
检测数据类型1:typeof
其返回结果都是字符串,字符串中包含了对应的数据类型 number/string/boolean/undefined/symbol/object/function
;
局限性:检测null
返回的是object
,检测其他如数组、正则等特殊对象时,返回的结果都是object
,无法区分具体类型。
console.log(typeof 12); //=>"number" console.log(typeof null); //=>"object" console.log(typeof []); //=>"object" console.log(typeof /^$/); //=>"object"
检测数据类型2:instanceof
用于检测某个实例是否属于这个类,其检测的底层机制是所有出现在其原型链上的类,检测结果都是true
局限性:由于可以基于__proto__
或者prototype
改动原型链的动向,所以基于instanceof
检测出来的结果并不一定是准确的。而基本数据类型的值,连对象都不是,更没有__proto__
,虽说也是所属类的实例,在JS中也可以调取所属类原型上的方法,但是instanceof
是不认的。
console.log(12 instanceof Number); //false console.log(new Number(12) instanceof Number); //true console.log([] instanceof Array); //true console.log([] instanceof Object); //true function Fn() {} Fn.prototype.__proto__ = Array.prototype; let f = new Fn(); console.log(f instanceof Array); //true
检测数据类型3:constructor
这是实例所属类原型上的属性,指向的是类本身,但其也是可以进行修改,与instanceof
类似。
let arr = []; console.log(arr.constructor); //ƒ Array() { [native code] } console.log(arr.constructor === Array); //true let n=12; console.log(n.constructor === Number); //true
检测数据类型4:Object.prototype.toString.call([value]) / ({}).toString.call([value])
该方法不是用来转换为字符串的,而是返回当前实例所属类的信息,其返回结果的格式为[object 所属类信息]
,即[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]
。
这种方式基本上没有什么局限性,是检测数据类型相对来说最准确的方式。
console.log(Object.prototype.toString.call(12)); //[object Number] console.log(Object.prototype.toString.call([])); //[object Array] console.log(Object.prototype.toString.call({})); //[object Object] function fn () {} console.log(({}).toString.call(fn)); //[object Function] console.log(({}).toString.call(/^$/)); //[object RegExp] console.log(({}).toString.call(new Date)); //[object Date]
虽然检测数据类型4相对来说最好,但格式稍微繁琐一些,是不是可以想办法封装一个方法,输出结果类似于typeof
那种,直接输出如number、date、regexp
这种,确实是有的。
var class2type = {}; var toString = class2type.toString; //=>Object.prototype.toString var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty var fnToString = hasOwn.toString; //=>Function.prototype.toString var ObjectFunctionString = fnToString.call(Object); //=>Object.toString() =>"function Object() { [native code] }" "Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) { class2type["[object " + item + "]"] = item.toLowerCase(); }); console.log(class2type); /* [object Boolean]: "boolean" [object Number]: "number" [object String]: "string" [object Function]: "function" [object Array]: "array" [object Date]: "date" [object RegExp]: "regexp" [object Object]: "object" [object Error]: "error" [object Symbol]: "symbol" */ function toType(obj) { //=>obj may be null / undefined //=>return "null"/"undefined" if (obj == null) { return obj + ""; } return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj; }
这是jQuery
中用来检测数据的方法,可以达到我们说的需求。
当然,现在公司的项目中用jQuery
的已经不多了,面试会问的就更少了,但是其中的很多方法和思想还是值得我们去研究。
到此这篇关于JavaScript中检测数据类型的四种方法总结的文章就介绍到这了,更多相关JavaScript检测数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
BootStrap selectpicker后台动态绑定数据的方法
这篇文章主要为大家详细介绍了BootStrap selectpicker后台动态绑定数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07Javascript中prototype与__proto__的关系详解
这篇文章主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-03-03定时器(setTimeout/setInterval)调用带参函数失效解决方法
setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式,详细使用方法可以参考下本文2013-03-03JavaScript 双位非运算(~~ 操作符)使用场景实例探索
本文为大家介绍JavaScript中双位非运算 ~~, ~~ 操作符是一个强大且经常被忽视的特性,它提供了一种快速、简洁的方式来处理数字和执行类型转换,通常可以被用于数学计算和类型转换,我们先了解一下 ~~ 的基本概念和它的一些应用场景2024-01-01
最新评论