JavaScript数据类型有哪些_如何准确判断一个变量的类型

发布时间 - 2025-12-31 00:00:00    点击率:
JavaScript有7种原始类型(string、number、boolean、null、undefined、symbol、bigint)和1种引用类型(object),共8种;typeof无法准确判断null和多数对象,推荐用Object.prototype.toString.call()精准识别。

JavaScript 有 7 种原始(primitive)数据类型和 1 种引用(object)类型,共 8 种。准确判断变量类型不能只靠 typeof,它对 null 和多数对象都返回 "object",容易误判。

7 种原始类型 + 1 种对象类型

原始类型(按字面量直接创建,不可变,存于栈内存):

  • string:如 "hello"
  • number:如 423.14NaNInfinity
  • boolean:如 truefalse
  • null:唯一值 null(注意:typeof null === "object" 是历史 bug)
  • undefined:未赋值或未声明变量的默认值
  • symbol(ES6):唯一且不可变的标识符,常用于对象属性键
  • bigint(ES2025):表示任意精度整数,如 123n

引用类型(对象,存于堆内存,变量存储的是引用):

  • object:包括普通对象、数组、函数、日期、正则、Map、Set、Promise 等所有非原始类型——它们的 typeof 多数返回 "object""function",需进一步区分

推荐的类型判断方法:Object.prototype.toString.call()

这是最可靠、可扩展的通用方式,能精准识别内置对象类型:

  • Object.prototype.toString.call(123)"[object Number]"
  • Object.prototype.toString.call([])"[object Array]"
  • Object.prototype.toString.call(null)"[object Null]"
  • Object.prototype.toString.call(undefined)"[object Undefined]"
  • Object.prototype.toString.call(new Date())"[object Date]"
  • Object.prototype.toString.call(/abc/)"[object RegExp]"

可封装为工具函数:

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}
// getType([]) → "Array"
// getType(Promise.resolve()) → "Promise"

按场景选择合适的方法

快速判断原始类型(排除 null/undefined):用 typeof

  • typeof "abc" === "string"
  • typeof 42 === "number"
  • typeof function(){} === "function"(函数是对象的特例,但 typeof 单独识别)

单独确认 null:用严格相等 value === null

判断数组:优先用 Array.isArray(value)(比 toString.call 更语义化、性能略优)

判断 Promise / Map / Set 等新对象:仍依赖 toString.call,因为 instanceof 在跨 iframe 场景下会失效

常见误区提醒

  • typeof null 返回 "object" —— 不是类型,是引擎早期 bug,已成标准,无法更改
  • typeof NaN 返回 "number" —— 因为 NaN 是一个特殊的数值
  • [] == falsetrue,但 [] 类型仍是 "object" —— 类型判断和值比较无关
  • new String("a") 是对象,typeof 返回 "object";而 "a" 是原始字符串 —— 字面量与构造函数创建的类型不同


# javascript  # es6  # java  # 工具  #  


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: laravel怎么使用数据库工厂(Factory)生成带有关联模型的数据_laravel Factory生成关联数据方法  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  活动邀请函制作网站有哪些,活动邀请函文案?  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  如何打造高效商业网站?建站目的决定转化率  北京专业网站制作设计师招聘,北京白云观官方网站?  Laravel中的withCount方法怎么高效统计关联模型数量  猪八戒网站制作视频,开发一个猪八戒网站,大约需要多少?或者自己请程序员,需要什么程序员,多少程序员能完成?  如何在自有机房高效搭建专业网站?  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  如何在Windows环境下新建FTP站点并设置权限?  个人摄影网站制作流程,摄影爱好者都去什么网站?  Laravel如何实现事件和监听器?(Event & Listener实战)  大连网站制作公司哪家好一点,大连买房网站哪个好?  php结合redis实现高并发下的抢购、秒杀功能的实例  如何正确选择百度移动适配建站域名?  Laravel怎么实现验证码(Captcha)功能  linux写shell需要注意的问题(必看)  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  如何确认建站备案号应放置的具体位置?  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  网站制作企业,网站的banner和导航栏是指什么?  高端网站建设与定制开发一站式解决方案 中企动力  Laravel如何保护应用免受CSRF攻击?(原理和示例)  香港服务器如何优化才能显著提升网站加载速度?  如何快速查询网址的建站时间与历史轨迹?  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Laravel如何处理表单验证?(Requests代码示例)  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  网站制作软件免费下载安装,有哪些免费下载的软件网站?  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  Laravel如何实现全文搜索功能?(Scout和Algolia示例)  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  如何自己制作一个网站链接,如何制作一个企业网站,建设网站的基本步骤有哪些?  网站图片在线制作软件,怎么在图片上做链接?  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  如何自定义建站之星模板颜色并下载新样式?  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  Android实现代码画虚线边框背景效果  如何在不使用负向后查找的情况下匹配特定条件前的换行符  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的,背景音乐、音效等?  Python文件异常处理策略_健壮性说明【指导】  长沙企业网站制作哪家好,长沙水业集团官方网站?  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  使用spring连接及操作mongodb3.0实例  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  如何在宝塔面板中创建新站点?  html如何与html链接_实现多个HTML页面互相链接【互相】