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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
vue 实现锚点功能操作
Aug 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP静态成员变量
2017/02/14 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python 正则表达式(转义问题)
2014/12/15 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python交易记录链的实现过程详解
2019/07/03 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
工程班组长岗位职责
2013/12/30 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
超市督导岗位职责
2015/04/10 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
车位出租协议书范本
2016/03/19 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python