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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
openlayers4实现点动态扩散
Aug 17 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常用处理静态操作类
2015/04/03 PHP
thinkphp分页集成实例
2017/07/24 PHP
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
详解AngularJS 过滤器的使用
2018/06/02 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python求导数的方法
2015/05/09 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python实现动态数组的示例代码
2019/07/15 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
小区门卫管理制度
2014/01/29 职场文书
部队党性分析材料
2014/02/16 职场文书
代办委托书怎么写
2014/08/01 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python