展开运算符实现对象与数组混合结构的深度更新方法

本文深入解析了如何巧妙运用展开运算符实现对象与数组混合嵌套结构的深度、不可变更新——核心在于“逐层重建”而非简单解构：从外到内复制每一级未修改的结构，仅在目标路径末端精准替换值；同时结合计算属性名（如[sectionId]）动态处理不确定键名，轻松应对section-1/section-2等场景，既保障状态不可变性，又彻底规避直接修改原数据带来的副作用，是React等现代前端框架中高效、安全更新复杂状态的实用范式。

用展开运算符做深层次更新，关键不是“解构”，而是“逐层重建”——它不拆开对象取值，而是复制路径上每一层结构，只在目标位置替换新值。这种方式天然契合不可变更新要求，也避免了直接修改原数据引发的副作用。

更新嵌套对象中的单个字段

当状态是类似 { user: { profile: { name: 'Alice', age: 30 } } } 的结构，要改 profile.age，就得从外到内逐层展开：

• 先展开顶层对象，保留其他字段（如可能存在的 settings、token）
• 再展开 user 对象，保留 user.id、user.email 等未改动字段
• 接着展开 profile，最后只覆盖 age

写法示例：