当需要为深层嵌套属性（如 foo.bar.baz）赋值，而中间层级（如 foo.bar）可能尚未定义时，应避免运行时错误；现代 JavaScript 提供了 ??= 操作符等简洁方案，但可读性与语义清晰度同样关键。
当需要为深层嵌套属性（如 `foo.bar.baz`）赋值，而中间层级（如 `foo.bar`）可能尚未定义时，应避免运行时错误；现代 javascript 提供了 `??=` 操作符等简洁方案，但可读性与语义清晰度同样关键。
在 JavaScript 中，直接执行 foo.bar.baz = true 会抛出 TypeError: Cannot set property 'baz' of undefined，前提是 foo.bar 为 undefined 或 null。因此，必须确保中间路径已存在且为对象。
✅ 推荐做法：分步初始化 + 赋值（兼顾可读性与正确性）
最清晰、健壮且符合直觉的方式是显式初始化缺失的父级：
foo.bar ??= {}; // 若 foo.bar 为 null 或 undefined，则赋值为空对象
foo.bar.baz = true;该写法利用 空值合并赋值操作符（??=），仅在左侧为 null 或 undefined 时才执行赋值，保留原有对象引用（如 foo.bar 已存在，则不替换），语义明确、调试友好，且兼容所有支持 ES2020 的环境。
⚠️ 注意事项
❌ 避免使用扩展运算符覆盖原对象（如 { ...foo.bar, baz: true }）：
它会创建新对象，丢失原型链、不可枚举属性及 setter/getter，且当 foo.bar 为 null/undefined 时会报错（...undefined 不合法）。⚠️ ??= 方案虽简洁，但 不建议链式书写（如 (foo.bar ??= {}).baz = true）：
尽管语法正确，但可读性差，易被误读为原子操作，且不利于断点调试和后续维护。? 兼容性提示：??= 自 Chrome 80 / Firefox 74 / Safari 13.1 起支持；若需支持旧环境，请使用 Babel 编译或降级为传统条件判断：
if (foo.bar == null) foo.bar = {};
foo.bar.baz = true;? 进阶建议：封装为工具函数（适用于高频场景）
若项目中频繁操作深层嵌套结构，可封装安全赋值函数（支持点号路径）：
function set(obj, path, value) {
const keys = path.split('.');
const lastKey = keys.pop();
const target = keys.reduce((o, k) => (o[k] ??= {}), obj);
target[lastKey] = value;
}
// 使用示例
set(foo, 'bar.baz', true); // 自动创建 foo.bar（如需）总结：优先选择「显式初始化 + 直接赋值」两步法——它既利用了现代语法的简洁性，又保持了代码的可读性、可维护性与行为确定性。切勿以牺牲清晰度为代价追求单行“炫技”。
