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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
微信小程序 navbar实例详解
May 11 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Vue中图片Src使用变量的方法
2019/10/30 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python视频按帧截取图片工具
2019/07/23 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
初一家长会邀请函
2014/01/31 职场文书
二年级语文教学反思
2014/02/02 职场文书
师德师风个人反思
2014/04/28 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
学校师德师风整改方案
2014/10/28 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
Nginx配置https的实现
2021/11/27 Servers