文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中怎么检测数据类型

2023-07-06 04:03

关注

本篇内容介绍了“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); //falseconsole.log(new Number(12) instanceof Number); //trueconsole.log([] instanceof Array); //trueconsole.log([] instanceof Object); //truefunction 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); //truelet 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.toStringvar hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnPropertyvar fnToString = hasOwn.toString; //=>Function.prototype.toStringvar 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);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中用来检测数据的方法,可以达到我们说的需求。

“JavaScript中怎么检测数据类型”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯