浅谈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电信网通双线自动选择技巧
Nov 18 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
简单JS代码压缩器
2006/10/12 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python中p-value的实现方式
2019/12/16 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
pytorch中的inference使用实例
2020/02/20 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
家长会学生演讲稿
2014/04/26 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
党员年终个人总结
2015/02/14 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
导游词之介休绵山
2019/12/31 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技