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


Posted in Javascript onJanuary 13, 2017

判断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()方法。

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

Javascript 相关文章推荐
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
You might like
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python编写打字训练小程序
2019/09/26 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
django使用graphql的实例
2020/09/02 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
运动会通讯稿100字
2014/01/31 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
公司总经理任命书
2014/06/05 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
网聊搭讪开场白
2015/05/28 职场文书