怎样判断一个变量是数组还是函数还是对象呢?

检测数据类型

怎样判断一个变量是数组还是函数还是对象? 这无疑是要我们判断数据类型

typeof

讲到我们首先想到的肯定是typeof

但是typeof检测具有局限性 , 他不能准确的检测数组和对象

typeof 复制代码
// 检测数组 返回'object'
typeof [1,2,3] //'object'
// 检测对象 返回'object'
typeof {a:1,b:2} //'object'
// 检测函数 返回'Function'
typeof function abc() {} //'Function'

总结一下:

  • typeof 检测数组和对象时返回值都是 object , 无法精确区分数组和对象
  • 拓展:typeof检测 null 返回值也是 object

instanceof

既然typeof不能判断一个变量到底是数组、对象还是函数 , 那么我们就尝试一下 instanceof

instanceof 用于判断一个变量是否属于某个对象的实例 , 返回值是 布尔值

instanceof 复制代码
const arr = [2,3,4]
const obj = { a : 1 , b : 2 }
const fn = function abc(){}
// 1.检测arr数组是否为数组类型
[2,3,4] instanceof Array  // true
// 2.检测object对象是否为对象类型
obj instanceof Object  // true
// 3.检测fn函数是否为函数类型
fn instanceof Function // true

总结一下:

  • instanceof关键字主要用于判断一个对象是否属于某个类或其子类的实例 , 他可以用来判断一个变量是数组还是对象 , 返回的是一个布尔值 ;
  • 因为instanceof返回的值是一个布尔值 , 他是这样判断的 :
    数组 instanceof Array对象 instanceof Object函数 instanceof Function
    即 => 数组是否是数组 , 对象是否是对象 ;
  • 更多的是一个判断结果 , 我个人认为用instanceof来判断一个变量到底是数组、对象还是函数有点脱裤子放屁--多此一举 , 不是一个良方

Object.prototype.toString.call()

不知道小伙伴们有没有用过 Object.prototype.toString.call() 这个方法 , 他可以精准判断变量类型,它返回 [object constructorName] 的字符串格式,这里的constructorName就是call参数的函数名

下面让我们尝试一下这个陌生又熟悉的方法 :

Object.prototype.toString.call() 复制代码
// 1.检测数组
Object.prototype.toString.call([1,2,3])  // '[object Array]'
// 2.检测对象
Object.prototype.toString.call({a:1})  // '[object Object]'
// 1.检测函数
Object.prototype.toString.call(function abc(){})  // '[object Function]'

总结一下 :

  • Object.prototype.toString.call())的作用是获取一个对象的类型
  • 通过调用Object对象原型上的 toString() 方法,并传入要检测的对象作为参数,返回一个表示对象类型的字符串。
  • 这个方法可以用来判断一个对象的类型,包括原始类型(如字符串、数字、布尔值等)和复杂类型(如数组、函数、日期等)

综合来看 Object.prototype.toString.call() 是解决这个问题的最佳方案

相关推荐
小小愿望34 分钟前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望34 分钟前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴42 分钟前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
海上彼尚1 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天2 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
如白驹过隙3 小时前
cloudflare缓存配置
前端·缓存
excel3 小时前
JavaScript 异步编程全解析:Promise、Async/Await 与进阶技巧
前端
Jerry说前后端3 小时前
Android 组件封装实践:从解耦到架构演进
android·前端·架构
步行cgn4 小时前
在 HTML 表单中,name 和 value 属性在 GET 和 POST 请求中的对应关系如下:
前端·hive·html
hrrrrb4 小时前
【Java Web 快速入门】十一、Spring Boot 原理
java·前端·spring boot