JavaScript中判断数据类型的方法总结


Posted in Javascript onMay 24, 2016

typeof
typeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量。假如你做如下判断:

//haorooms是全局变量
if(haorooms!=undefined){
}//js会报错,说"Uncaught ReferenceError: haorooms is not defined"

解决的方法是我们如下写:

if(typeof haorooms!=undefined){
 }

用了typeof之后,就不会报错了!这是typeof的应用之一!

此外,typeof还可以进行数据类型的判断!如下:

var haorooms="string"; console.log(haorooms); //string
var haorooms=1; console.log(haorooms); //number
var haorooms=false; console.log(haorooms); //boolean
var haorooms; console.log(typeof haorooms); //undfined

var haorooms= null; console.log(typeof haorooms); //object
var haorooms = document; console.log(typeof haorooms); //object
var haorooms = []; console.log(haorooms); //object
var haorooms = function(){}; console.log(typeof haorooms) //function  除了可以判断数据类型还可以判断function类型

很明显,对于typeof,除了前四个类型外,null、对象、数组返回的都是object类型;

instanceof
可以用其判断是否是数组。

var haorooms=[];
console.log(haorooms instanceof Array) //返回true

constructor
constructor就是返回对象相对应的构造函数。
判断各种数据类型的方法:

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

function employee(name,job,born){
  this.name=name;
  this.job=job;
  this.born=born; }

var haorooms=new employee("Bill Gates","Engineer",1985); 
console.log(haorooms.constructor); //输出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}

通过输出haorooms.constructor,可以看出constructor就是返回对象相对应的构造函数。

Object.prototype.toString
前面我们提到了可以运用 constructor 属性来判定物件类型,让我们再来讲讲 Object.protype.toString 这个方法

Object.prototype.toString.apply({}) // "[object Object]"
Object.prototype.toString.apply([]) // "[object Array]"
Object.prototype.toString.apply(NaN)// "[object Number]"
Object.prototype.toString.apply(function(){}) // "[object Function]"

运用这种方式我们可以正确的判断一个变量的基本型态,但是如果是自订类型的话,却无法得知真正的类型,因为结果依然会是 [object Object]

其他
jQuery 也有类型判断的方法,下面是一例

$.isWindow(window) // true

怎么做的呢

core.js#479
isWindow: function( obj ) {
  return obj != null && obj == obj.window;
}

所以开一个这样的 Object:

var fakeWindow;
fakeWindow = {};
fakeWindow.window = fakeWindow;
$.isWindow(fakeWindow) // true

你就骗过他了。

小结
在 JavaScript 中要正确判断类型,当仔细去钻研的时候,真是一件麻烦事,根据不同的情境去设计你的判断式是相当重要的,我们也必须要去思考如何用最简洁的方式判断正确的类型,当然这篇还有很多地方没有介绍到,例如 isPrototypeOf 这个方法,JavaScript 是一个有许多历史包袱的语言,但也是不断的在进步,运用它的时候,要注意,有太多的方式是双面刃,切记要小心运用。

Javascript 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
js异步接口并发数量控制的方法示例
Nov 22 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 #Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 #Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 #Javascript
原生js的数组除重复简单实例
May 24 #Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 #Javascript
json传值以及ajax接收详解
May 24 #Javascript
JS获取屏幕高度的简单实现代码
May 24 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
详解JavaScript树结构
2017/01/09 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python中有趣在__call__函数
2015/06/21 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
python daemon守护进程实现
2016/08/27 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
档案室主任岗位职责
2014/02/12 职场文书
市场营销求职信范文
2014/02/21 职场文书
货车司机岗位职责
2014/03/18 职场文书
大学军训口号大全
2015/12/24 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript