下面给你一份 超清晰、最新、实战级别 的

《JavaScript 中空值合并运算符 ?? 使用详解》

这是 ES2020 引入的新特性，用起来比 || 更安全、更聪明。

✅ 一、空值合并运算符 ?? 是什么？

语法：

a ?? b

含义：

👉 当 a 为 null 或 undefined 时，返回 b；否则返回 a。

换句话说：

🎯 二、它和 || 的关键区别

|| 会把 0 "" false 都当作空
?? 只会把 null 和 undefined 当作空

对比例子 👇

使用 ||

const n1 = 0 || 5;
console.log(n1); // 5（因为 0 被当成“假”）

使用 ??

const n2 = 0 ?? 5;
console.log(n2); // 0（保留真实 0）

这就是 ?? 的最大价值！

✅ 三、常用场景（超实用）

⭐ 场景 1：接口（API）返回值可能为 null

const user = apiResponse.user ?? {};

接口如果返回：

• user = null → 返回 {}
• user = undefined → 返回 {}
• user = {} → 返回 {}

⭐ 场景 2：表单默认值

const age = form.age ?? 18;

即使用户输入 age=0（合法年龄）也不会被替换。

⭐ 场景 3：对象属性不存在时设置默认值

const width = config.width ?? 300;

⭐ 场景 4：短路赋值（推荐写法）

替代旧写法：

let a = a !== null && a !== undefined ? a : 10;

新写法：

a = a ?? 10;

更干净、可读性更高。

⭐ 场景 5：从 localStorage 获取数据时

const theme = localStorage.getItem("theme") ?? "light";

如果主题值为空字符串 "dark" → 不被覆盖
如果为 null → 返回 light

⭐ 场景 6：函数参数默认值

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

🚫 四、?? 不能与 ||、&& 混用（必须加括号）

下面写法会报错：

a || b ?? c

必须写：

a || (b ?? c)

🎯 五、终极总结（适合背诵）

推荐：只要希望保留有效的 0 “” false → 用 ??