数组实现状态回滚本质是存储可还原的纯数据快照，需用JSON或深拷贝避免引用污染，配合history、redoStack和currentIndex三者管理撤销重做逻辑。
用数组实现状态回滚，本质是把“变量在某时刻的值”存进数组，再通过索引倒退还原。它适合轻量场景（如表单草稿、配置暂存、命令行工具中间态），不依赖复杂框架，但要注意边界和数据完整性。
用数组存快照：关键不是存值，而是存“可还原的状态”
直接 push 原始变量容易出错——比如对象引用被后续修改、资源句柄丢失、或数组里混了不可序列化的值。真正能安全回滚的，是经过处理的纯数据快照：
- 基础类型（字符串、数字、布尔）可直接存
- 对象/数组建议用 JSON.stringify() + JSON.parse() 转成不可变副本，避免引用污染
- 含函数、Date、RegExp、undefined 或循环引用的对象，需用更健壮的深拷贝方案（如 structuredClone，或第三方库）
- 不要存文件句柄、数据库连接、DOM 元素等运行时资源，它们无法跨快照复用
实现一个带撤销/重做的数组栈管理器
只需两个数组 + 一个当前指针，就能支撑基础回滚逻辑：
- history: string[] —— 存所有已确认的历史快照（JSON 字符串）
- redoStack: string[] —— 存刚被撤销的快照，供重做使用
- currentIndex: number —— 指向 history 中“当前生效”的位置（初始为 -1，表示尚未触发任何操作）
每次保存新状态时：
– 把当前快照推入 history，currentIndex++
– 同时清空 redoStack（新操作打断重做链）
撤销时：
– 若 currentIndex > 0，则 currentIndex--，并把 history[currentIndex] 解析还原
– 将刚撤销的快照 push 到 redoStack
重做时：
– 若 redoStack.length > 0，pop 一个，解析后赋值，并 push 回 history，currentIndex++
实战：表单输入的自动快照与一键恢复
以一个用户名输入框为例，配合防抖和容量限制：
- 监听 input 事件，每 800ms 触发一次快照（避免高频打点）
- 快照内容只存 { username: value }，转成 JSON 字符串后压入 history 数组
- history 最多保留 20 条，超出时 shift() 删除最老一条
- 点击「撤销」按钮：currentIndex-- → 取 history[currentIndex] → JSON.parse() → 赋值给 input.value
- 「重做」按钮启用条件：redoStack.length > 0 且 currentIndex
这样既避免了手动深拷贝开销，又规避了单列表无法截断分支的问题——因为每次新操作都重置 redoStack，历史线性清晰。
容易踩坑的细节
数组回滚看着简单，但几个点不注意就会失效：
- 空栈访问：调用 history[currentIndex] 前必须检查 currentIndex 是否有效（≥ 0 且
- JSON 无法处理的值：new Date()、/abc/g、undefined 会被 JSON.stringify 忽略或转成 null，需提前转换（如 Date → ISO 字符串）
- UI 同步滞后：还原快照后记得触发 input 事件（如 dispatchEvent(new Event('input', { bubbles: true }))），否则 Formily、Vue 等响应式系统可能不更新视图
- 内存不释放：长时间运行的页面要定期清理 history（比如只保留最近 5 分钟内的快照），防止数组无限增长
