🎓 作者简介： 前端领域优质创作者
🚪 资源导航： 传送门=>
🎬 个人主页： 江城开朗的豌豆
🌐 个人网站: 江城开朗的豌豆 🌍
📧 个人邮箱: YANG_TAO_WEB@163.com 📩
💬 个人微信: y_t_t_t_ 📱
📌 座 右 铭: 生活就像心电图，一帆风顺就证明你挂了。 💔
👥 QQ群: 906392632 (前端技术交流群) 💬
大家好，我是小杨，一个天天和 JavaScript 打交道的前端码农。今天想和大家聊聊一个看似简单却经常让人栽跟头的问题——null 和 undefined 到底有什么区别？相信我，看完这篇你就再也不会搞混了！
一、初识双胞胎
刚开始学 JS 的时候，我也经常把这两个货搞混。它们都表示“没有值”，但背后的含义完全不同：
let 我 = undefined; // 声明了但还没赋值
let you = null; // 明确表示这里应该空着
二、本质区别大揭秘
1. undefined：系统给的默认值
当出现以下情况时，你会得到 undefined：
- 变量声明了但没赋值
- 函数没有 return 语句
- 访问对象不存在的属性
function showExample() {
// 没有return语句
}
let result = showExample();
console.log(result); // undefined
let obj = { name: '我' };
console(obj.age); // undefined
2. null：开发者主动设置的空值
null 是我们程序员主动设置的空值，表示“这里应该有值，但我故意让它为空”。
// 表示这个元素不存在
const myElement = document.getElementById('不存在的ID');
console.log(myElement); // null
// 清空一个对象引用
let user = { name: '我' };
user = null; // 明确表示不再引用这个对象
三、日常开发中的经典场景
场景1：函数参数默认值
function greet(name = '访客') {
console.log(`你好，${name}！`);
}
greet(undefined); // "你好，访客！"（使用默认值）
greet(null); // "你好，null！"（明确传入了null）
场景2：类型检查
typeof undefined; // "undefined"
typeof null; // "object" （历史遗留问题！）
// 正确检测方法
console.log(我 === null); // 检测null
console.log(我 === undefined); // 检测undefined
四、到底该用哪个？
根据我的经验，遵循这些原则：
- 让系统自动产生
undefined - 当你主动想要表示“空”时用
null - API设计时保持一致性（要么都用null，要么都用undefined）
五、一个让我加班两小时的坑
分享个真实案例：
const response = await fetch('/api/data');
const data = await response.json();
// 错误示范：
if (!data.我) {
// 这里会误判 undefined、null、""、0、false！
}
// 正确做法：
if (data.我 === null || data.我 === undefined) {
// 明确判断
}
六、总结表格
| 特性 | undefined | null |
|---|---|---|
| 产生方式 | 系统自动赋值 | 开发者主动赋值 |
| 类型 | "undefined" | "object" |
| 使用场景 | 变量未初始化时 | 主动清空引用时 |
| 相等判断 | == 时与null相等 | === 时不相等 |
记住：undefined 是 JS 说“这里还没值”，null 是你说“这里我要它没值”！
你在项目中还遇到过哪些关于 null 和 undefined 的坑？欢迎在评论区分享～
