前端判断数据类型的方式（详解）

在前端开发中，判断数据类型是常见的需求。JavaScript 提供了多种方法来判断数据类型，每种方法都有其适用的场景和优缺点。以下是几种常见的判断数据类型的方法：

1.typeof 操作符

typeof 是 JavaScript 中最常用的判断数据类型的方法。它返回一个字符串，表示操作数的数据类型。

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof {a: 1}); // "object"
console.log(typeof [1, 2, 3]); // "object" (注意：数组也是对象)
console.log(typeof function() {}); // "function"
console.log(typeof null); // "object" (这是一个历史遗留问题)
console.log(typeof Symbol()); // "symbol"

2.instanceof 操作符

instanceof 用于检查一个对象是否是某个构造函数的实例。它对于判断复杂对象（如数组、日期等）非常有用。

console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(new Date() instanceof Date); // true
console.log(/regex/ instanceof RegExp); // true
console.log(function() {} instanceof Function); // true

3. Object.prototype.toString.call()

如前所述，Object.prototype.toString.call() 是一种可靠的方法，用于判断各种数据类型。它返回一个标准化的字符串格式，表示对象的类型。

Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call(new Date()); // "[object Date]"
Object.prototype.toString.call(/regex/); // "[object RegExp]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call("string"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(Symbol()); // "[object Symbol]"
Object.prototype.toString.call(function() {}); // "[object Function]"

为什么它可以判断数据类型

1. 标准化输出：Object.prototype.toString.call() 方法返回一个标准化的字符串格式，确保不同类型的数据返回的字符串格式一致。这种标准化输出使得判断数据类型变得简单和统一。

2. 覆盖默认行为：对于大多数内置对象，Object.prototype.toString 方法被重写，以返回特定的类型标签。例如，数组对象的 toString 方法被重写为返回 "[object Array]"，而不是默认的 "[object Object]"。

3. 处理特殊值：null 和 undefined 是特殊值，它们没有原型链。然而，通过使用 Object.prototype.toString.call()，我们可以正确地获取它们的类型信息，即 "[object Null]" 和 "[object Undefined]"。

4. Array.isArray() 

这是一个专门用于判断数组的方法，返回一个布尔值。

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

5. constructor 属性

每个对象都有一个 constructor 属性，指向创建该对象的构造函数。可以通过检查 constructor 属性来判断数据类型。

console.log((42).constructor === Number); // true
console.log(('hello').constructor === String); // true
console.log((true).constructor === Boolean); // true
console.log(([]).constructor === Array); // true
console.log(({}).constructor === Object); // true
console.log((function() {}).constructor === Function); // true
console.log((new Date()).constructor === Date); // true
console.log((/regex/).constructor === RegExp); // true

6. isNaN() 和 Number.isNaN()

isNaN() 用于判断一个值是否是 NaN，但它有一些局限性，因为它会将非数字值也认为是 NaN。Number.isNaN() 更为严格，只在值确实是 NaN 时返回 true。

console.log(isNaN(NaN)); // true
console.log(isNaN('hello')); // true (因为 'hello' 不能被转换为数字)
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN('hello')); // false

总结

不同的方法有不同的适用场景：

• typeof 适用于基本类型的判断，但对于 null 和复杂对象（如数组）不够准确。
• instanceof 适用于判断对象是否为某个构造函数的实例，但对于基本类型无效。
• Object.prototype.toString.call() 是一种通用且可靠的方法，适用于所有类型的精确判断。
• Array.isArray() 专门用于判断数组。
• constructor 属性可以用于判断对象的构造函数，但需要注意原型链的修改。
• isNaN() 和 Number.isNaN() 适用于判断 NaN。