JS中检测数据类型的几种方式及优缺点小结

2023年6月10日下午6:18 • JavaScript

让我来详细讲解一下 "JS中检测数据类型的几种方式及优缺点小结" 的完整攻略。

什么是数据类型

在JavaScript中，数据类型即表示数据的类型或值的类型。JavaScript中的数据类型包括以下几种：

基本类型（也称为原始类型）：undefined、null、布尔值（Boolean）、数值（Number）和字符串（String）。
引用类型：对象（Object）、数组（Array）、函数（Function）、日期（Date）等。

在编写JavaScript代码时，有时候需要检测一个变量或值的数据类型。下面将介绍几种JS中检测数据类型的方式，以及它们各自的优缺点。

typeof操作符

typeof是JavaScript中最常用的检测数据类型的方法之一。typeof操作符的最终结果是字符串，表示输入值的数据类型。

例如：

typeof undefined; // "undefined"
typeof null; // "object"
typeof true; // "boolean"
typeof 123; // "number"
typeof "abc"; // "string"
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"
typeof /^\d+$/; // "object"

从上面的结果可以看出，typeof可以检测出6种基本数据类型（undefined、null、布尔值、数值、字符串和函数）和一种引用类型（对象）。但是对于数组、正则表达式等引用类型，却返回了"object"，这是typeof检测数据类型的一个缺点。

另外，通过typeof检测出的数据类型都是字符串类型，需要注意使用时要与具体的类型值进行比较。

instanceof操作符

instanceof是一个二元操作符，在左边的操作数是一个对象，右边的操作数则是要对左边的操作数进行检测的构造函数。

例如：

var arr = [1,2,3];
arr instanceof Array  // true

上面的代码中，arr是一个数组，通过instanceof判断，返回结果是true。

需要注意，使用instanceof操作符时需要注意JS中的继承关系。例如：

function Person(name) {
    this.name = name;
}

function Student(name, grade) {
    Person.call(this, name);
    this.grade = grade;
}

var student = new Student('Tom', 1);
student instanceof Person; // false

在上面的代码中，Student是继承自Person的，但是如果使用instanceof检测student是否为Person的实例，会返回false。这是因为在JS中，不同的window或iframe中的对象都是不同的，如果student对象是在另一个window或iframe中创建的，那么判断结果也会是false。

因此，在使用instanceof操作符时，需要注意继承关系和对象的创建环境。

Object.prototype.toString.call

Object.prototype.toString.call是一个比较灵活的检测数据类型的方法，它可以将任意基本类型或引用类型进行精确的类型判断（不会出现typeof中的"object"问题）。

例如：

Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function(){}); // "[object Function]"
Object.prototype.toString.call(/^\d+$/); // "[object RegExp]"

从上面的结果可以看出，Object.prototype.toString.call可以检测出任意类型的数据类型，并返回一个类似"[object 构造函数名]"的字符串，其中构造函数名即为对象的实际构造函数名。