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 相关文章推荐
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
React实现todolist功能
Dec 28 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
python中list循环语句用法实例
2014/11/10 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
简单实现Python爬取网络图片
2018/04/01 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
4s店市场专员岗位职责
2014/04/09 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
小学家长通知书评语
2014/12/31 职场文书
英文辞职信范文
2015/05/13 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android