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中有关IE版本检测
Jan 04 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
javascript 数组精简技巧小结
Feb 26 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 $_SERVER["REQUEST_URI"]获取值的通用解决方法
2010/06/21 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP计数器的实现代码
2013/06/08 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php数据访问之查询关键字
2016/05/09 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
python构建自定义回调函数详解
2017/06/20 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python列表对象实现原理详解
2019/07/01 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
小加工厂管理制度
2014/01/21 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
夏季药店促销方案
2014/08/22 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP