深入浅出解读JS判断数据类型的三剑客：toString、typeof、instanceof

2023-09-04 23:54:18

数据类型的本质

在JavaScript中，数据类型是程序员处理信息的工具，用于表示和存储信息。JavaScript的核心数据类型包括字符串（string）、数字（number）、布尔值（boolean）、null、undefined和对象（object），还有一些其他特殊的类型，如symbol。

为什么判断数据类型很重要？

判断数据类型是编程中的一个基本操作，它可以帮助我们根据数据类型进行不同的操作，比如：

比较变量值，确定相等性或大小关系。
决定将变量值赋予哪种类型的变量。
在函数中对参数进行类型检查，以确保参数符合预期的类型。
将数据序列化为JSON格式，以便在网络上传输或存储在数据库中。

JavaScript中的数据类型判断方法

JavaScript提供了三种常用的数据类型判断方法：Object.prototype.toString.call()、typeof和instanceof。这三种方法各有优劣势，适用场景也有所不同，下面我们将一一介绍。

1. Object.prototype.toString.call()

Object.prototype.toString.call()方法可以准确地返回一个对象的类型字符串，格式为：[object Type]，其中Type是对象的类型名称。例如：

Object.prototype.toString.call(1); // "[object Number]"
Object.prototype.toString.call("hello"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call(function() {}); // "[object Function]"
Object.prototype.toString.call([]); // "[object Array]"

Object.prototype.toString.call()方法的优点是准确性高，可以准确地判断出对象的类型，即使是继承自其他对象的类型。例如，以下代码使用Object.prototype.toString.call()方法判断一个继承自Array对象的自定义类型：

class CustomArray extends Array {
  constructor() {
    super();
  }
}

const customArray = new CustomArray();
Object.prototype.toString.call(customArray); // "[object CustomArray]"

Object.prototype.toString.call()方法的缺点是语法相对复杂，需要记忆[object Type]的格式，并且对于内置类型来说，它的返回值并不是类型名称本身，而是[object Type]的形式。

2. typeof

typeof运算符可以返回一个变量的数据类型，返回值有以下几种：

"string"：字符串
"number"：数字
"boolean"：布尔值
"object"：对象
"function"：函数
"undefined"：未定义

typeof运算符的优点是简单易用，语法简洁，并且对于内置类型来说，它的返回值就是类型名称本身。例如：

typeof 1; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof null; // "object"
typeof undefined; // "undefined"
typeof {}; // "object"
typeof function() {}; // "function"
typeof []; // "object"

typeof运算符的缺点是精度较低，对于继承自其他对象的对象，它只能返回"object"，无法区分出对象的具体类型。例如，以下代码使用typeof运算符判断一个继承自Array对象的自定义类型：

class CustomArray extends Array {
  constructor() {
    super();
  }
}

const customArray = new CustomArray();
typeof customArray; // "object"

3. instanceof

instanceof运算符可以判断一个对象是否属于某个类或接口，返回值为true或false。例如：

1 instanceof Number; // true
"hello" instanceof String; // true
true instanceof Boolean; // true
null instanceof Object; // false
undefined instanceof Object; // false
{} instanceof Object; // true
function() {} instanceof Function; // true
[] instanceof Array; // true

instanceof运算符的优点是准确性高，可以准确地判断出一个对象是否属于某个类或接口，即使是继承自其他类的对象。例如，以下代码使用instanceof运算符判断一个继承自Array对象的自定义类型：

class CustomArray extends Array {
  constructor() {
    super();
  }
}

const customArray = new CustomArray();
customArray instanceof Array; // true

instanceof运算符的缺点是不能判断出一个对象的具体类型，只能判断出一个对象是否属于某个类或接口。例如，以下代码使用instanceof运算符判断一个继承自Array对象的自定义类型：

class CustomArray extends Array {
  constructor() {
    super();
  }
}

const customArray = new CustomArray();
customArray instanceof CustomArray; // false

三种方法的比较

方法	优点	缺点
Object.prototype.toString.call()	准确性高	语法相对复杂，返回值不是类型名称本身
typeof	简单易用，返回值是类型名称本身	精度较低，无法区分出继承自其他对象的对象的具体类型
instanceof	准确性高，可以判断出一个对象是否属于某个类或接口	不能判断出一个对象的具体类型