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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 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 文章调用类代码
2011/08/11 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Vue.js实现表格渲染的方法
2018/09/07 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Python贪心算法实例小结
2018/04/22 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python for循环中的陷阱详解
2018/07/13 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
keras多显卡训练方式
2020/06/10 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
合伙经营协议书
2014/04/18 职场文书
行政求职信
2014/07/04 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
学年个人总结范文
2015/03/05 职场文书
团员自我评价范文
2015/03/10 职场文书
python turtle绘图命令及案例
2021/11/23 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技