JavaScript undefined 和 null 区别

你打开浏览器的控制台，随便敲一行没定义的变量名，比如 let a; 后打印 a，会跳出一个值；要是敲一行完全不存在的单词，比如 b，再打印，又会是另一个值。这两个值，就是前端开发里最容易搞混的 undefined 和 null。很多新手刚接触时，总觉得它们都是“空值”，没差多少，可真到写代码时，用错了就会出bug。

到底什么时候会出现undefined？

先说说 undefined，它更像是“什么都没给，系统默认给的空”。你可以理解为，你租了个房子，钥匙还没交，房东空着给你留了个位置，但没放任何东西。

举几个日常开发里的例子：

• 声明了变量但没赋值：比如写 let book;，你告诉系统“我要放一本书的位置”，但没把书放进去，这时候 book 的值就是 undefined，就像你买了书架还没挑书。
• 函数只声明了参数但没传：比如写了个函数 function getPrice(price) { return price; }，你调用的时候只写 getPrice()，没给 price 传数字，那 price 就是 undefined，好比你去买奶茶，选了加冰但没说要什么甜度，店员默认给的“没说”的状态。
• 对象里找不存在的属性：比如你的购物车是 cart = { milk: '10元' }，你想查 cart.bread，系统找不到这个属性，就返回 undefined，就像翻购物车只找到牛奶，没看到面包。

null 又是什么？

再看 null，它是“主动告诉系统‘这里就是空的’”，相当于你租了房子后，临时把所有东西都搬空，特意跟房东说“这个位置暂时不用，我把东西全拿出去了”。

同样举几个开发里的常见场景：

• 清空变量的手动赋值：比如你之前存了购物车 let cart = { milk: '10元' };，现在要清空它，就写 cart = null，这是你主动告诉系统“这个变量现在是空的，没有任何数据”，就像你买完东西，把购物车扔了，跟商家说“这个车不用了”。
• 函数特意返回“空结果”：比如你写了个找用户的函数 function findUser(id) { if 找不到用户，就返回 null; }，这里的 null 是明确的“没有找到这个用户”，而不是系统默认的空，好比你去便利店找某款没进货的饮料，店员特意告诉你“这款没有”，而不是忘了给你找。

最关键的区别，就看这两点

很多人会问，都是空，为什么要分两个？其实核心区别就两个：

• 来源不一样：undefined 是系统“自动给的空”，你没管它，它自己冒出来的；null 是你“主动给的空”，是你特意写的，不是系统默认的。
• 数据类型不一样：这是很多新手容易忽略的点，你去控制台敲 typeof undefined，会输出 undefined——它的类型就是自己；但敲 typeof null，会输出 object，这是JS早期的一个小bug，但也是客观存在的区别，相当于你虽然说“这个位置空了”，但系统还是给它贴了“物品架”的标签，只是里面没东西。

举个生活化的例子：你有个抽屉，undefined 是你买了抽屉，没放任何东西，抽屉本身就是“空抽屉”；null 是你把抽屉里所有东西都拿出来，还特意在抽屉上贴了“空抽屉”的标签，虽然看起来一样，但来源和标记完全不同。

最后说个实用的小提醒：判断空值时，别直接用 ==，比如 undefined == null 会返回 true，但用 === 就会区分开。如果是要“手动清空变量”，就用 null；如果是“检查有没有赋值”，用 undefined 就好，搞懂这两个的区别，能少写好多debug的时间。