JavaScript最迷惑的“空值双胞胎”：null和undefined，一文彻底搞懂！

🧠一、它们的“出生背景”

undefined：天生的“无”

• 定义：变量声明了但从未被赋值，或者函数没有返回值时，系统自动赋予undefined。
• 场景：

  let name;  
  console.log(name); // undefined  
  
  function sayHi() {}  
  console.log(sayHi()); // undefined  
  

• 本质：JavaScript的“默认空值”，就像一张白纸，什么都没有。

null：人为的“空”

• 定义：开发者主动赋值的“空对象”，表示“这里没有值”。
• 场景：

  let user = null; // 明确表示user变量目前没有值  
  let person = { name: "Tom" };  
  person = null; // 手动清空对象  
  

• 本质：程序员的“占位符”，告诉代码：“我知道这里应该有值，但现在没有”。

---

🔍二、关键区别：从“长相”到“灵魂”

特性	undefined	null
类型	undefined（typeof结果）	object（历史bug，实际是原始值）
是否人为赋值	系统默认	开发者主动赋值
用途	变量未初始化、属性不存在	清空变量、表示“空对象”
相等比较	null == undefined → true	null === undefined → false

---

🧪三、经典翻车现场：90%开发者踩过的坑

1. typeof null 居然是 "object"？

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

真相：这是JavaScript的“黑历史”！早期版本用32位存储值，null的二进制全为0，被误判为对象类型。

2. == 和 === 的“双标”

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

玄机：==会强制类型转换，而===严格检查类型和值。

3. JSON序列化的“消失术”

JSON.stringify({ a: undefined, b: null }); // {"b":null}  

结果：undefined会被忽略，null保留。

---

🧠四、面试官最爱问的“灵魂拷问”

Q1：如何判断一个变量是 null 还是 undefined？

function checkType(val) {  
  if (val === null) return "null";  
  if (val === undefined) return "undefined";  
  return typeof val;  
}  

Q2：为什么 null == 0 是 false？

console.log(null == 0); // false  
console.log(null >= 0); // true  

真相：null在比较时会被转为0，但==规则特殊，不涉及数值转换。

---

🛠️五、最佳实践：别再用错！

1. 清空变量用 null

   let data = { /* 大对象 */ };  
   data = null; // 帮助垃圾回收  
   

2. 判断空值用 ===

   if (value === null || value === undefined) { /* 安全判断 */ }  
   

3. 函数参数默认值用 undefined

   function fetch(url, options = {}) { /* options未传时默认是undefined */ }  
   

---

结语

如果你觉得这篇文章有用，记得点赞、收藏、分享，关注我查看更多前端干货！

---