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


相关推荐: 如何打造高效商业网站?建站目的决定转化率  php 三元运算符实例详细介绍  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  🚀拖拽式CMS建站能否实现高效与个性化并存?  如何在IIS7中新建站点?详细步骤解析  Python函数文档自动校验_规范解析【教程】  Java垃圾回收器的方法和原理总结  香港服务器网站卡顿?如何解决网络延迟与负载问题?  大连网站制作公司哪家好一点,大连买房网站哪个好?  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  阿里云高弹*务器配置方案|支持分布式架构与多节点部署  如何在阿里云服务器自主搭建网站?  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  如何生成腾讯云建站专用兑换码?  网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  如何解决hover在ie6中的兼容性问题  Laravel如何使用Vite进行前端资源打包?(配置示例)  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  iOS UIView常见属性方法小结  韩国网站服务器搭建指南:VPS选购、域名解析与DNS配置推荐  北京的网站制作公司有哪些,哪个视频网站最好?  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  怎样使用JSON进行数据交换_它有什么限制  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  PythonWeb开发入门教程_Flask快速构建Web应用  焦点电影公司作品,电影焦点结局是什么?  Laravel如何实现API速率限制?(Rate Limiting教程)  laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法  javascript读取文本节点方法小结  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  Laravel如何编写单元测试和功能测试?(PHPUnit示例)  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  Laravel如何为API编写文档_Laravel API文档生成与维护方法