Vue/Vuex中如何区分Proxy对象的原始来源是数组还是对象

Vue的响应式Proxy不会影响原生类型检测逻辑，常用有3种可靠方案：

• 方案1：直接使用Array.isArray()检测（最简单，推荐日常使用）
  不管对象是不是被Proxy包裹，该方法都能正确识别原始数组类型

  const proxyData = store.state.someData // 拿到Vuex返回的Proxy对象
  console.log(Array.isArray(proxyData)) // 原始为数组返回true，普通对象返回false
  

• 方案2：配合Vue提供的toRawAPI获取原始值后检测（最稳妥，适用于复杂判断场景）
  先导入toRaw方法，拿到原始值后再做任意类型判断，完全不受响应式代理影响

  import { toRaw } from 'vue'
  const proxyData = store.state.someData
  const rawData = toRaw(proxyData)
  console.log(Array.isArray(rawData)) // 检测是否为数组
  console.log(rawData.constructor === Object) // 检测是否为普通对象
  

• 方案3：使用Object.prototype.toString.call()检测
  该方法可以准确返回代理对象对应的原始类型标签

  const proxyData = store.state.someData
  const typeTag = Object.prototype.toString.call(proxyData)
  console.log(typeTag === '[object Array]') // 原始为数组返回true
  console.log(typeTag === '[object Object]') // 原始为普通对象返回true
  

注意：不要使用typeof做判断，因为数组的typeof返回值本身就是object，和普通对象无法区分，和Proxy代理特性无关。

内容的提问来源于stack exchange，提问作者Comfort Eagle