JS 数据类型判断

114 阅读2分钟

JavaScript 数据类型 MDN

方法

JavaScript 提供了三种方法,用来确定一个值到底是什么类型:

  • typeof 运算符
  • instanceof 运算符
  • Object.prototype.toString 方法

typeof 运算符

typeof 运算符用来返回一个值的数据类型的字符串表示

  • 数值、字符串、布尔值、undefined(bigint、symbol 新增)
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
typeof undefined // "undefined"
  • 特别的 null、function
typeof null // "object" //null通常被认为是一个空的对象的引用。
typeof fn // "function"
  • functionarray 同属于对象 object 类型,根据 MDN 文档

如果我们希望检查任何从 Object 派生出来的结构类型,使用 typeof 是不起作用的,因为总是会得到 "object"。检查 Object 种类的合适方式是使用 instanceof 关键字。但即使这样也存在误差。

  • 用例

实际编程中,typeof 常用来检查一个没有声明的变量,而不报错

// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

instanceof 运算符

instanceof 运算符返回一个布尔值,表示对象是否为某个构造函数的实例

instanceof 运算符的左边是实例对象,右边是构造函数

instanceof 的作用:会检查右边构造函数的原型对象(prototype 指向的对象),是否在左边对象的原型链上。因此,下面两种写法是等价的。

man instanceof Man
// 等同于
Man.prototype.isPrototypeOf(man)
  • 可以用来判断 arrayfunctionobject 类型
let a = [];
let b = {};
let fn = () => {}
a instanceof Array // true
b instanceof Object // true
fn instanceof Function // true
  • 用例

可以利用 instanceof 运算符,巧妙地解决调用构造函数时忘了加 new 命令的问题

function Fn (foo, bar) {
  if (this instanceof Fn) {
    this._foo = foo;
    this._bar = bar;
  } else {
    return new Fn(foo, bar);
  }
}

Object.prototype.toString

Object 原型的 toString() 方法返回一个表示该对象的字符串,类似 "[object Object]" 的格式

最好调用 Object.protorype.toString 方法,因为数组、字符串、函数等通常自定义了 toString 方法:

let arr=[1,2];

//直接对一个数组调用 toString() 方法
arr.toString();// "1,2"

//通过call指定arr数组调用Object.prototype对象上原始的toString方法
Object.prototype.toString.call(arr); //"[object Array]"

所有只有 Object.prototype 上的 toString 才能用来进行数据类型的判断,而不是 ArrayFunction重写toString 方法

  • Object.prototype.toString 判断类型
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]