爱站seo查询软件深圳市网络营销推广服务公司
undefined和null的区别 (新手小白级教程)
undefined 和 null 都表示“没有值”，但它们的核心区别在于：
undefined是 JavaScript 自动分配的默认值，表示“未定义”，没有原始值；或者说是没有值这么一个东西。换句话说就是：这个地方应该是有一个值的，而你没有去定义，但你又去读取它，这个时候就会返回undefined。null是开发者主动赋值的空值，表示“空对象引用” (即：一个对象被定义了值为空值)。
一、定义与核心区别
| 维度 | undefined | null |
|---|---|---|
| 来源 | 系统自动赋予（默认值） | 开发者手动赋值 |
| 语义 | “这里应该有值，但还没定义” | “这里应该是一个对象，但现在是空的” |
| 类型 | typeof undefined → "undefined" | typeof null → "object"（历史遗留问题） |
二、常见场景与示例
1. undefined 的产生场景
-
变量未赋值：
let name; console.log(name); // undefined -
函数无返回值：
function sayHello() {} console.log(sayHello()); // undefined -
对象属性未定义：
const obj = {}; console.log(obj.age); // undefined -
函数参数未传递：
function greet(name) {console.log(name); // 未传参时，name → undefined } greet();
2. null 的产生场景
-
主动清空对象引用：
let data = { id: 1 }; data = null; // 释放内存，表示data不再指向任何对象 -
初始化空值占位：
let user = null; // 稍后从服务器获取数据再赋值 -
DOM获取不存在的元素：
const element = document.getElementById("no-such-id"); console.log(element); // null
三、类型检测与比较
1. 类型检测
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"（历史遗留问题，实际应为"null"）
2. 相等性比较
==（宽松相等）：console.log(null == undefined); // true（规范约定）===（严格相等）：console.log(null === undefined); // false（类型不同）
四、使用建议与避坑指南
1. 使用原则
- 用
undefined：表示“系统默认的未定义状态”，不要手动赋值。 - 用
null：表示“开发者主动设置的明确空值”。
2. 常见误区
-
typeof null的陷阱：// 检测null的正确方式 const isNull = (value) => value === null; -
JSON序列化的差异：
JSON.stringify({ a: undefined, b: null }); // 结果：'{"b":null}'（undefined被忽略，null保留）
五、总结记忆口诀
“系统未定义用 undefined，主动清空用 null”
undefined：系统自动填，变量未赋默认值。null：开发者主动设，空对象引用要牢记。
通过理解它们的来源和设计意图，我们可以避免混淆，写出更清晰的代码！