浅谈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 相关文章推荐
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery提示效果实例分析
Nov 25 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python实现俄罗斯方块
2018/06/26 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python 循环数据赋值实例
2019/12/02 Python
python保留小数位的三种实现方法
2020/01/07 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
高级文秘工作总结的自我评价
2013/09/28 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
师德演讲稿范文
2014/05/06 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
单位在职证明书
2014/09/11 职场文书
小学班主任研修日志
2015/11/13 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
go语言中json数据的读取和写出操作
2021/04/28 Golang