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 相关文章推荐
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
js select实现省市区联动选择
Apr 17 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
安装vue-cli的简易过程
May 22 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
JSON 数据格式介绍
2012/01/13 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python获取外网ip地址的方法总结
2015/07/02 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
详细分析python3的reduce函数
2017/12/05 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
百度吧主申请感言
2014/01/12 职场文书
《值日生》教学反思
2014/02/17 职场文书
教师产假请假条范文
2014/04/10 职场文书
拓展策划方案
2014/06/03 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
行政上诉状范文
2015/05/23 职场文书
高中同学会致辞
2015/08/01 职场文书
导游词之南京夫子庙
2019/12/09 职场文书