浅谈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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
js生成word中图片处理方法
Jan 06 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
小程序实现锚点滑动效果
Sep 23 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP中常用的魔术方法
2017/04/28 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
django实现用户注册实例讲解
2019/10/30 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
python中pivot()函数基础知识点
2021/01/03 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
企业文化宣传标语
2014/06/09 职场文书
办公室禁烟通知
2015/04/23 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis