JavaScript 的数据类型检测是我们平时开发中经常会遇到的场景,小到基本数据类型大至各种引用数据类型的检测,都是我们需要掌握的知识点。本章会详细讲解 JavaScript 中各种不同数据类型的检测方法以及最后会实现一个数据类型检测的终极方法。

红宝石书告诉我们,JavaScript 中的数据类型有 Undefined、Null、Boolean、Number、String、Object,其中前五种是基本类型,而 Object 是引用类型。实际上,Object 中还包含了其它更为具体的引用类型,如 Array、Function、Date、RegExp、Error、Arguments 等。

在本章的叙述中,我都会以上述 12 种数据类型为基础来说明不同的检测方式(实际上 JavaScript 中数据类型不止 12 种,其它数据类型我们鲜少碰到,所以在此就不多做赘述啦)。

我们通常用来检测数据类型的方法,分别是 typeofObject.prototype.toString,让我们仔细来看看这两个方法。

typeof

MDN 中的叙述是,typeof 操作符返回一个字符串,表示未经计算的操作数的类型。

其使用方式是 typeof operand 或 typeof(operand),operand 是一个表达式,表示对象或原始值,其类型将被返回,返回值是表示其数据类型的字符串的小写形式。

那么让我们直接来看一下上述的 12 种数据类型使用 typeof 来检测后返回值分别是什么:

var und=undefined;
var nul=null;
var boo=true;
var num=1;
var str='xys'
var obj=new Object();
var arr=[1,2,3];
var fun=function(){}
var date=new Date();
var reg = /a/g;
var err=new Error()
var arg;
(function getArg(){arg=arguments;
})();console.log(typeof und);  // undefined
console.log(typeof nul);  // object
console.log(typeof boo);  // boolean
console.log(typeof num);  // number
console.log(typeof str);  // string
console.log(typeof obj);  // object
console.log(typeof arr);  // object
console.log(typeof fun);  // function
console.log(typeof date);  // object
console.log(typeof reg);  // object
console.log(typeof err);  // object
console.log(typeof arg);  // object
复制代码

可以看到,使用 typeof 方法来检测数据类型,基本类型大部分都能被准确检测并返回正确的字符串(除了 Null 类型,其返回 object 字符串),而引用类型大部分都不能够被准确检测(除了 Function 类型能够准确返回 function 字符串外,其它的都返回了 object 字符串)。

由此可得,typeof 方法并不能够完全精准地检测出上述 JavaScript 中的 12 中数据类型。

Object.prototype.toString

ES5 规范中是这么描述 Object.prototype.toString 的:

可以知道,Object.prototype.toString 最终会返回形式如 [object,class] 的字符串,class 指代的是其检测出的数据类型,这个是我们判断数据类型的关键。

同样的,让我们来看下使用 Object.prototype.toString 来检测上述列举到的 12 种数据类型都会返回什么样的结果:

var toString=Object.prototype.toString;console.log(toString.call(und));  // [object Undefined]
console.log(toString.call(nul));  // [object Null]
console.log(toString.call(boo));  // [object Boolean]
console.log(toString.call(num));  // [object Number]
console.log(toString.call(str));  // [object String]
console.log(toString.call(obj));  // [object Object]
console.log(toString.call(arr));  // [object Array]
console.log(toString.call(fun));  // [object Function]
console.log(toString.call(date));  // [object Date]
console.log(toString.call(reg));  // [object RegExp]
console.log(toString.call(err));  // [object Error]
console.log(toString.call(arg));  // [object Arguments]
复制代码

可以看到,Object.prototype.toString 返回的 [object,class] 字符串中,class 准确的表示了各个数据的类型,与 typeof 不同的是,class 所代表的数据类型字符串首字母是大写的,而不像 typeof 返回的是小写字符串。

数据类型检测终极方法

通过上述对两个检测数据类型方法的介绍,我们知道 typeof 能够被用来检测除 Null 类型外的其它基本类型,并且能够检测出引用类型中 Function 数据类型,而 Object.prototype.toString 能够检测出所有的数据类型,所以我们可以结合这两个方法来实现一个 JavaScript 数据类型检测的终极方法。

/*** @desc 数据类型检测* @param obj 待检测的数据* @return {String} 类型字符串*/
function type(obj) {return typeof obj !== "object" ? typeof obj : Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
复制代码

数据类型的单独检测

有时我们希望直接判断一个数据是否是某个类型,那么我们可以单独实现这些判断某个数据类型的函数,这里直接给出各个函数的实现代码,需要的童鞋可以直接使用。

/*** @desc 是否是 Undefined 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isUndefined(obj) {return obj === void 0;
}
/*** @desc 是否是 Null 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isNull(obj) {return obj === null;
}
/*** @desc 是否是 Boolean 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isBoolean(obj) {return typeof(obj) === 'boolean';
}
/*** @desc 是否是 Number 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isNumber(obj) {return typeof(obj) === 'number';
}
/*** @desc 是否是 String 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isString(obj) {return typeof(obj) === 'string';
}
/*** @desc 是否是 Object 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isObject(obj) {return Object.prototype.toString.call(obj) === '[object Object]';
}
/*** @desc 是否是 Array 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isArray(obj){return Array.isArray?Array.isArray(obj):Object.prototype.toString.call(obj) === '[object Array]';
}
/*** @desc 是否是 Function 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isFunction(obj){return typeof(obj) === 'function';
}
/*** @desc 是否是 Date 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isDate(obj){return Object.prototype.toString.call(obj) === '[object Date]';
}
/*** @desc 是否是 RegExp 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isRegExp(obj){return Object.prototype.toString.call(obj) === '[object RegExp]';
}
/*** @desc 是否是 Error 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isError(obj){return Object.prototype.toString.call(obj) === '[object Error]';
}
/*** @desc 是否是 Arguments 类型检测* @param obj 待检测的数据* @return {Boolean} 布尔值*/
function isArguments(obj){return Object.prototype.toString.call(obj) === '[object Arguments]';
}
复制代码

不定时分享个人在前端方面的学习经验,觉得还不错的小伙伴,可以关注一波公众号哦。

JavaScript 数据类型检测终极解决方案相关推荐

  1. JavaScript数据类型检测总结

    2019独角兽企业重金招聘Python工程师标准>>> 在js中,有四种用于检测数据类型的方式,分别是: typeof 用来检测数据类型的运算符 instanceof 检测一个实例是 ...

  2. 极速版JavaScript学习-数据类型检测

    目录 为什么要检测数据类型? 关键字-typeof 为什么要检测数据类型? 数据类型检测是一种编程技术,它可以在程序运行过程中检测变量的数据类型以确保其与预期的数据类型相匹配.数据类型检测的主要目的是 ...

  3. JavaScript中的数据类型检测原理

    专题汇总-数据类型检测 typeof instanceof & constructor Object.prototype.toString.call([value]) 封装一个数据类型检测的方 ...

  4. 静态页转换平台(StaticPol)-静态页生成终极解决方案

    我本身非常不喜欢写文字材料,但是这个东西相信是很多人都需要的,把心得写出来和大家分享一下,也好让大家都努力PP,以助于尽快完善这个东东,早日贴出来供大家下载使用. 为什么要生成静态页? 这个问题咱们就 ...

  5. 静态页转换平台(StaticPol)-静态页生成终极解决方案(转)

    静态页转换平台(StaticPol)-静态页生成终极解决方案(转) from  http://www.cnblogs.com/pbwf/ 我本身非常不喜欢写文字材料,但是这个东西相信是很多人都需要的, ...

  6. 小图标文字对齐的终极解决方案

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5264 一.一切从l ...

  7. JavaScript数据类型 typeof, null, 和 undefined

    JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  8. 宁德时代:8-12 万元区间车型终极解决方案是巧克力换电

    2月16日消息,昨日晚间,宁德时代在深交所互动平台发布最新投资者关系活动记录表.调研纪要显示,该投资者关系活动于2月14日举行,宁德时代董事长曾毓群.董事会秘书兼副总经理蒋理.财务总监郑舒,以及高瓴资 ...

  9. 18100出多少取整_关于JavaScript数据类型,你知道多少?

    JavaScript的数据类型是每一个前端开发者必须要掌握的内容,也是最基础最重要的角色之一,关于JavaScript数据类型你知道多少? JavaScript一共有7种数据类型:String.Num ...

  10. JavaScript筑基篇(二)-JavaScript数据类型

    说明 介绍JavaScript数据类型 目录 前言 参考来源 前置技术要求 JavaScript的6种数据类型 哪6种数据类型 undefined 类型 null 类型 boolean 类型 numb ...

最新文章

  1. ASP.NET2.0 ReportingServices使用详解
  2. 南通专转本计算机考试几级,江苏专转本考试了解多少?
  3. linux系统中怎么驱动U盘
  4. day 0314函数的进阶
  5. php 通过类名获取类的文件地址
  6. 第1次作业:阅读优秀博文谈感想
  7. 计算机编程方程求解的步骤,计算机解决问题的过程PPT学习课件
  8. abp.net mysql_ABP .Net Core Entity Framework迁移使用MySql数据库
  9. s:url多值传递的时候出现;amp
  10. 深度学习TensorFlow生产环境部署(环境准备篇)
  11. Mac触发角锁屏不睡眠
  12. CAN LIN CANOE DB9 接口定义
  13. 联合概率分布与边缘分布
  14. Jimmy Nilsson-应用领域驱动设计和企业应用架构模式-UMLChina讲座-音频和幻灯
  15. 获取基金数据python库_PYTHON爬取基金数据及基金筛选
  16. 阐述篇-聊聊我眼中の《面试宝典》
  17. 华硕笔记本电脑重装系统教程,华硕笔记本系统重装教程
  18. AR/VR应用前景探讨
  19. 各种后缀名--使用什么软件打开
  20. Fragment与Activity之间的完美邂逅

热门文章

  1. python 科学计算思维导图
  2. 分享一个前辈的NPOIhelper
  3. Swift给每个开发者赢取500万的机会!不看一生后悔。
  4. 推荐几款好用的CRM
  5. 在个人机上发布web项目
  6. java随机数Reandom(简单介绍)
  7. FPM打包工具 可以把源码包制定为rpm包 是自动化部署的环节
  8. 我开通个人博客了~~~~
  9. loadrunner中定义数组
  10. Double binary trees