接前文细分JavaScript的六种数据类型中的null和undefined

彻底搞懂 JavaScript 中的 null 和 undefined

在 JavaScript 开发中，null 和 undefined 是两个看似相似但含义截然不同的"空值"。它们经常被混淆，甚至在一些判断中导致意外的 bug。

---

一、核心定义：一句话说清区别

值	含义	谁赋予的
undefined	"没有定义" ------ 变量声明了但没赋值，或属性不存在	JS 引擎自动赋予
null	"有定义，但值为空" ------ 明确表示"这里本该有东西，但现在是空的"	程序员主动赋值

简单记忆：

• undefined = "我还没准备好"
• null = "我知道你在找什么，但它现在是空的"

---

二、undefined 的常见场景与代码示例

1. 变量声明但未赋值

let a;
console.log(a);           // undefined
console.log(typeof a);    // "undefined"

变量 a 被声明了，但没有给它任何值，JS 默认其值为 undefined。

---

2. 函数没有返回值

function doNothing() {
  // 没有 return
}

console.log(doNothing());        // undefined
console.log(typeof doNothing()); // "undefined"

如果函数没有 return 语句，调用结果就是 undefined。

---

3. 对象属性不存在

let person = {
  name: "张三"
};

console.log(person.age);         // undefined
console.log(typeof person.age);  // "undefined"

person 对象没有 age 属性，访问时返回 undefined。

---

4. 数组元素不存在

let arr = [1, 2, 3];
console.log(arr[5]);             // undefined
console.log(typeof arr[5]);      // "undefined"

数组索引 5 超出范围，返回 undefined。

---

5. 函数参数未传

function greet(name) {
  console.log("你好，" + name);
}

greet(); // 你好，undefined

调用 greet() 时没有传参，name 参数默认为 undefined。

---

三、null 的使用场景与代码示例

null 是一个程序员主动设置的空值，表示"我知道这里应该有一个值，但现在它是空的"。

1. 主动清空变量

let user = { name: "李四", age: 25 };
user = null; // 表示当前没有用户

console.log(user);         // null
console.log(typeof user);  // "object" ❗️（这是 JS 的历史 bug）

将 user 设为 null，明确表示"当前无用户数据"。

---

2. 初始化可能为空的对象

let selectedFile = null; // 先设为空，等待用户选择

// 后续逻辑中再赋值
// selectedFile = getFileFromInput();

提前告知其他开发者："这个变量将来会是一个对象，但现在是空的"。

---

3. DOM 查询失败时返回 null

let element = document.getElementById('non-existent');
console.log(element);         // null
console.log(typeof element);  // "object"

getElementById 找不到元素时返回 null，而不是 undefined，因为它"预期应该找到一个元素，但没找到"。

---

⚠️ 四、一个著名的"坑"：typeof null === 'object'

console.log(null, typeof null);     // null "object"
console.log(undefined, typeof undefined); // undefined "undefined"

typeof null 返回 "object"，这是 JavaScript 最早期的一个历史 bug，至今未修复（为了兼容性）。

正确判断 null 的方式：

function isNull(value) {
  return value === null;
}

console.log(isNull(null));      // true
console.log(isNull(undefined)); // false

---

五、如何正确比较 null 和 undefined？

1. 严格相等（===）：推荐！

console.log(null === undefined); // false  类型不同
console.log(null == undefined);  // true   宽松相等，会进行类型转换

永远使用 === 来避免类型隐式转换带来的问题。

---

2. 判断是否"为空值"（包括 null 和 undefined）

function isEmpty(value) {
  return value == null; // 等价于 value === null || value === undefined
}

console.log(isEmpty(null));      // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty(0));         // false
console.log(isEmpty(""));        // false

value == null 是判断"是否为 null 或 undefined"的高效写法。

---

六、最佳实践总结

场景	推荐做法
变量声明后暂时无值	用 undefined（JS 自动处理）
明确表示"无值"	主动赋值为 null
判断是否为空	使用 value == null
严格类型检查	使用 ===
清空对象引用	设为 null（帮助垃圾回收）

---

理解本质，写出更健壮的代码

• undefined 是 系统默认的"未定义"状态
• null 是 程序员主动设置的"空值"状态

掌握它们的区别，不仅能避免 bug，还能让你的代码更具语义化和可维护性。

下一次当你写 let user = null; 时，记住：你不是在"忽略"值，而是在明确表达意图