在现代 TypeScript/JavaScript 中，`??=` 是一个非常实用却容易被忽略的语法糖。这种语法源于 ECMAScript 的 **空值合并赋值操作符（ nullish coalescing assignment operator ）**，它与 TypeScript 的静态类型系统结合使用时，可以大幅简化代码，让默认值赋值这一常见模式变得更简洁、安全和语义明确。([MDN Web Docs][1])

下面将从概念、原理、行为细节、与其它类似写法的对比、真实场景示例、常见坑、类型系统交互等方面进行深入、细致的讲解。文章会尽量用直观的语言结合示例，让你从本质上理解这个操作符。

在讲解之前，先提醒一下：**本文所有 TypeScript/JavaScript 代码示例既适用于 TypeScript 编译阶段，又会在输出的 JavaScript 中遵循 ECMAScript 规范行为。**

---

## `??=` 是什么？

简单来说，`??=` 是一种复合赋值操作符，用来根据当前变量的值是否为 **null 或 undefined**（统称为 “空值”），来决定是否对它进行赋值。可以把这句话翻译成这句等价逻辑：

```
x ??= y
```

约等同于：

```
if (x === null || x === undefined) {
  x = y;
}
```

不过它比上面的写法更简洁、更优雅，并且在很多情况下性能更好（尤其是在复杂的表达式或对象属性赋值时）。([MDN Web Docs][1])

关键点在于 “**只在 x 是 null 或 undefined 时才将 y 赋给 x**”，如果 x 已经有一个非 null/undefined 的值，它就不会改变。这就是 **“空值合并赋值”** 的含义。

---

## 为什么会有 `??=` 存在？

在日常开发中，我们经常会写这样的代码：

```ts
let value = someInput;
if (value === null || value === undefined) {
  value = defaultValue;
}
```

或者更常见的写法：

```ts
const result = value ?? defaultValue;
```

这种写法虽然简洁，但表达式的结果只是产生一个新的值，**不会改变原来的变量**。用 `x ??= y` 的优势在于：

1. **直接修改变量本身**：不需要额外的临时变量。
2. **不覆盖有意义的值**：比如 `0`、空字符串等不是 null/undefined 的值都不会被覆盖。
3. **语义更明确、更短**：直观传达 “如果 x 是空值，则赋予默认值 y”。

---

## 何谓“空值”？为什么只判断这些值？

在 TypeScript/JavaScript 中，“空值”通常指下面两个：

* `null`（显式无值）
* `undefined`（未定义）

使用 `??=` 时，只有这两个值会触发赋值。如果变量是其他 **“假值 falsy”** —— 比如：

* `0`
* `""`（空字符串）
* `false`
* `NaN`

这些值虽然在逻辑判断和 `||` 中会被视作假，但在 `??=` 的语义中，**它们是有效的值，不会触发赋值**。([MDN Web Docs][2])

这个区别本质上强调 TypeScript/JavaScript 开发者在做默认值选择时，经常不希望把有效的数值/空字符串/布尔等被当成无效值。

---

## 与 `||=` 的对比

在现代 JavaScript/TypeScript 中，还有一个类似的复合赋值写法是 `||=`：

```ts
x ||= y
```

这个操作符的行为是：**如果 x 是 “假值 falsy” —— 包括 null、undefined、0、空字符串等 —— 那就把 y 赋给 x。**

这跟 `??=` 最大的区别就在于：

* `||=` 会把很多有效值都视作没有意义（例如数字 0、空字符串），把它们替换掉。
* `??=` 仅针对 null 和 undefined，其他值一律保留。

因此，当你只关心 **空值 null/undefined** 时，应该选 `??=` 而不是 `||=`。([TypeScript][3])

---

## 语义细节与短路行为

`x ??= y` 有一个很重要的特性 —— **短路求值（ short‑circuit evaluation ）**。也就是说：

* 当 x 不是 null/undefined 时，整个表达式结束，y 不会被求值。
* 只有当 x 是空值时，才会对 y 求值并赋值。

这对于避免不必要的函数调用或者副作用特别有用。例如：

```ts
let recordCount;
recordCount ??= expensiveFetchCount();
```

如果 recordCount 已经有值，那么就不会执行 `expensiveFetchCount()` 这个可能很耗时的计算或者 API 调用。([MDN Web Docs][1])

---

## 在对象属性上的使用

在真实项目中，对象常常是最频繁的赋值目标。`??=` 可以优雅地对属性进行默认值控制：

```ts
interface Config {
  timeout?: number;
  retries?: number;
}

function applyDefaults(cfg: Config) {
  cfg.timeout ??= 3000;
  cfg.retries ??= 5;
}
```

这段代码帮助我们在配置项缺失时补上默认值，而不会覆盖已有的有效值。

特别是在处理第三方配置、用户输入等场景时，这种模式非常简洁，比手动写很多 if 判断更可读、更安全。([MDN Web Docs][1])

---

## 与 `? :` 默认参数的比较

在函数参数中，很多开发者也会写：

```ts
function doWork(value = defaultValue) { ... }
```

这种写法确实也很简洁，但它只在调用函数时默认参数缺失或为 undefined 时才会使用默认值。

而 `??=` 更加灵活：

* 它在变量在作用域内已经存在时仍然可用
* 它不会影响函数签名
* 它可以用在任何赋值场景，而不仅限于参数

---

## 使用场景的深入举例

下面我们结合一些真实的复杂例子，来体会 `??=` 的真正价值。

---

### 示例一：初始化对象缓存

```ts
type Cache = Record<string, string[]>;

const cache: Cache = {};

function addValue(key: string, value: string) {
  // 如果 cache[key] 是空，则初始化为数组；
  // 否则向现有数组添加
  cache[key] ??= [];
  cache[key].push(value);
}

addValue("fruit", "apple");
addValue("fruit", "banana");

console.log(cache);
// 结果: { fruit: ["apple", "banana"] }
```

这段代码比传统写法更简洁：

```ts
if (!cache[key]) {
  cache[key] = [];
}
cache[key].push(value);
```

而且它不会因为 cache[key] 是 0 或空字符串等 “假值” 而误触发覆盖逻辑。

---

### 示例二：配置层的默认值覆盖

在配置管理模块中，我们往往要合并默认值和用户配置：

```ts
type AppConfig = {
  name: string;
  port?: number;
  debug?: boolean;
};

function mergeConfig(userCfg: Partial<AppConfig>): AppConfig {
  const config: AppConfig = { name: "MyApp", ...userCfg };

  config.port ??= 8080;
  config.debug ??= false;

  return config;
}

console.log(mergeConfig({ name: "Server01" }));
```

这种写法比多重判断和手动合并更清晰。

---

### 示例三：防止重复初始化

考虑单例模式或惰性初始化：

```ts
let globalLogger: Logger | null = null;

function getLogger(): Logger {
  globalLogger ??= createLoggerInstance();
  return globalLogger;
}
```

上面代码确保 logger 只在第一次使用时创建一次，后面访问不会重复创建。

---

## `??=` 与 TypeScript 类型系统结合

TypeScript 不仅静态检查变量的类型，还会把 `??=` 的逻辑纳入类型缩小（ type narrowing ）中。

例如：

```ts
let maybeNumber: number | undefined;

maybeNumber ??= 42;

// 此时 maybeNumber 的类型仍然是 number | undefined
// 但运行时除非它原先是 undefined，否则不会被赋值
```

这种静态和运行时的分离决定了我们仍然要懂得变量的初始类型，而不是完全依赖 `??=` 来控制类型。

---

## 注意点与陷阱

为了安全使用 `??=`，有几点需要特别注意：

1. **只针对 null 和 undefined 判断**：如果想判断所有 falsy 值（例如 0 或空字符串），要使用 `||=` 或手动判断，而不是 `??=`。
2. **右侧会被延迟求值**：在对象属性上，确保不会发生副作用。例如：

```ts
user.age ??= computeAge();
```

如果 `user.age` 不是 null/undefined，则 `computeAge()` 不会被执行。

3. 对于复杂表达式，避免写得太长，否则可读性降低：

```ts
(getUser()!.name ??= "Unknown"); // 不建议写这样
```

应当拆成明确的语句。

---

## 结语

`??=` 在 TypeScript 中凭借其语义明确、代码简洁以及对 null/undefined 的专门处理，成为日常开发中很有价值的工具，特别是在对象赋值、默认值设置、配置合并等场景。它与 TypeScript 类型系统结合，也让静态检查更可靠。

通过上面的说明和示例，你能够掌握这种语法的本质和良好实践，从而在代码中更加自信而准确地使用它。

欢迎你在你的项目中实际尝试，并体会它在提升代码可读性、减少重复逻辑方面的效果。😄

---

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment?utm_source=chatgpt.com "Nullish coalescing assignment (??=) - JavaScript - MDN"
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing?utm_source=chatgpt.com "Nullish coalescing operator (??) - JavaScript | MDN - Mozilla"
[3]: https://www.typescriptlang.org/play/4-0/new-js-features/logical-operators-and-assignment.ts.html?utm_source=chatgpt.com "Playground Example - Logical Operators and Assignment"


在现代 TypeScript/JavaScript 中，??= 是一个非常实用却容易被忽略的语法糖。这种语法源于 ECMAScript 的 空值合并赋值操作符（ nullish coalescing assignment operator ），它与 TypeScript 的静态类型系统结合使用时，可以大幅简化代码，让默认值赋值这一常见模式变得更简洁、安全和语义明确。(MDN Web Docs)

TypeScript 里 ??= 的作用与使用场合全面解析

紫薇堂堂主

编程语言

前端

深入解析TypeScript/JavaScript中的??=空值合并赋值操作符，详解其与||=的区别、短路特性及实用场景。学习如何简化默认值赋值逻辑，避免覆盖有效值，提升代码可读性和安全性。包含对象属性初始化、配置合并等实战示例，助你掌握这一实用语法糖。

TypeScript 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

TypeScript 里 ??= 的作用与使用场合全面解析-腾讯云开发者社区-腾讯云

TypeScript 里 ??= 的作用与使用场合全面解析

TypeScript 里 ??= 的作用与使用场合全面解析

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐