JavaScript 数据类型检测方法在 React/Vue 项目中的实战对比

1. typeof 操作符

• 原理：返回基本类型的字符串标识
  $$typeof \ "text" \rightarrow "string"$$
  $$typeof \ 42 \rightarrow "number"$$
• React/Vue 应用场景：
  • 检测函数类型：if (typeof onClick === "function")
  • 判断基础类型参数：props 中的数字、字符串校验
• 局限性：
  • 无法区分数组/对象：typeof [] \rightarrow "object"
  • null 误判：typeof null \rightarrow "object"

2. instanceof 操作符

• 原理：检查原型链是否包含构造函数
  $$[] \ instanceof \ Array \rightarrow true$$
  $$new \ Date() \ instanceof \ Date \rightarrow true$$
• React/Vue 应用场景：
  • 校验自定义类实例：if (error \ instanceof \ CustomError)
  • 检测特定库对象（如 Moment.js 日期对象）
• 局限性：
  • 跨 iframe 失效（如微前端场景）
  • 无法检测原始值：42 \ instanceof \ Number \rightarrow false

3. Array.isArray()

• 原理：专用于数组检测
  $$Array.isArray([1,2]) \rightarrow true$$
  $$Array.isArray({}) \rightarrow false$$
• React/Vue 应用场景：
  • 处理动态列表数据：

    // React 示例
    {Array.isArray(items) ? items.map(...) : null}
    

  • Vue 的响应式数组操作：

    // Vue 示例
    if (Array.isArray(this.state.list)) {
      this.state.list.push(newItem)
    }
    

• 优势：100% 可靠的数组检测方案

4. Object.prototype.toString.call()

• 原理：返回标准类型标签
  $$Object.prototype.toString.call(null) \rightarrow "[object \ Null]"$$
  $$Object.prototype.toString.call(new \ Set()) \rightarrow "[object \ Set]"$$
• React/Vue 应用场景：
  • 复杂类型校验（如 Map, Set）：

    // 类型守卫函数
    function isSet(target) {
      return Object.prototype.toString.call(target) === "[object Set]"
    }
    

  • 工具函数开发：通用类型检测工具
• 优势：支持所有内置类型，包括 Null 和 Undefined

5. 实战对比表

6. 框架项目最佳实践

1. 基础类型检测：优先用 typeof

   // Vue watch 示例
   watch: {
     value(newVal) {
       if (typeof newVal === "string") this.handleString()
     }
   }
   

2. 数组操作：必须用 Array.isArray()

   // React 渲染优化
   render() {
     return Array.isArray(data) ? <List data={data} /> : <Empty />
   }
   

3. 复杂对象检测：使用 toString.call()

   // 共享工具函数
   export const isPlainObject = obj => 
     Object.prototype.toString.call(obj) === "[object Object]"
   

4. 自定义类型：结合 instanceof 和 TS 类型守卫

   // React + TypeScript
   interface CustomError extends Error { code: number }
   const isCustomError = (err: unknown): err is CustomError => 
     err instanceof Error && "code" in err
   

关键结论：

• 在 React/Vue 中优先使用 Array.isArray() 处理数组数据
• 状态管理库（如 Redux/Vuex）推荐使用 Object.prototype.toString.call() 保证类型安全
• 避免在框架项目中依赖 constructor 属性（易被 Babel 编译影响）