js 准确判断数据类型(终极方案)

2023-06-23 11:11:00 浏览数 (1)

前言

要判断JavaScript中的数据类型,首先得弄懂JavaScript中有哪些数据类型。然后还要知道在 JavaScript 中可以判断数据类型的有typeofinstanceof 这些,并且知道其不足,最终通过自己封装的方法来终极解决。

JavaScript中的数据类型有哪些

我把 js 中的数据类型大致分为基本数据类型(原始值)、引用类型这两种。

基本数据类型:

  • Number (数值,包括 NaN)
  • String (字符串)
  • Boolean (布尔类型)
  • Undefined (未定义或未初始化)
  • Null (空对象)
  • Symbol(唯一且不可变,可用做Object属性key)
  • BigInt(大整数,可表示容易精度的整型)

引用类型:

  • Object 对象
  • Array 数组
  • Function 函数
  • ...

typeof

typeof 运算符返回一个表示数据类型的字符串,用来判断基本数据类型(除 Null 外)

代码语言:javascript复制
console.log(typeof 1)	        // number
console.log(typeof '1')	        // string
console.log(typeof true)        // boolean
console.log(typeof undefined)	// undefined
console.log(typeof BigInt(1))   // bigint

// 判断 null的时候会返回 object ,这个是js这个语言设计的缺陷
console.log(typeof null)  // object

typeof 缺点是不能正确的判断 null 类型

instanceof

instanceof 只能用来判断构造函数的 prototype 属性能否在某个实例对象的原型链上找到

代码语言:javascript复制
function Person(name) {
    this.name = name
}

const person1 = new Person('andy hu');

console.log(person1 instanceof Person)	 // true

终极方案:自己封装方法

代码语言:javascript复制
const getDataType = (value) => {
  if (value == null) return value   '';
  return typeof value === 'function' || typeof value === 'object' ?
    Object.prototype.toString.call(value).match(/^[object (. )]$/)[1].toLowerCase() : typeof value
}

先判断如果是 null 则直接返回 null 字符串,再通过 typeof 判断,如果是基本数据类型(除 null 外)则返回正确类型,然后判断通过 Object.prototype.toString.call() 返回的所有类型都是 [object xx] ,我们只需要截取这个 xx,这个就是数据的真正类型。最后我们通过正则获取到 xx ,因为类型的字符串是小写字母,通过 tolowerCase 转换成小写。这些就能完美解决 typeof 判断数据类型的缺陷了。

0 人点赞