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 相关文章推荐
jQuery的context属性用法实例
Dec 27 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
vue中进行微博分享的实例讲解
Oct 14 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP中常用的转义函数
2014/02/28 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python I/O与进程的详细讲解
2019/03/08 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
诚信承诺书模板
2014/05/26 职场文书
总经理任命书范本
2014/06/05 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
检讨书格式范文
2015/05/07 职场文书
资金申请报告范文
2015/05/14 职场文书
超市主管竞聘书
2015/09/15 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript