用map实现撤销/重做需配合版本索引：以递增数字为key存状态快照或操作差异，用currentversion跟踪当前位置；执行操作时清空后续快照并更新；撤销/重做通过增减索引并取值实现；需限制历史长度防内存泄漏。
用 Map 实现撤销/重做，核心是把每次操作后的状态快照存进有序结构中，并能按顺序回退或前进。Map 本身不保证插入顺序（ES2015+ 的 Map 是保持插入顺序的），但仅靠它还不足以直接支持“上一步/下一步”——你需要配合一个指针（索引）来跟踪当前状态位置。
用 Map 存储快照 + 索引控制当前位置
将每次修改后的完整状态（或差异）以时间戳、自增 ID 或版本号为 key 存入 Map，再用一个数字索引（如 currentIndex）记录当前激活的状态位置。
- 执行操作后，先清空该索引之后的所有快照（即丢弃“重做”历史），再把新状态存入 Map，
currentIndex加 1 - 点击撤销时，
currentIndex减 1，然后从 Map 中取出对应 key 的状态恢复 - 点击重做时，
currentIndex加 1，取对应状态恢复 - 注意：Map 的 key 建议用递增数字（如
versionId），避免用 Date.now() 可能重复；value 可存深拷贝后的数据对象，或生成快照的函数调用结果
快照内容建议：存差异（Diff）而非全量
如果状态对象很大（比如画布上百个元素），每次都深拷贝整个对象会浪费内存和时间。可以只记录变更部分：
- 例如用户拖动一个图形，快照只需存
{ type: 'move', id: 'rect-1', from: [10,20], to: [85,42] } - 配合一个可逆的操作函数（如
applyMove()和revertMove()），让撤销/重做变成“执行逆操作” - 这样 Map 的 value 就是轻量级操作描述，而不是大对象副本，适合高频编辑场景
边界处理与内存控制
无限保存快照会导致内存泄漏。需主动限制历史长度：
- 设定最大快照数（如 100 条），每次新增快照前检查：若 Map.size ≥ max，删除最早一条（可用迭代器
Map.keys().next().value获取第一个 key） - 撤销到起点（
currentIndex === 0）或重做到终点（currentIndex === Map.size - 1）时禁用对应按钮 - 注意 Map 删除后，要同步更新
currentIndex：比如删了开头 1 条，所有索引偏移 -1，currentIndex = Math.max(0, currentIndex - 1)
简单示例（基于版本号的 Map 快照）
（伪代码示意逻辑，非可运行完整实现）
const history = new Map(); // versionId → snapshot<br>let currentVersion = -1;<br>const MAX_HISTORY = 50;
执行操作后：
if (history.size >= MAX_HISTORY) {<br> const firstKey = history.keys().next().value;<br> history.delete(firstKey);<br> if (currentVersion >= firstKey) currentVersion--;<br>}<br>const newVersion = currentVersion + 1;<br>history.set(newVersion, deepCopy(currentState));<br>currentVersion = newVersion;
撤销：
if (currentVersion > 0) {<br> currentVersion--;<br> currentState = history.get(currentVersion);<br>}
