js 判断数据类型的几种方法

发布时间 - 2026-01-10 22:30:54    点击率:

判断js中的数据类型有一下几种方法:typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type(),接下来主要比较一下这几种方法的异同。

先举几个例子:

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};  

1、最常见的判断方法:typeof

alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(typeof c)  ------------> object
alert(typeof d)  ------------> object
alert(typeof e)  ------------> function
alert(typeof f)  ------------> function

其中typeof返回的类型都是字符串形式,需注意,例如:

alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false

另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。 

2、判断已知对象类型的方法: instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date)
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false

注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。   

3、根据对象的constructor判断: constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true

注意: constructor 在类继承时会出错

eg:

   function A(){};
   function B(){};
   A.prototype = new B(); //A继承自B
   var aObj = new A();
   alert(aobj.constructor === B) -----------> true;
   alert(aobj.constructor === A) -----------> false;

而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:

   alert(aobj instanceof B) ----------------> true;
   alert(aobj instanceof B) ----------------> true;

言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:

   aobj.constructor = A; //将自己的类赋值给对象的constructor属性
   alert(aobj.constructor === A) -----------> true;
   alert(aobj.constructor === B) -----------> false; //基类不会报true了;

4、通用但很繁琐的方法: prototype

alert(Object.prototype.toString.call(a) === ‘[object String]') -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]') -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]') -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]') -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]') -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]') -------> true;

大小写不能写错,比较麻烦,但胜在通用。

5、无敌万能的方法:jquery.type()

如果对象是undefined或null,则返回相应的“undefined”或“null”。

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同,我们返回相应的 [[Class]] 名字。 (有关此技术的更多细节。 )

jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

其他一切都将返回它的类型“object”。

通常情况下用typeof 判断就可以了,遇到预知Object类型的情况可以选用instanceof或constructor方法,实在没辙就使用$.type()方法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


# js  # 判断  # 数据类型  # js 判断各种数据类型的简单方法(推荐)  # js的各种数据类型判断的介绍  # JS中的四种数据类型判断方法  # 利用JS判断数据类型的四种方法  # JavaScript中判断数据类型的方法总结  # JavaScript 判断数据类型的4种方法  # js和jquery判断数据类型的4种方法总结  # JS数据类型判断的几种常用方法  # 在JS中判断数据类型的方式有哪些简单示例  # 会报  # 自己的  # 都是  # 几种方法  # 几个  # 一切都  # 言归正传  # 最常见  # 就可以  # 但很  # 有一个  # 需注意  # 情况下  # alert  # function  # strong  # Date  # number  # object  # brush 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何实现建站之星域名转发设置?  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Laravel如何保护应用免受CSRF攻击?(原理和示例)  如何自定义safari浏览器工具栏?个性化设置safari浏览器界面教程【技巧】  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  EditPlus中的正则表达式实战(5)  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  深圳网站制作培训,深圳哪些招聘网站比较好?  怎样使用JSON进行数据交换_它有什么限制  IOS倒计时设置UIButton标题title的抖动问题  弹幕视频网站制作教程下载,弹幕视频网站是什么意思?  Laravel如何实现一对一模型关联?(Eloquent示例)  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  Laravel如何处理表单验证?(Requests代码示例)  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  如何快速选择适合个人网站的云服务器配置?  android nfc常用标签读取总结  Android GridView 滑动条设置一直显示状态(推荐)  Laravel安装步骤详细教程_Laravel环境搭建指南  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊?在线制作,模板很多的那种?  java获取注册ip实例  如何制作公司的网站链接,公司想做一个网站,一般需要花多少钱?  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  如何在建站之星网店版论坛获取技术支持?  如何快速搭建二级域名独立网站?  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  Laravel怎么判断请求类型_Laravel Request isMethod用法  如何彻底卸载建站之星软件?  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面?  如何快速使用云服务器搭建个人网站?  Laravel如何处理和验证JSON类型的数据库字段  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  香港服务器网站卡顿?如何解决网络延迟与负载问题?  如何选择PHP开源工具快速搭建网站?  教学论文网站制作软件有哪些,写论文用什么软件 ?  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何在万网自助建站平台快速创建网站?  Laravel如何使用查询构建器?(Query Builder高级用法)  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  用v-html解决Vue.js渲染中html标签不被解析的问题  Laravel PHP版本要求一览_Laravel各版本环境要求对照  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程