浅谈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实现控制台控件的代码
Sep 04 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
AngularJS入门之动画
Jul 27 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
小程序自定义轮播图圆点组件
Jun 25 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引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
简单易懂的python环境安装教程
2017/07/13 Python
Python代码实现KNN算法
2017/12/20 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python判断设备是否联网的方法
2018/06/29 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
django+echart数据动态显示的例子
2019/08/12 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
总经理的岗位职责
2014/02/23 职场文书
品质主管岗位职责
2014/03/16 职场文书
小学评语大全
2014/04/22 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
MySQL的索引你了解吗
2022/03/13 MySQL