浅谈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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
javascript操作数组详解
Dec 17 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
jQuery Ajax全解析
Feb 13 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
详解vue身份认证管理和租户管理
May 25 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
PHP教程 变量定义
2009/10/23 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
基于python生成器封装的协程类
2019/03/20 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python 制作网站小说下载器
2021/02/20 Python
生产内勤岗位职责
2013/12/07 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
优秀教师事迹材料
2014/12/15 职场文书
工程项目合作意向书
2015/05/08 职场文书
投资申请报告
2015/05/19 职场文书
新兵入伍决心书
2015/09/22 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python3接口性能测试实例代码
2021/06/20 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
python神经网络 使用Keras构建RNN训练
2022/05/04 Python