判断类型

107 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情

在JavaScript中,经常需要判断变量的类型,而判断类型的方法有很多,那么在使用这些方法的时候该注意哪些问题呢,这篇文章主要就是介绍一下不同的判断方法的应用场景。

typeof

typeof 运算符返回一个字符串,表示操作数的类型。

1. 常见用法

console.log(typeof '123');   // 'string'
console.log(typeof 123);     // 'number'
console.log(typeof true);    // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);   // 'object'
console.log(typeof 42n);     // 'bigInt'
console.log(typeof Symbol());    // 'symbol'
console.log(typeof NaN);   // 'number'
console.log(new Date());     // 'object'
console.log([1, 2, 3]);    // 'object'
console.log({a: 3});   // 'object'
console.log(function() {});   // 'function'

2. 应用特点

从上面的打印信息可以看出,对于基本类型变量来说,除了null之外都能正常返回,对于引用类型变量来说,除了function之外都返回object.

  • 适用于判断基本类型变量的类型,当然注意区分null
  • 对于需要判断引用类型的变量类型不适用

instanceOf

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。也就是判断instanceof左边变量是不是instanceof右边变量的实例。

1. 常用用法

console.log([1,2] instanceof Array);   // true
console.log({a: 3} instanceof Object);     // true
console.log(function() {} instanceof Function);    // true
console.log(new Date() instanceof Date);   // true
console.log('123' instanceof String);   // false
console.log(new String('123') instanceof String);   // false
console.log(null instanceof Null);   // 报错
console.log(undefined instanceof Undefined);   // 报错

2. 应用特点

从上面的打印信息可以看出来,instanceof是用来判断是否是构造函数的实例的,对于基础类型变量不适用

  • 适用于判断内置对象的类型

Object.prototype.toString()

toString()  方法返回一个表示该对象的字符串。

1. 常用用法

// 基本类型
Object.prototype.toString.call(123) // "[object Number]"
Object.prototype.toString.call('123') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(42n) // "[object BigInt]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(true) // "[object Boolean]

// 引用类型
Object.prototype.toString.call({a:3}) // "[object Object]"
Object.prototype.toString.call([1, 23]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(function(){}) // "[object Function]"

2. 应用特点

从上面的打印信息来看,Object.prototype.toString()既可以判读基本类型的变量的类型,也可以判断引用类型的变量的类型。

  • 适用于所有的js类型的变量的类型判断

constructor

constructor 属性返回 Object 的构造函数(用于创建实例对象)。

1. 常用用法

从定义我们就可以看出,constructor只适用于判断引用类型。

console.log([1,2].constructor);   // ƒ Array() { [native code] }
console.log([1,2].constructor == Array);   // true
console.log({a: 3}.constructor);     // ƒ Object() { [native code] }
console.log(function() {}.constructor);    // ƒ Function() { [native code] }
console.log(new Date().constructor);   // ƒ Date() { [native code] }
console.log('123'.constructor);   // ƒ String() { [native code] }
console.log(new String('123').constructor);   // ƒ String() { [native code] }
console.log(null.constructor);   // 报错
console.log(undefined.constructor);   // 报错

可以直接判断构造函数,或者直接取构造函数 == Array这种。

2. 应用特点

  • 适用于判断基本类型(除null和undefined之外),也适用于判断对象类型

总结

如果想要很准确的判断所有的数据类型的话,最准备的还是Object.prototype.toString.call().