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

网络编程 2024/9/22 佚名

2 0 1

金狮镖局 Design By www.egabc.com

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

Js基础变量类型

在 JS 中，有 5 种基本数据类型和 1 种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：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

可以看到，NaN和Infinity都检查为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判断变量类型的资料请关注其它相关文章！

JS,判断变量,JS,变量类型

标签：

JS,判断变量,JS,变量类型

金狮镖局 Design By www.egabc.com

金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

金狮镖局 Design By www.egabc.com

评论“JS中准确判断变量类型的方法”

暂无JS中准确判断变量类型的方法的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

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

JS,判断变量,JS,变量类型

js简单实现自动生成表格功能示例

Vuex中的Mutations的具体使用方法

评论“JS中准确判断变量类型的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接