js 中如何准确的判断一个变量的类型?

这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数 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 ***]
  • typeof
    1 引用
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    585 引用 • 1097 回帖 • 770 关注
回帖
请输入回帖内容...