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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
React快速入门教程
Jan 17 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现音量控制拖动
Jan 15 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
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
javascript void(0)的妙用
2009/10/21 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Python实现基本线性数据结构
2016/08/22 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
大学毕业感言
2014/01/10 职场文书
职工代表大会主持词
2014/04/01 职场文书
移交协议书
2014/08/19 职场文书
党员民主生活会材料
2014/12/15 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
校长新学期寄语2016
2015/12/04 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS