如何利用 Map 维护“撤销/重做”栈：关联原始操作与对应副本-js教程-PHP中文网

map 可通过键值对映射实现高效撤销重做：键为唯一操作标识，值存快照或命令对象；配合 undo/redo 栈管理顺序，避免重复存储与引用污染，并支持多粒度回溯。

如何利用 map 维护“撤销/重做”栈：关联原始操作与对应副本

Map 本身不直接提供栈结构，但能高效关联原始操作与它的状态副本——关键在于用键（key）作操作标识，值（value）存对应快照或命令对象，从而建立“操作 ⇄ 副本”的明确映射关系。

不把 past/present/future 当成三个独立数组硬编码，而是用一个 Map 统一管理：

键（key）：可为时间戳、递增序号、或操作类型+唯一ID（如 "delete-node-123"），确保每次操作有唯一身份
值（value）：存该操作生效前的深拷贝状态（如 structuredClone(present)），或封装了执行/逆向逻辑的命令对象
例如：historyMap.set('add-text-456', { before: {...}, after: {...}, revert: () => {...} })

Map 负责“查”，栈负责“序”。典型组合方式：

Coding Agent Loops

一款AI工具，主要用于在持久tmux会话中运行AI编码代理(Codex、Claude Code)，使用Ralph重试循环和完成钩子处理多步骤编码任务，适合需要提升相关任务效率的用户。

下载

维护两个数组栈：undoStack: string[]（存 key 列表），redoStack: string[]（同理）
执行操作时：生成唯一 key → 存入 Map → push 到 undoStack → 清空 redoStack
undo 时：pop undoStack 得到 key → 从 Map 取出对应副本或 revert 方法 → 应用还原 → 将该 key push 到 redoStack
这样既保留操作语义（key 可读、可审计），又避免在栈里重复存储大对象

Map 中的 value 若直接引用原始对象，会导致快照失效或意外修改：

写入前必须做浅层或深层隔离：优先用 structuredClone()；降级用 JSON.parse(JSON.stringify(obj))（注意函数、Date、undefined 会丢失）
对大型数据（如含图片的图层），value 不存全量，改存 diff 对象：{ field: 'opacity', oldValue: 0.5, newValue: 0.8 }
定期清理：当 Map.size 超过阈值（如 100），按 undoStack 顺序移除最老 key，并从 Map.delete(key)