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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
webpack3+React 的配置全解
Aug 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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 gzip压缩输出的实现方法
2013/04/27 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python实现聚类算法原理
2018/02/12 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
mysql insert 存在即不插入语法说明
2022/03/25 MySQL