浅谈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 贪吃蛇实现代码
Nov 22 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
React Router基础使用
Jan 17 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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模块memcache和memcached区别分析
2011/06/14 PHP
解析argc argv在php中的应用
2013/06/24 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
PHP实现简单的计算器
2020/08/28 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python help()函数用法详解
2014/03/11 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
pytorch 修改预训练model实例
2020/01/18 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
禁毒心得体会范文
2016/01/15 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA