JavaScript 中一行代码实现对象键值数组的条件追加操作-js教程-PHP中文网

JavaScript 中一行代码实现对象键值数组的条件追加操作

本文介绍如何使用空值合并赋值运算符（??=）配合数组方法，在 javascript 中用单行代码安全地向对象中可能未定义的键对应数组追加元素，避免重复初始化逻辑。

本文介绍如何使用空值合并赋值运算符（??=）配合数组方法，在 javascript 中用单行代码安全地向对象中可能未定义的键对应数组追加元素，避免重复初始化逻辑。

在日常开发中，我们常需对嵌套结构的对象进行“存在则追加、不存在则创建再追加”的操作。例如，按 ID 分组存储布尔值、ID 列表或任意数据时，典型模式是先检查键是否存在、再初始化空数组、最后调用 push()。这种三步逻辑若散落在多处，不仅冗余，还易出错。

幸运的是，ES2021 引入的空值合并赋值运算符（??=）完美适配该场景：它仅在左侧操作数为 null 或 undefined 时才执行右侧表达式，并返回赋值后的值。关键在于——??= 是一个表达式，而非语句，因此可链式调用方法：

const myObj = {};
const myKey = '1234';
const myValue = true;

(myObj[myKey] ??= []).push(myValue);

✅ 这行代码等价于：

若 myObj[myKey] 为 null 或 undefined，则赋值为空数组 []；
无论是否新创建，都确保 myObj[myKey] 是一个数组；
立即在其上调用 .push(myValue)，完成追加。

⚠️ 注意事项：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

不要写成 myObj[myKey] ??= [...myObj[myKey], myValue] —— 这会因解构未定义数组而抛出 TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined；
??= 仅对 null/undefined 生效，若 myObj[myKey] 是 false、0 或 ''，仍会被视为“已存在”，不会覆盖，符合预期；
若需支持旧版浏览器，可用 ||= 替代（但注意 0、'' 等 falsy 值会被误判为“不存在”）；
TypeScript 中无需额外类型断言，只要 myObj 类型声明包含 [key: string]: any[] | undefined 或更精确的映射类型（如 Record<string unknown></string>），类型推导即可正确识别。

? 进阶技巧：若需批量追加多个值，可封装为工具函数，但仍保持单行核心逻辑：

const upsertArray = <t>(obj: Record<string t>, key: string, ...values: T[]) => 
  (obj[key] ??= []).push(...values);

// 使用
upsertArray(myObj, '1234', true, false, 'hello');</string></t>

综上，(obj[key] ??= []).push(value) 是简洁、安全、标准且类型友好的单行解决方案，推荐作为条件数组追加的默认写法。