
本文介绍如何使用空值合并赋值运算符(??=)配合数组方法,在 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 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记(深入)”;
- 不要写成
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');
综上,(obj[key] ??= []).push(value) 是简洁、安全、标准且类型友好的单行解决方案,推荐作为条件数组追加的默认写法。

















