欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 18:02:54
这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getvaltype(val)用来获取一个变量的类型。从1. js基础变量类型。2. js中判断变量的函数。 3. 实现getvalt...

这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数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判断变量类型的资料请关注其它相关文章!