news 2026/5/8 21:01:37

HoRain云--JavaScript typeof操作符全解析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HoRain云--JavaScript typeof操作符全解析

🎬 HoRain云小助手:个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想,就是为了理想的生活!


⛳️ 推荐

前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称

专栏介绍

《C语言》

本专栏主要撰写C干货内容和编程技巧,让大家从底层了解C,把更多的知识由抽象到简单通俗易懂。

《网络协议》

本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘,一起解密网络协议在运行中协议的基本运行机制!

《docker容器精解篇》

全面深入解析 docker 容器,从基础到进阶,涵盖原理、操作、实践案例,助您精通 docker。

《linux系列》

本专栏主要撰写Linux干货内容,从基础到进阶,知识由抽象到简单通俗易懂,帮你从新手小白到扫地僧。

《python 系列》

本专栏着重撰写Python相关的干货内容与编程技巧,助力大家从底层去认识Python,将更多复杂的知识由抽象转化为简单易懂的内容。

《试题库》

本专栏主要是发布一些考试和练习题库(涵盖软考、HCIE、HRCE、CCNA等)

目录

⛳️ 推荐

专栏介绍

JavaScript typeof 操作符详解

一、基本用法与语法

二、typeof 返回值详解

三、常见陷阱与局限性

1. null 的错误识别

2. 无法区分数组和普通对象

3. 无法区分其他对象类型

4. 对未声明变量的安全处理

四、正确使用建议

五、总结


JavaScript typeof 操作符详解

一、基本用法与语法

typeof是 JavaScript 的一元操作符,用于返回一个表示数据类型的字符串。其语法为:

typeof operand typeof (operand) // 括号可选,但不影响结果

二、typeof 返回值详解

类型/值typeof 返回值说明
42"number"数字类型(包括普通数字、NaN、Infinity等)
"hello""string"字符串类型
true"boolean"布尔值
undefined"undefined"未定义的变量或未初始化的变量
Symbol()"symbol"ES6 引入的 Symbol 类型
9007199254740991n"bigint"ES2020 新增的大整数类型
null"object"历史遗留问题(错误地返回"object",不是真正的对象类型)
{}"object"任何对象(包括数组、日期、正则表达式等)
function(){}"function"任何函数(包括普通函数、类、异步函数、生成器函数等)

三、常见陷阱与局限性

1. null 的错误识别

typeof null === "object"; // true(JavaScript 历史遗留问题)

解决方案

// 正确判断 null const isNull = (value) => value === null;

2. 无法区分数组和普通对象

typeof [] === typeof {}; // true(都返回 "object")

解决方案

Array.isArray([]); // true Array.isArray({}); // false

3. 无法区分其他对象类型

typeof new Date() === typeof /regex/; // true(都返回 "object")

解决方案

// 使用 instanceof new Date() instanceof Date; // true /regex/ instanceof RegExp; // true // 或使用 Object.prototype.toString.call() Object.prototype.toString.call([]); // "[object Array]" Object.prototype.toString.call(new Date()); // "[object Date]"

4. 对未声明变量的安全处理

typeof undeclaredVariable; // "undefined"(不会抛出 ReferenceError) // 而直接访问 undeclaredVariable 会抛出 ReferenceError

应用场景

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { // Node.js 环境 } else { // 浏览器环境 }

四、正确使用建议

  1. 基本类型检查typeof对数字、字符串、布尔值、undefined、symbol、bigint 等基本类型非常可靠

    typeof 123; // "number" typeof "text"; // "string" typeof true; // "boolean" typeof undefined; // "undefined"
  2. 处理 null:先检查是否为 null,再使用 typeof

    if (value === null) { // 处理 null } else if (typeof value === 'object') { // 处理对象 }
  3. 检查数组:使用Array.isArray()而非typeof

    Array.isArray([1, 2, 3]); // true
  4. 复杂对象类型检测:使用Object.prototype.toString.call()

    function getType(value) { return Object.prototype.toString.call(value); } getType([]); // "[object Array]" getType(new Date()); // "[object Date]"

五、总结

typeof是 JavaScript 中检查基本数据类型的有效工具,但有其局限性:

在实际开发中,应根据需要选择合适的类型检测方法,避免仅依赖typeof进行复杂类型判断。

❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/3 4:45:46

基于springboot 心理咨询预约系统

心理咨询预约 目录 基于springboot vue心理咨询预约系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取: 基于springboot vue心理咨询预约系统 一、前言 博主介绍&…

作者头像 李华
网站建设 2026/5/1 7:36:55

QToolTip+QSS

QToolTip本质上只是一个调用者,被调用的其实是一个被设置了Qt::ToolTip标志的QLabel,而且它比QLabel多了一个QSS属性: opacity 气泡整体的透明度富文本显示因为QLabel本身是支持富文本的,所以气泡也支持富文本也不足为奇。我们来看…

作者头像 李华
网站建设 2026/5/1 7:35:08

​Android 基础入门教程​2.5.8 Notification(状态栏通知)详解

2.5.8 Notification(状态栏通知)详解 分类 Android 基础入门教程 本节引言: 本节带来的是Android中用于在状态栏显示通知信息的控件:Notification,相信大部分 学Android都对他都很熟悉,而网上很多关于Notification的使用教程都是…

作者头像 李华
网站建设 2026/5/1 10:04:05

百考通----学术圈降重的放心之选

不要让降重问题成为您学术道路上的绊脚石,选择百考通,让专业的人做专业的事!https://www.baikaotongai.com在AI写作普及的今天,论文降重成为刚需。面对豆包和百考通两款工具,究竟该如何选择?本文将通过真实…

作者头像 李华
网站建设 2026/5/8 9:35:14

基于Python + Django企业人力资源管理系统(源码+数据库+文档)

企业人力资源管理 目录 基于PythonDjango企业人力资源管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取: 基于PythonDjango企业人力资源管理系统 一、前言 博主介绍…

作者头像 李华