浅谈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 21 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python并发编程之线程实例解析
2017/12/27 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python中一行和多行import模块问题
2018/04/01 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python实现点云投影到平面显示
2020/01/18 Python
django和flask哪个值得研究学习
2020/07/31 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
linux下进程间通信的方式
2013/01/23 面试题
检举信的格式及范文
2014/04/04 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
离婚协议书的范本
2015/01/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
早恋主题班会
2015/08/14 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server