JavaScript ?? 空值合并运算符详细讲解-马育民老师

# 介绍

**空值合并运算符（Nullish Coalescing Operator）**，语法：`a ?? b`

- 仅当 **`a` 为 `null` 或 `undefined`** 时，返回 `b`；
- 否则直接返回 `a`。
- ES2020 新增语法，专门解决 **逻辑或 `||` 的缺陷**。

# 简单示例
```javascript
// 1. 左侧是 null / undefined → 返回右侧
console.log(null ?? 100);      // 100
console.log(undefined ?? 200); // 200

// 2. 左侧是其他值（0、''、false、NaN 等）→ 返回左侧
console.log(0 ?? 99);          // 0
console.log('' ?? '默认值');    // ''
console.log(false ?? true);     // false
console.log(NaN ?? 66);         // NaN
console.log(123 ?? 456);       // 123
```

# 和 || 逻辑或 核心区别

`||` 会把**所有假值**（`0、''、false、NaN、null、undefined`）都判定为“空”，这是日常踩坑点。

| 表达式 | `??` 结果 | II 结果 | 说明 |
|--------|-----------|-----------|------|
| `0 ?? 10` | 0 | 10 | `0` 不是 null/undefined，`??` 保留原值 |
| `'' ?? 'hello'` | `''` | `hello` | 空字符串被 `II` 误判为空 |
| `null ?? 5` | 5 | 5 | 两者表现一致 |
| `undefined ?? 8` | 8 | 8 | 两者表现一致 |

**实战场景对比**

```javascript
// 场景：给分数设置默认值，分数允许为 0
const score = 0;

// 错误：|| 把 0 当成假值，覆盖了有效数据
const res1 = score || 60; 
console.log(res1); // 60

// 正确：?? 只处理 null/undefined，保留合法的 0
const res2 = score ?? 60;
console.log(res2); // 0
```

---

# 链式使用

支持连续链式写法，从左到右依次判断：
```javascript
let a = undefined;
let b = null;
let c = '正常值';

console.log(a ?? b ?? c ?? '兜底'); // 正常值
```

---

# 结合赋值：??= 空值合并赋值运算符

ES2021 新增，语法：`x ??= y`
等价于：`if (x === null || x === undefined) { x = y }`

示例：
```javascript
let num = undefined;
num ??= 10;
console.log(num); // 10

let str = '';
str ??= 'test';
console.log(str); // '' （空字符串不处理）
```

---

# 运算优先级 & 括号规则

1. **优先级**：`??` 优先级 **低于 `&&`、`||`**
2. **禁止混用**：`??` 不能直接和 `&&` / `||` 连写，**必须加括号**，否则报错

```javascript
// 报错：语法错误，不能直接混合 && ||
// 1 || 2 ?? 3

// 正确：用括号明确优先级
console.log((1 || 2) ?? 3); // 2
console.log(1 || (2 ?? 3)); // 1
```

---

# 典型使用场景

1. **给变量设置默认值（允许 0、空字符串）**
```javascript
const config = { pageSize: 0 };
const page = config.pageSize ?? 10; // 0（保留合法数值）
```

2. **接口返回数据容错**
```javascript
// 接口字段可能为 null/undefined，但合法值包含 0、''
const data = res.data?.name ?? '匿名用户';
```

3. **对象属性兜底**（常搭配可选链 `?.` 使用）
```javascript
const username = user?.info?.nickname ?? '游客';
```

# 总结
1. `a ?? b`：**只认 `null` 和 `undefined`**，其余值全部保留；
2. 对比 `||`：`||` 是**所有假值都替换**，`??` 更精准；
3. 搭配 `?.` 可选链、`??=` 赋值运算符，是前端容错主流写法；
4. 和 `&&`/`||` 混用必须加括号。

原文出处：http://malaoshi.top/show_1GW3ScRSDQjy.html