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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
React-Native中props具体使用详解
Sep 04 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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/07/17 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python简易版停车管理系统
2019/08/12 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python decimal模块使用方法详解
2020/06/08 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
什么是Web Service?
2012/07/25 面试题
办公室文员工作职责
2014/01/31 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书