浅拷贝可用于Undo/Redo快照，因其仅复制顶层属性，轻量高效，适用于扁平状态或“只替换不修改”的嵌套对象；但遇原地突变、深层修改或特殊对象时会失效，需改用操作日志、structuredClone或Immer等方案。
在 Undo/Redo 功能中，**用浅拷贝记录单步快照是常见但需谨慎的做法**——它轻量高效，但只适用于状态对象结构稳定、且后续操作不直接修改嵌套引用值的场景。
为什么浅拷贝能用于 Undo/Redo 快照
Undo/Redo 的核心是“保存操作前的状态”，只要每次执行操作前，把当前状态的**可访问顶层结构**保留下来，回退时就能还原到那个视图一致的点。浅拷贝恰好复制了对象第一层属性的值（对基本类型是副本，对引用类型是地址副本），开销小、速度快，适合高频操作（如编辑器光标移动、输入字符）。
- 适用于扁平状态：例如
{count: 5, isActive: true, name: "todo1"}—— 所有字段都是基本类型，浅拷贝即完全隔离 - 适用于“只替换不修改”的嵌套对象：例如状态中有个
user属性，每次更新都赋新对象（state.user = {...oldUser, age: 26}），而非state.user.age = 26，此时浅拷贝仍安全 - 不适合原地突变嵌套字段：如
state.list.push(item)或state.config.theme.color = "#fff"，浅拷贝后快照与当前状态共享数组或深层对象，回退会失效
常用浅拷贝方式及快照记录示例
推荐使用语法简洁、语义明确的方式，在操作前立即生成快照：
-
对象扩展运算符：
const snapshot = {...currentState} -
Array.from() 或展开语法（针对数组状态）：
const snapshot = [...currentList] -
Object.assign()：
const snapshot = Object.assign({}, currentState)（注意不支持 symbol 和不可枚举属性）
实际集成到 Undo 栈中：
立即学习“Java免费学习笔记（深入）”；
let undoStack = [];
let currentState = { count: 0, items: ["a", "b"] };
function increment() {
// ✅ 操作前记录浅拷贝快照
undoStack.push({ ...currentState });
// 执行变更（仅替换顶层字段）
currentState = { ...currentState, count: currentState.count + 1 };
}
function undo() {
if (undoStack.length > 0) {
currentState = undoStack.pop(); // 直接赋值还原快照
}
}
关键注意事项：避免浅拷贝陷阱
浅拷贝不是万能的，以下情况会导致 Undo 失效，必须提前识别：
-
数组方法原地修改：用
.push()、.splice()、.sort()等会改变原数组，快照中的数组引用和当前数组指向同一内存 —— 应改用[...arr, newItem]或arr.toSorted()等返回新数组的方法 -
嵌套对象被直接赋值修改：如
currentState.profile.name = "Alice"，快照里profile仍指向同一对象 —— 应改为currentState = { ...currentState, profile: { ...currentState.profile, name: "Alice" } } - 存在 Date、RegExp、Map、Set 等特殊对象：浅拷贝只复制引用，它们的突变也会穿透快照 —— 若状态含此类值，需单独深克隆或转为可序列化格式（如 ISO 字符串）
何时该放弃浅拷贝，改用其他策略
当状态天然嵌套深、且业务逻辑频繁修改内部字段时，硬扛浅拷贝会增加心智负担和出错概率。这时可考虑：
-
操作日志（Command Pattern）：不存状态快照，而是记录“做了什么”（如
{ type: 'SET_COUNT', payload: 3 }），Undo 时反向执行或重放历史 - 结构化克隆（structuredClone）：现代浏览器支持，可安全深拷贝多数值（包括 Map/Set/Date），适合中等复杂度状态，但注意性能和兼容性
- 不可变数据结构库（如 Immutable.js 或 Immer）：Immer 允许写“像修改原对象一样”的代码，底层自动产生不可变快照，兼顾可读性与安全性
