教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载undefined与null是 JavaScript 中最常被混淆的两种空值但它们语义完全不同undefined是引擎默认的未初始化状态null是程序员显式写入的无值标记。本文以 jstips 第 05 期为基础系统梳理二者的定义差异、typeof结果、falsy 判定、JSON 序列化行为与检测写法并结合仓库内相关技巧严格相等、布尔转换、声明基础等给出可直接落地的实践方案读完你将能在日常编码与面试中准确区分并可靠判定这两种值。语义原点两种空的本质区别原文档给出的核心定义可以浓缩为两句话undefined一个变量没有被声明或者被声明了但还没有被赋值时它的值就是undefined。它是 JavaScript 引擎主动产生的一种状态。null它是一个赋值值assignment value含义是没有值。它不会被引擎自动产生而是由程序员主动写入用来表示这个变量当前故意不持有任何对象。由此引申出两个关键事实JavaScript 会把未赋值的变量默认设置为undefined例如var x;之后x的值即为undefined。JavaScript 引擎从来不会自动把某个变量设置为null。null只出现在程序员的显式赋值中例如var el null;表示此时还没有元素对象。这个自动产生 vs 手动写入的区分是理解二者的第一把钥匙。undefined通常意味着意外缺失而null通常意味着刻意留空。在引擎行为层面产生undefined的场景远不止声明未赋值常见情形还包括function noReturn() {} noReturn(); // undefined没有 return 的函数返回 undefined var arr [1, 2, 3]; arr[10]; // undefined越界访问 var { a } {}; // undefined解构目标不存在 void 0; // undefinedvoid 运算符保证返回 undefined相比之下null通常由你主动写出例如清空某个引用、表示查询无结果的哨兵值等。从仓库姊妹篇 Basics: Declarations 中可以看到当声明var x, y 3时x的打印结果正是undefined——这从声明层面印证了未赋值变量默认值为 undefined的规则。typeof 的差异与 typeof null 的历史包袱原文档指出undefined的typeof结果是字符串undefinednull的typeof结果是字符串object。typeof undefined; // undefined typeof null; // objecttypeof null返回object是一个广为人知的历史遗留问题根据 ECMAScript 早期规范的设计值在内部用类型标签type tag表示而null的类型标签被编码为 0恰好与对象类型共用了标签位于是typeof一直将null报告为object。这个行为从未被修正修正会破坏存量代码因此你应当把它当作既定事实来记忆而不是用它来判定值是否为null——永远不要用typeof x object来判断x是否为null。需要注意的是尽管typeof null objectnull本身依然是原始类型primitive这一点原文档明确强调二者都属于基本类型而不是对象。原始类型与 falsy 判定原文档强调了两点共性二者都是原始类型primitives二者都是 falsy即强制转布尔后均为falseBoolean(undefined); // false Boolean(null); // false这个特性在日常条件判断中很常见例如if (x)会同时排除undefined、null、0、、NaN等所有 falsy 值。若想拿到无论如何都是布尔的结果可以参考仓库第 30 期 Converting truthy/falsy values to boolean 中的!!技巧!!undefined; // false !!null; // false !!0; // false !!; // false !!hello; // true借助Boolean()或!!你可以把任何值归一化为布尔从而安全地参与逻辑运算。JSON 序列化中的不对称性原文档指出undefined在 JSON 中不是合法值而null是。这与 JSON 规范直接相关——JSON 只有null字面量没有undefined字面量。在JSON.stringify的实践中这个差异会体现在三类场景中JSON.stringify({ a: undefined, b: 1 }); // {b:1} 对象中值为 undefined 的属性会被整体省略 JSON.stringify([undefined, 1]); // [null,1] 数组中的 undefined 会被替换成 null JSON.stringify(undefined); // undefined 顶层直接序列化 undefined 会返回 undefined即没有输出换句话说序列化时undefined要么被丢弃、要么被降级为null而null始终能原样保留。需要精细控制序列化字段时可参考仓库第 40 期 Using JSON.Stringify 介绍的第二个参数属性白名单或过滤函数与第三个参数缩进格式化。可靠的检测方式原文档给出了两条最可靠的判定写法// 判断变量是否为 undefined typeof variable undefined; // 判断变量是否为 null variable null;为什么这样写是可靠的typeof variable undefinedtypeof对未声明的变量也不会抛出ReferenceError而是直接返回undefined因此它既能检测已声明未赋值也能检测完全未声明的情况是最安全的 undefined 探测方式。variable nullnull只有唯一值与严格相等运算符配合即可精确判定不会误伤undefined。尤其要警惕两种错误写法// 错误typeof 无法区分 null 与 object typeof value object // null 也会返回 true误判 // 错误宽松相等会同时命中 null 和 undefined value null // 同时为 truevalue 是 null 或 undefined 时都成立其中value null虽然能一次判断两者但它是利用宽松相等的隐式转换特性语义模糊容易掩盖 bug不建议作为常规判定手段。相等性 与 的不同结论原文档最后给出了一个最容易踩坑的事实null undefined; // true null undefined; // false宽松相等在比较null与undefined时抽象相等算法规定二者相互相等且只与对方相等因此null undefined为true。严格相等不进行任何隐式转换null与undefined是两种不同的原始类型、不同的值因此null undefined为false。这正是仓库第 24 期 Use instead of 所强调的核心在必要时会执行自动类型转换而同时比较值与类型行为更可预测。判定 null/undefined 这类语义敏感的值时应一律使用或!避免宽松相等引入意外分支。声明场景中的实践undefined 是默认值undefined作为引擎默认值的特性在变量声明链中体现得尤为明显。仓库 Basics: Declarations 提供了可运行的示例;(() { var x, y 3; // 等价于 var x; var y 3; console.log(x, y); // undefined, 3 —— x 未赋值被引擎置为 undefined })();在函数内部这样声明时x的默认值就是undefined而一旦你希望显式表示无值则应当写出var x null;。这一区分在编写库函数、设计 API 返回值时尤其重要没有传参/没有返回值交给undefined调用方主动清空/表示空引用交给null能让代码意图更清晰。常见误区速查误区后果正确做法用typeof x object判断x是否为 nullnull会被误判为对象用x null用x null代替严格判断null与undefined被混为一谈掩盖真实语义明确区分后用判定认为undefined能写入 JSON序列化时属性被省略或被降级为null需要空值时显式用null混淆空字符串、0与null/undefined条件判断把所有 falsy 值一视同仁丢失信息先判断类型再判断 falsy把null当作引擎产生的状态误解未初始化与显式清空的语义记住 null 只来自程序员赋值结语与仓库延伸阅读undefined是引擎的未初始化信号null是程序员的显式无值标记前者在 JSON 中不合法、typeof结果为undefined后者在 JSON 中合法、typeof结果为object历史遗留两者都是原始类型、都是 falsy且只有宽松相等才把二者视为相等。记住这五组差异加上typeof x undefined与x null两条判定写法就足以在绝大多数场景中正确处理这两种空值。想要继续深入相关主题可以结合仓库内的这些配套技巧阅读Use instead of 严格相等、Converting truthy/falsy values to boolean布尔归一、Basics: Declarations声明与默认值、Using JSON.Stringify序列化细节以及本仓库的投稿格式 POST_TEMPLATE.md 与投稿流程 CONTRIBUTING.md。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐dbskill 商业诊断 AI Skills 工具箱指南安装、动态路由与 29 个 Skill 全解析dbskill 商业诊断 AI Skills 工具箱指南安装、动态路由与 29 个 Skill 全解析 本文以 README.ko.md https://li教程30 seconds of code彻底理解 JavaScript 中 undeclared、undefined 与 null 的区别30 seconds of code彻底理解 JavaScript 中 undeclared、undefined 与 null 的区别 导读 JavaScri教程文档30 Seconds of CodeJavaScript Promise 中 then 与 finally 的本质区别与正确用法30 Seconds of CodeJavaScript Promise 中 then 与 finally 的本质区别与正确用法 Promise.protot教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考