当前位置: 首页 > web >正文

深入理解 JavaScript 的 typeof 运算符:返回的数据类型

JavaScript 的 typeof 运算符是开发中用于检测值类型的基础工具。虽然看似简单,但其行为存在需要开发者理解的微妙细节。本文将解析 typeof 返回的数据类型,探讨边界案例,并分享类型检查的最佳实践。


typeof 会返回哪些类型?

typeof 运算符返回一个表示未计算操作数类型的字符串。以下是所有可能的返回值:

typeof 结果描述示例
"undefined"未声明或未定义的值let x; typeof x
"boolean"布尔值(true/false)typeof true
"number"数字值(包括 NaN)typeof 42
"string"字符串typeof "hello"
"bigint"大整数(ES2020+)typeof 9007199254740991n
"symbol"Symbol 类型(ES6+)typeof Symbol()
"function"函数对象typeof function() {}
"object"对象、数组、null 和日期对象typeof {}typeof null

关键观察与边界案例

1. null 的怪异行为

typeof null 会返回 "object",这是 JavaScript 早期的历史遗留问题:

javascript

复制

下载

console.log(typeof null); // "object"(历史性缺陷)

2. 函数的特殊性

尽管函数本质是对象,typeof 会单独处理它们:

javascript

复制

下载

typeof function() {} // "function"
typeof class {}      // "function"(类本质是构造函数)

3. 数组也是对象

数组会返回 "object",需用 Array.isArray() 准确检测:

javascript

复制

下载

typeof [1,2,3]      // "object"
Array.isArray([1,2,3]) // true

4. NaN 的数值类型

虽然表示“非数字”,NaN 仍被归类为数值类型:

javascript

复制

下载

typeof NaN // "number"

5. 未声明与未定义的区别

javascript

复制

下载

let declaredButUndefined;
typeof declaredButUndefined // "undefined"(已声明但未赋值)
typeof nonExistentVariable  // "undefined"(未声明的变量不报错)

类型检查最佳实践

对于复杂类型检测,建议结合其他方法:

  • 数组检测:使用 Array.isArray()

  • Null 检测:直接全等比较 value === null

  • 纯对象检测:复合判断:

    javascript

    复制

    下载

    function isPlainObject(value) {return value !== null && typeof value === 'object' && !Array.isArray(value);
    }
  • 自定义类型:使用 instanceof 或 Object.prototype.toString

    javascript

    复制

    下载

    Object.prototype.toString.call([]) // "[object Array]"
    Object.prototype.toString.call(null) // "[object Null]"

为什么 typeof null 返回 "object"?

这一行为源于 JavaScript 最初版本(1995 年)的实现细节:值类型标签存储在一个 32 位单元中,null 的二进制表示(全零)被错误地识别为对象类型标签(类型 0)。由于兼容性考虑,此问题从未被修复。


总结

typeof 运算符会返回 8 种可能的字符串,是检测基本类型的有效工具,但需注意其局限性:

  • 对 null、数组和对象的检测不够精确

  • 未声明的变量不会抛出错误,而是返回 "undefined"

在实际开发中,建议:

  • 对 null 使用全等比较(=== null

  • 对数组使用 Array.isArray()

  • 对复杂类型使用 Object.prototype.toString.call()

http://www.xdnf.cn/news/2472.html

相关文章:

  • 【音视频】音频编码实战
  • Go语言--语法基础4--基本数据类型--字符串类型
  • 洞悉 NGINX ngx_http_access_module基于 IP 的访问控制实战指南
  • 《代码整洁之道》第12章 迭进 - 笔记
  • apkpure 谷歌插件 下载的apk包
  • array和模板进阶(详细使用)
  • ElasticSearch从入门到精通-覆盖DSL操作和Java实战
  • python实战项目65:drissionpage采集boss直聘数据
  • Nacos简介—4.Nacos架构和原理一
  • AI在医疗领域的10大应用:从疾病预测到手术机器人
  • vue3子传父——v-model辅助值传递
  • AI大模型从0到1记录学习 linux day21
  • 第三次作业
  • android10 卸载应用出现回退栈异常问题
  • Java求职者面试:从Spring Boot到微服务的技术深度探索
  • C++ RAII
  • 【今日三题】笨小猴(模拟) / 主持人调度(排序) / 分割等和子集(01背包)
  • Python 数据可视化进阶:精准插入图表到指定 Excel 工作表
  • gRPC 的使用和了解
  • HK1RBOX K8 RK3528 Via浏览器_插件_央视频的组合验证(失败)
  • Simulink与C的联合仿真调试
  • 解读和分析mysql性能数据时,如何确定性能瓶颈的具体位置?
  • 贪心算法-跳跃游戏II
  • Godot开发2D冒险游戏——第三节:游戏地图绘制
  • 来自B站-AI匠的“RAG的prompt设计指南“的部分截图
  • idea软件配置移动到D盘
  • Linux日志分析:安全运维与故障诊断全解析
  • 【PCL】实现CloudCompare的连通域点云聚类功能
  • 闭包与装饰器(python)
  • 机器学习——Seaborn练习题