用数组实现版本控制快照的核心是每次变更前将关键字段浅拷贝存入snapshots数组，通过currentindex索引回溯；支持undo/redo及diff比对，仅存差异字段可节省空间。
用数组实现版本控制快照，核心是把每次状态变更前的值“存档”为一个快照，再通过索引回溯。不需要复杂框架，靠一个数组 + 一个当前状态变量就能模拟基础的 undo/redo 和差异比对。
快照数组结构设计
定义一个数组 snapshots，每个元素是一个对象，记录某次快照时所有关键变量的值。不存整个应用状态，只存你关心的、会变的变量（比如编辑器内容、表单字段、计数器）。
例如：
const snapshots = [];let state = { title: "未命名", content: "", version: 1 };
保存快照：浅拷贝关键字段
每次用户操作（如输入、提交、切换）前，把当前 state 的关键字段复制一份推入数组。注意：直接 push(state) 是引用，必须深拷贝或手动提取字段。
- 简单场景用对象展开：snapshots.push({ ...state });
- 只存差异字段更省空间：snapshots.push({ title: state.title, content: state.content });
- 加时间戳和版本号便于调试：snapshots.push({ ...state, timestamp: Date.now(), id: snapshots.length + 1 });
回退与恢复：用索引控制指针
维护一个 currentIndex 指向当前生效的快照位置（-1 表示初始无快照，0 表示第一个快照）。回退就是 currentIndex--，恢复就是 currentIndex++，然后用对应快照覆盖当前 state。
- 回退逻辑：if (currentIndex > 0) { currentIndex--; state = { ...snapshots[currentIndex] }; }
- 恢复逻辑：if (currentIndex
- 初始快照可主动触发一次：saveSnapshot(); // 初始化存一份空状态
计算变量差异：对比相邻快照
要看出“改了什么”，遍历两个快照对象的 key，逐个比较值是否变化。适合做变更高亮、日志输出或条件触发。
function diffSnapshots(prev, next) {const changes = {};
Object.keys({...prev, ...next}).forEach(key => {
if (prev[key] !== next[key]) {
changes[key] = { from: prev[key], to: next[key] };
}
});
return changes;
}
调用：diffSnapshots(snapshots[2], snapshots[3]) 就能拿到第 3 次操作带来的具体变化字段。
