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代码
Aug 13 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
详细分析vue响应式原理
Jun 22 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
Sony CFR 320 修复改造
2020/03/14 无线电
用PHP4访问Oracle815
2006/10/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
如何在PHP中读写文件
2020/09/07 PHP
eval的两组性能测试数据
2012/08/17 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
本科应届生求职信
2014/08/05 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书