下面给你一份 《JavaScript 中 undefined 的正确打开方式详解（2025 最全总结版）》，内容清晰、有例子、有坑点，是非常适合做学习笔记或博客文章的完整版。

🧩 一文彻底搞懂 JavaScript 中的 undefined

在 JS 中，undefined 是出现频率最高但也最容易被误解的概念之一，它既是类型也是值，也是无数 Bug 的来源。

本文从基础 → 原理 → 场景 → 实战 → 坑点 → 最佳实践，全方面讲清楚。

📌 1. undefined 是什么？

在 JavaScript 中：

• undefined 是一个原始类型（primitive type）
• 其唯一的值也叫 undefined

即：

typeof undefined === "undefined"; // true

它表示：

一个变量 已声明但未赋值。

📌 2. 哪些情况会出现 undefined

下面是最常见的 六种情况：

✔ 2.1 变量声明但未赋值

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

✔ 2.2 访问对象中不存在的属性

const obj = {};
console.log(obj.name); // undefined

✔ 2.3 函数没有 return，默认返回 undefined

function foo() {}
console.log(foo()); // undefined

✔ 2.4 调用函数时参数缺失

function sum(a, b) {
  console.log(b); // undefined
}
sum(1);

✔ 2.5 读取数组越界

const arr = [10, 20];
console.log(arr[5]); // undefined

✔ 2.6 void 运算符固定返回 undefined

console.log(void 0);        // undefined
console.log(void (1 + 2));  // undefined

📌 3. undefined 与 null 的区别（面试常考）

一句话记：

undefined = 缺失
null = “没有值”，是你主动给的

📌 4. undefined 的错误使用方式（踩坑警告 ⚠️）

❌ 4.1 不要手动写 undefined

你完全可以：

let x = undefined;    // ❌ 不要这样写！

实际推荐：

let x;                // ✔ 自动就是 undefined

❌ 4.2 早期 undefined 可以被篡改（现在不会）

早期浏览器允许：

undefined = 123;

为了避免风险，经典写法：

(function(undefined) {
  // inside: undefined is safe
})();

现在 ES5+ 的所有现代环境已禁止修改 undefined。

📌 5. 判断 undefined 的正确方式（最佳实践）

✔ 推荐 5.1：使用严格相等

if (x === undefined) {}

✔ 推荐 5.2：使用 typeof（避免变量未声明报错）

if (typeof x === "undefined") {}

优点：即使 x 没有声明也不会报错。

✔ 推荐 5.3：使用 null 合并操作符（ES2020+）

let value = input ?? "default";

它会在 null 和 undefined 时取默认值。

📌 6. undefined 的常见陷阱

⚠ 6.1 对象深层属性容易报错

console.log(user.info.address.city); 
// TypeError: Cannot read property ‘address’ of undefined

解决 → 可选链：

console.log(user?.info?.address?.city);

⚠ 6.2 undefined 会被 JSON.stringify 忽略

JSON.stringify({ x: undefined });
// "{}"

在数组中会变为 null：

JSON.stringify([1, undefined, 3]);
// "[1,null,3]"

⚠ 6.3 undefined 与 null 的 == 比较

undefined == null  // true

但 !==：

undefined === null // false

📌 7. undefined 的正确使用（最佳实践）

✔ 场景 1：区分“没有传值”与“传了 undefined”

function test(a) {
  if (a === undefined) console.log("参数未传");
}

✔ 场景 2：参数默认值

function greet(name = "Guest") {
  console.log(name);
}

greet();           // Guest
greet(undefined);  // Guest
greet(null);       // null

✔ 场景 3：API 设计中用 null 表示“空值”

例如：

let data = null; // 后端明确表示没有数据

而不是：

let data = undefined; 

📌 8. undefined 的高阶技巧

⭐ 8.1 使用 void 0 代替 undefined（不推荐但你可能会见到）

因为 void 0 永远返回 undefined：

const u = void 0;   // 永远是 undefined

某些老代码这样写是为了防止 undefined 被修改。

⭐ 8.2 判断变量是否定义但未声明

if (typeof someVar === "undefined") {
  console.log("someVar 未声明或未定义");
}

🎯 9. 最终总结（最简版）

• undefined 是类型也是值
• 表示“变量已声明但未赋值”
• 自动出现：对象不存在属性、函数无返回值、参数缺失等
• 使用 typeof 判断最安全
• JSON 会忽略 undefined
• 可选链 ?. 能避免 undefined 报错