深拷贝是确保撤销重做快照独立隔离的关键手段，因浅拷贝仅复制第一层属性，嵌套对象仍共享引用，修改会污染历史状态；推荐使用structuredClone（现代浏览器）、JSON.parse(JSON.stringify())（简单场景）或lodash.cloneDeep（兼容兜底）。
在撤销重做功能中存快照，核心是每次操作后保存数据的**独立副本**，避免后续修改污染历史状态。JavaScript 中深拷贝不是目的，而是手段——关键是确保快照与当前数据完全隔离。
为什么不能用浅拷贝或引用？
浅拷贝（如 Object.assign、展开运算符）只复制对象第一层属性，嵌套对象仍共享引用。一旦后续修改了某个数组项或子对象，所有依赖它的快照都会“意外同步变化”，撤销时还原出错。
例如：
let state = { user: { name: 'Alice' }, tags: ['a', 'b'] };
let snapshot = { ...state }; // 浅拷贝
state.user.name = 'Bob'; // 修改嵌套对象
console.log(snapshot.user.name); // → 'Bob'（错误！快照被污染）
推荐的深拷贝方式（兼顾安全与实用性）
不追求“绝对通用”，而选**稳定、可预测、能处理常见结构**的方法：
立即学习“Java免费学习笔记（深入）”；
-
JSON 序列化反序列化（适用多数场景）：
✅ 简单、无循环引用时可靠、性能好；
❌ 不支持函数、undefined、Symbol、Date、RegExp、Map/Set、BigInt、循环引用；
用法：JSON.parse(JSON.stringify(currentState)) -
structuredClone（现代浏览器首选）：
✅ 原生支持 Map、Set、Date、RegExp、ArrayBuffer 等，能处理循环引用；
❌ Safari 16.4+、Chrome 98+、Firefox 97+ 支持，旧环境需降级；
用法：structuredClone(currentState) -
Lodash 的
cloneDeep（兼容性兜底）：
✅ 全面支持各类类型和边缘情况；
❌ 额外依赖，体积略大；
用法：_.cloneDeep(currentState)
撤销重做栈中如何正确存快照
关键不在“怎么拷”，而在“什么时候拷、拷什么”：
- 只对**真正变化的数据结构**做深拷贝，比如整个应用状态对象或编辑器内容树，不要对 UI 状态（如滚动位置、焦点）快照
- 每次用户触发可撤销操作（如输入、删除、拖拽完成）后，立即执行深拷贝并 push 到
undoStack，同时清空redoStack - 避免在监听器里频繁快照（如 keyup 实时存），应节流或仅在语义明确的操作结束时存
- 示例逻辑片段：
// 操作前保存快照
function performEdit(newContent) {
undoStack.push(structuredClone(currentState));
redoStack.length = 0; // 清空重做栈
currentState.content = newContent;
}
进阶注意：性能与内存优化
深拷贝开销随数据量增长，大文档或复杂状态需权衡：
- 对超大数组/对象，考虑“差异快照”（如只存变更路径 + 值），但实现复杂，一般项目不必要
- 限制 undo 栈长度（如最多 50 步），老快照自动移除，避免内存堆积
- 如果状态含大量静态数据（如配置项），可拆分状态：动态部分深拷贝，静态部分只存引用
