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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
vue实现图书管理系统
Dec 29 Vue.js
用JS创建一个录屏功能
Nov 11 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
7个有用的jQuery代码片段分享
2015/05/19 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python实现哈希表
2014/02/07 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
python中的global关键字的使用方法
2019/08/20 Python
详解Python time库的使用
2019/10/10 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
机电一体化求职信
2014/03/10 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js