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 相关文章推荐
jquery 图片上传按比例预览插件集合
May 28 Javascript
JS与C#编码解码
Dec 03 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
四议两公开实施方案
2014/03/28 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
学雷锋倡议书
2015/01/19 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
污水处理保证书
2015/05/09 职场文书
门面租赁合同范文
2019/08/06 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
详解Redis集群搭建的三种方式
2021/05/31 Redis
Python使用openpyxl批量处理数据
2021/06/23 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python