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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JavaScript实现网页下拉菜单效果
Nov 20 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python使用爬虫猜密码
2016/02/19 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
大客户销售经理职责
2013/12/04 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
三八妇女节标语
2014/10/09 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android