前端面试题：数据类型的全面检测一篇关于前端面试题的文章，涉及typeof、instanceof、Object.proto

一、类型检测在前端开发中的重要性

在前端开发中，数据类型的准确判断是代码健壮性的基石。特别是在框架源码、工具库开发等场景中，精确的类型检测能有效避免潜在错误。本文将通过实际代码示例，深入解析四大核心检测方案：

// 类型检测测试用例
const testCases = [
  1,                      // 数字
  Date.now(),             // 时间戳（数字）
  "123",                  // 字符串
  [1, "b"],               // 数组
  { a: 1 },               // 对象
  function() {},          // 函数
  undefined,              // undefined
  null,                   // null
  NaN,                    // NaN
  Symbol("a"),            // Symbol
  new Date(),             // Date 对象
  /regex/                 // 正则表达式
];

二、四大检测方案对比分析

1. typeof 运算符

(1) 基本用法与特性

const typeofResults = new Map();
testCases.forEach(item => {
  typeofResults.set(item, typeof item);
});

// 特殊结果示例：
// typeof null        => "object"
// typeof []          => "object"
// typeof function(){} => "function"

(2) 核心特点

返回值：始终返回字符串
优势：快速判断基本类型（undefined/boolean/number/string/symbol/bigint）
局限性：
- null 误判为 “object”（历史遗留问题）
- 无法区分数组与普通对象
- 对象实例类型无法精确判断

2. instanceof 运算符

(1) 原型链检测机制

const instanceResults = new Map();
testCases.forEach(item => {
  instanceResults.set(item, {
    'Object': item instanceof Object,
    'Array': item instanceof Array,
    'Function': item instanceof Function,
    'Date': item instanceof Date
  });
});

(2) 核心特点

检测原理：沿着原型链查找构造函数
优势：准确判断对象实例类型
局限性：
- 基本类型直接返回 false
- 跨窗口/iframe 失效（如父窗口 Array ≠ 子窗口 Array）
- 手动修改 __proto__ 会导致误判

3. Object.prototype.toString()

(1) 最强大的类型检测方案

const toStringResults = new Map();
testCases.forEach(item => {
  toStringResults.set(item, 
    Object.prototype.toString.call(item)
  );
});

// 输出示例：
// [object Number]    => 数字
// [object Array]     => 数组
// [object Null]      => null

(2) 核心特点

标准化输出：统一返回 [object Xxx] 格式
精准检测：
- 识别所有内置对象类型（Date/RegExp等）
- 正确识别 null/undefined
扩展性：自定义对象可通过 Symbol.toStringTag 定义输出

4. Array.isArray()

(1) 数组专用检测方案

const arrayCheckResults = new Map();
testCases.forEach(item => {
  arrayCheckResults.set(item, Array.isArray(item));
});

(2) ES6 标准化方案优势

准确可靠：专为数组检测设计
兼容性：现代浏览器全面支持（IE9+）
多环境安全：不受原型链修改影响

三、深度对比表格

检测方案	适用场景	优点	缺点
`typeof`	基本类型快速判断	使用简单、性能高	null/array 检测不准
`instanceof`	对象实例类型判断	直观易理解	跨窗口失效、不适用基本类型
`Object.prototype.toString`	全面类型检测	最精准、支持所有类型	语法稍复杂
`Array.isArray()`	数组类型专用检测	专一精准、ES6标准	仅适用于数组

四、经典面试题解析

Q1: 如何准确判断数组类型？

推荐方案：

// ES6+ 环境首选
if (Array.isArray(arr)) { /*...*/ }

// 兼容性方案
if (Object.prototype.toString.call(arr) === '[object Array]') { /*...*/ }

Q2: null 和 undefined 的区别是什么？

关键点：

typeof null => “object”（历史遗留问题）
typeof undefined => “undefined”
null == undefined => true（抽象相等比较）
null === undefined => false（严格相等比较）

Q3: 如何检测 NaN？

正确方法：

// ES6+
Number.isNaN(value)

// 兼容方案
function isNaN(value) {
  return value !== value;
}

五、最佳实践建议

组合使用策略：

function getType(obj) {
  // 处理 null（因为 typeof null === 'object'）
  if (obj === null) return 'null';
  
  // 基本类型直接使用 typeof
  const type = typeof obj;
  if (type !== 'object') return type;

  // 对象类型使用 toString
  return Object.prototype.toString.call(obj)
    .slice(8, -1)
    .toLowerCase();
}

框架源码中的实践：

Vue3 源码中的 isArray 检测：
```
const isArray = Array.isArray;
```

Lodash 的类型检测实现：

function isObject(value) {
  const type = typeof value;
  return value != null && (type === 'object' || type === 'function');
}

六、扩展思考

Symbol.toStringTag 的妙用

class CustomClass {
  get [Symbol.toStringTag]() {
    return 'CustomClass';
  }
}

console.log(Object.prototype.toString.call(new CustomClass()));
// [object CustomClass]

Node.js 中的 util.types

const util = require('util');
console.log(util.types.isDate(new Date())); // true

通过深入理解这些类型检测方案的特性和适用场景，开发者可以编写出更健壮可靠的代码。在面试中展现对这些细节的掌握，将极大提升面试官对候选人技术深度的认可度。