JavaScript中修改嵌套属性保持不可变性的关键是返回全新引用对象而非修改原对象；常用展开运算符逐层复制（如{...obj, nested: {...obj.nested, key: val}}），或用Immer以可变语法自动产出不可变副本。
在 JavaScript 中修改嵌套属性时保持不可变性，关键不是“避免修改”，而是“不直接改原对象，而是返回一个结构等价但全新引用的新对象”。这能防止副作用、便于状态追踪和调试，尤其在 React、Redux 或复杂表单场景中至关重要。
用展开运算符逐层创建新对象
对浅层嵌套（如两层）可用 {...obj, nested: {...obj.nested, key: newValue}} 的方式。它只复制当前层级，但必须手动展开每一级，否则会保留对深层对象的引用。
- 错误写法（仍共享引用）：
const newObj = { ...user, profile: { ...user.profile, city: 'Beijing' } };—— 若profile里还有address对象，address内部仍可被改 - 正确写法（三层示例）：
const newObj = { ...user, profile: { ...user.profile, address: { ...user.profile.address, zip: '100000' } } };
用 map + 展开处理数组中的嵌套对象
当目标是数组中某个对象的嵌套字段（比如商品列表中 ID 为 44 的 item 的 specs.color），应结合 map() 和展开语法，只替换匹配项，其余保持原样。
- 示例：更新
list中id === 44的对象，将其specs.color改为'gold'
const newList = list.map(item =><br> item.id === 44<br> ? { ...item, specs: { ...item.specs, color: 'gold' } }<br> : item<br>); - 注意：若
specs本身是null或undefined，需先做安全展开，例如specs: { ...(item.specs || {}), color: 'gold' }
用 Immer 简化深层更新逻辑
手写多层展开易出错、难维护。Immer 允许你用“看似可变”的写法，内部自动产出不可变副本，适合中大型项目。
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install immer - 使用：
import { produce } from 'immer';
const nextState = produce(originalState, draft => {<br> draft.users[0].profile.address.zip = '100000'; // 直接赋值<br>}); - 优势：支持任意深度、数组索引、条件分支；语法接近直觉，无需记忆展开路径
避免常见陷阱
不可变性容易因引用残留而失效，以下操作需特别留意：
- 不要用
JSON.parse(JSON.stringify(obj))处理函数、Date、undefined、循环引用等值——它会丢失类型和数据 - 不要依赖
Object.freeze()实现不可变更新——它只能防止修改，不能帮你生成新对象 - 数组方法如
push/splice是可变的，一律改用concat、filter、map或扩展运算符 - 深层克隆库（如
lodash.cloneDeep）适合一次性快照，但性能开销大，不宜高频调用
