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下操作HTML控件的实现代码
Jan 12 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
建立动态的WML站点(三)
2006/10/09 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
分享php多功能图片处理类
2016/05/15 PHP
php实现数据库的增删改查
2017/02/26 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
轮播的简单实现方法
2016/07/28 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
什么是TCP/IP
2014/07/27 面试题
教师自我鉴定
2013/12/13 职场文书
投标邀请书范本
2015/02/02 职场文书
2016七夕情人节感言
2015/12/09 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS