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各浏览器中option元素的表现差异
Apr 07 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
js密码强度校验
2015/11/10 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
用JS实现选项卡
2020/03/23 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
判断网页编码的方法python版
2016/08/12 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
django使用xadmin的全局配置详解
2019/11/15 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用python实现学生信息管理系统
2021/02/25 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
2014年工作总结及2015工作计划
2014/12/12 职场文书
大学毕业生个人总结
2015/02/28 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
无线电通信名词解释
2022/02/18 无线电
最新最全的手机号验证正则表达式
2022/02/24 Javascript