JS中准确判断变量类型的方法


Posted in Javascript onJune 01, 2020

这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型。从1. JS基础变量类型。2. Js中判断变量的函数。 3. 实现getValType函数。3个方面来分析实现。

Js基础变量类型

JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, NumberString;复杂数据类型是ObjectObject中还细分了很多具体的类型,比如:Array, Function, Date等等。

判断变量的函数

我们先定义一组变量来用下面的函数来测试:

var allVarMap = {
 // 数字
 num:123,
 // Infinity
 num1: 1 / 0,
 // NaN
 num2: null / 0,
 // 字符串
 str: 'abcdef',
 // 布尔类型
 bool: true,
 // 数组
 arr :[1, 2, 3, 4],
 // json对象
 json :{name:'wenzi', age:25},
 // 函数
 func:function(){ console.log('this is function'); },
 // 箭头函数
 func1: () => {console.log('arrow function')},
 // undefined类型
 und:undefined,
 // null类型
 nul:null,
 // date类型
 date:new Date(),
 // 正则表达式
 reg :/^[a-zA-Z]{5,20}$/,
 // 异常类型
 error:new Error()
}

typeof判断变量类型

typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回object。我们用该函数来判断上面的结果:

var results = []
for (let i in allVarMap) {
	results.push(typeof allVarMap[i])
}
console.log(results.join())
// number,number,number,string,boolean,object,object,function,function,undefined,object,object,object,object

可以看到,NaNInfinity都检查为number类型,其他的 string,function,boolean,undefined包括箭头函数都能正确检查出来,但是对于reg,date,null都得到了object。看来还需要具体的判断。

instanceof检查

ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与typeof 运算符相似,用于识别正在处理的对象的类型。instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。与 typeof 方法不同的是,instanceof方法要求开发者明确地确认对象为某特定类型。

console.log(allVarMap.date instanceof Date) // true
console.log(allVarMap.func instanceof Function) // true

可以看到instanceof可以正确判断出date,func的类型,但是前提是已知该变量的类型,所以这里不符合我们的预期。

使用Object.prototype.toString.call

定义:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于”[object Array]“的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。
我们看看下面的函数运行结果:

var results = []
for (let i in allVarMap) {
	results.push(Object.prototype.toString.call(allVarMap[i]))
}
console.log(results.join())
// [object Number],[object Number],[object Number],[object String],[object Boolean],[object Array],[object Object],[object Function],[object Function],[object Undefined],[object Null],[object Date],[object RegExp],[object Error]

实现getValType函数

根据上面的分析,我们可以先用typeOf函数判断出基础类型number,string,function,boolean,undefined。然后如果结果是object,我们再用Object.prototype.toString.call来判断出具体的类型。

var getVarType = function (val = 0) {
	var type = typeof val
	// object需要使用Object.prototype.toString.call判断
	if (type === 'object') {
		var typeStr = Object.prototype.toString.call(val)
		// 解析[object String]
		typeStr = typeStr.split(' ')[1]
		type = typeStr.substring(0, typeStr.length - 1)
	}
	return type
}
var results = []
for (let i in allVarMap) {
	results.push(getVarType(allVarMap[i]))
}
console.log(results.join())
// number,number,number,string,boolean,Array,Object,function,function,number,Null,Date,RegExp,Error

可以看到,完美判断出了所有变量的类型,该函数可以再添加一些逻辑,判断一个变量是否是NaN,Infinity之类的特殊需求。

总结

1 typeOf能判断出一个变量的类型,但是只能判断出number,string,function,boolean,undefined,null和其他对象类型返回结果都为object.

2 instanceof能判断出一个对象是否是另一个类的实例。

3 Object.prototype.toString.call能判断出所有变量的类型,返回值为[Object ***]

以上就是一文看懂在JS中准备判断变量类型的详细内容,更多关于JS判断变量类型的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 在firebug调试时用console.log的方法
May 10 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
简单的分页代码js实现
May 17 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
js实现微信聊天界面
Aug 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python中模块string.py详解
2017/03/12 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python控制Firefox方法总结
2019/06/03 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
土木工程毕业生自荐信
2013/11/12 职场文书
大一新生学期自我评价
2014/04/09 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
技术入股合作协议书
2016/03/21 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL