本文介绍多种简洁、现代的 JavaScript 方式，在对象字面量中一行内条件添加属性，支持 null/undefined 判定，兼容 TypeScript 类型推导，避免冗余的 if 语句或重复赋值。
本文介绍多种简洁、现代的 javascript 方式，在对象字面量中**一行内条件添加属性**，支持 `null`/`undefined` 判定，兼容 typescript 类型推导，避免冗余的 `if` 语句或重复赋值。
在 JavaScript 开发中，我们常需根据变量是否存在（非 null 且非 undefined）来决定是否将某属性注入初始化对象。理想场景下，希望用声明式、单行语法完成，而非先创建对象再逐个 if 赋值——后者不仅冗长，还破坏了对象字面量的可读性与不可变性优势。
✅ 推荐方案：使用扩展运算符（Spread） + 三元条件表达式
ES2015+ 支持在对象字面量中多次使用 ... 展开，结合逻辑判断可实现真正的“条件属性注入”：
let optionA = "Some option";
let optionB = null;
let optionC = undefined;
let optionD = 42;
const obj = {
id: 1,
name: "Object 1",
...(optionA != null ? { optionA } : {}),
...(optionB != null ? { optionB } : {}),
...(optionC != null ? { optionC } : {}),
...(optionD != null ? { optionD } : {})
};
console.log(obj);
// { id: 1, name: "Object 1", optionA: "Some option", optionD: 42 }? 注意：使用
!= null是安全且惯用的写法，它等价于!((val === null) || (val === undefined))，能同时排除null和undefined，但保留0、false、""等 falsy 值（符合“仅跳过空值”的语义）。若需排除所有 falsy 值（如0、""），请改用optionA && { optionA }，但需注意0和false将被误剔除。
? 进阶技巧：封装为可复用工具函数（TypeScript 友好）
为提升复用性与类型安全性，可封装一个泛型工具函数：
立即学习“Java免费学习笔记（深入）”；
// utils.ts
export const optional = <T extends Record<string, unknown>>(
condition: unknown,
obj: T
): Partial<T> => (condition != null ? obj : {});
// 使用示例
const obj = {
id: 1,
name: "Object 1",
...optional(optionA, { optionA }),
...optional(optionB, { optionB }),
...optional(optionC, { optionC })
};TypeScript 能正确推断最终 obj 的联合类型，且编辑器提供完整属性提示。
⚠️ 注意事项与常见误区
- ❌ 不要直接展开
undefined或null：{ ...optionA }在optionA为undefined时会抛出TypeError: Cannot spread 'undefined'；必须确保展开的是对象（哪怕为空{}）。 - ❌ 避免
&&直接展开：...(optionA && { optionA })在optionA为 falsy（如0）时返回0，导致展开失败；应明确用!= null判断。 - ✅ fetch API 的行为是特例：其
body中的undefined属性会被自动忽略，但这属于fetch内部序列化逻辑，并非 JS 语言特性，不可迁移至普通对象构造。 - ✅ 性能无虞：现代 V8 引擎对空对象展开（
...{}）已高度优化，无需担心性能损耗。
✅ 最佳实践总结
| 场景 | 推荐写法 |
|---|---|
| 单个简单条件属性 | { base: 1, ...(cond != null ? { extra } : {}) } |
| 多个条件属性 | 连续使用 ...(cond ? { key } : {})
|
| 高复用/团队项目 | 封装 optional() 工具函数 + TypeScript 泛型 |
| 需兼容旧环境（ | 回退至 Object.assign({}, base, cond ? { extra } : {})
|
通过上述方式，你既能保持代码简洁、声明式，又能精准控制属性存在性，真正实现「按需注入」——让对象初始化既安全，又优雅。
