浅谈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 判断函数类型完美解决方案
Sep 02 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php短信接口代码
2016/05/13 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python plotly画柱状图代码实例
2019/12/13 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
公司开业庆典主持词
2014/03/21 职场文书
食品安全宣传标语
2014/06/07 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
悬空寺导游词
2015/02/05 职场文书
R9700摩机记
2022/04/05 无线电