浅谈javascript的数据类型检测


Posted in Javascript onJuly 10, 2010

一、javascript的数据
javascript的数据分为两种:简单数据和复杂数据。简单数据包含number,string,boolean,undefined和null这五种;复杂数据只有一种即object。【此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了】

二、javascript的数据类型检测
1、万能的typeof
我们先测试一下通过typeof来获取简单数据类型。什么也别说了,上代码是王道:

// 获取变量obj的数据类型 
function getType(obj) { 
return typeof (obj); 
} 
/*常量获取类型*/ 
alert(getType(1)); //number 
alert(getType("jeff wong")); //string 
alert(getType(true)); //boolean 
alert(getType(undefined)); //undefined 
alert(getType(null)); //object 
/*变量获取类型*/ 
var num = 1; 
var str = "jeff wong"; 
var flag = true; 
var hell = undefined; 
var none = null; 
alert(getType(num)); //number 
alert(getType(str)); //string 
alert(getType(flag)); //boolean 
alert(getType(hell)); //undefined 
alert(getType(none)); //object

正如你所看到的那样,通过typeof运算符,前面四个简单数据类型完全在意料之中,但是typeof null却返回object。应该注意到,null是null类型的唯一值,但null并不是object,具有null值的变量也并非object,所以直接通过typeof,并不能正确得到null类型。 要正确获取简单数据类型,只要在getType的地方加点改进就可以了:
function getType(obj) { 
return (obj === null) ? "null" : typeof (obj); 
}

接着来试一下复杂数据类型object:
function Cat() { 
} 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
// 获取变量obj的数据类型 
function getType(obj) { 
return (obj === null) ? "null" : typeof (obj); 
} 
var obj = new Object(); 
alert(getType(obj)); //object 
var func = new Function(); 
alert(getType(func)); //function 
var str = new String("jeff wong"); 
alert(getType(str)); //object 
var num = new Number(10); 
alert(getType(num)); //object 
var time = new Date(); 
alert(getType(time)); //object 
var arr = new Array(); 
alert(getType(arr)); //object 
var reg = new RegExp(); 
alert(getType(reg)); //object 
var garfield = new Cat(); 
alert(getType(garfield)); //object

我们看到,除了Function(请注意大小写)返回了function,不管是javascript的常见内置对象Object,String或者Date等等,还是自定义function,通过typeof返回的无一例外,通通都是object。但是对于自定义function,我们更愿意得到它的“庐山真面目”(示例中即Cat,而非object),而显然,typeof不具备这种转换处理能力。
2、constructor,想大声说爱你
既然万能的typeof也有无解的时候,那么我们怎么判断一个变量是否是自定义的function实例呢?我们知道,javascript的所有对象都有一个constructor属性,这个属性可以帮我们判断object数据类型,尤其是对自定义function同样适用:
var obj = "jeff wong"; 
alert(obj.constructor == String); //true 
obj = new Cat(); 
alert(obj.constructor == Cat); //true

但是,下面的代码您也可以测试一下:
//alert(1.constructor); //数字常量 出错 数字常量无constructor 
var num = 1; 
alert(num.constructor == Number); //true 
alert("jeff wong".constructor == String); //true 
var str = "jeff wong"; 
alert(str.constructor == String); //true 
var obj= null; 
alert(obj.constructor); //null没有constructor属性 
none = undefined; 
alert(obj.constructor); //undefined没有constructor属性

实验证明,数字型常量,null和undefined都没有constructor属性。
到这里,您会和楼猪一样庆幸认为终于大功告成了吗?下面的代码或许还能有点启发和挖掘作用:
function Animal() { 
} 
function Cat() { 
} 
Cat.prototype = new Animal(); 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
var obj = new Cat(); 
alert(obj.constructor == Cat); //false ?? 
alert(obj.constructor == Animal); //true 理解

原来对于原型链继承的情况,constuctor也不那么好使了。那怎么办?
3、直观的instanceof
嘿嘿,有请instanceof隆重登场。看它的命名,好像是获取某一个对象的实例,也不知这样理解对不对?不管怎样,我们还是动手改进上面的代码测试一下先:
function Animal() { 
} 
function Cat() { 
} 
Cat.prototype = new Animal(); 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
var garfield = new Cat(); 
alert(garfield instanceof Cat); //true 毫无疑问 
alert(garfield instanceof Animal); //true 可以理解

好了,关于javascript的数据类型检测,楼猪就大致总结介绍到这里了。希望有心的高人补充。
Javascript 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
jquery nth-child()选择器的简单应用
Jul 10 #Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 #Javascript
加载jQuery后$冲突的解决办法
Jul 09 #Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 #Javascript
jquery multiSelect 多选下拉框
Jul 09 #Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 #Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JS继承 笔记
2011/07/13 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python random模块的使用示例
2020/10/10 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年社区工作总结
2014/11/18 职场文书
负责培养人意见
2015/06/05 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
环保证明
2015/06/23 职场文书
2019银行竞聘书
2019/06/21 职场文书