数据结构可视化
用快照逐步回放栈、队列、双端队列、链表、二叉搜索树、哈希表（链地址法）与最小堆的插入、删除、查找过程，每一步都能看到结构描述与元素顺序。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
结构与操作
结构操作都在 data-structure-viewer.ts 里以纯函数实现，每一步之后的快照由 describeState 生成，界面只负责回放；哈希表用链地址法。
快照回放
0无[]
这一步：初始状态 · 成功 · 返回 无
操作步骤
这个工具能做什么
- 讲数据结构时按快照逐步演示：栈的 LIFO、队列的 FIFO、双端队列的两端操作、链表的插入位置，都能一眼看出每一步之后结构长什么样。
- 验证二叉搜索树的退化：把 1、2、3、4、5、6、7 依次插入，看树高一路涨到 7（等价于链表），再换成乱序插入对比树形。
- 检查哈希表的分布：插入 1、8、15 看它们挤在同一个桶里形成链，调大桶数或换一批键，链长立刻变化。
- 排查最小堆的上浮下沉：每次 push / pop 之后确认「父节点不大于子节点」是否仍然成立，堆顶是否一直是最小值。
示例
输入
数据结构选「栈」，脚本：insert 1 / insert 2 / insert 3 / peek / delete / delete
输出
[] → [1] → [1, 2] → [1, 2, 3] → peek 返回 3 → delete 返回 3 → delete 返回 2，最终快照是「1」，标注「栈顶 1」，元素个数 1
第 0 帧是初始状态，之后每执行一行脚本多一帧。失败的操作同样会留下一帧：快照与上一帧一致，只是状态标记为失败并给出原因（例如空栈 delete 会报「结构是空的，不能删除或查看」）。
常见问题
链表为什么画成了一串值，而不是带指针的节点？
这里展示的是链表的逻辑顺序（1 -> 2 -> 3 -> null），用顺序表保存元素，便于单测和快照回放；真正要观察指针本身、内存地址或节点对象的场景，用调试器或专门的链表可视化更合适。插入位置（insert-at 的下标）仍然是链表语义。
插入重复的键会怎样？
二叉搜索树和哈希表都按「集合」语义处理：键已经存在时不做任何改动，快照保持不变，并在这一步旁边标注「重复键已忽略」。最小堆允许重复值，因为堆里存的是可以重复的优先级。链表的 insert 是追加，不涉及去重。
哈希表的桶数怎么选？
桶数决定键落在哪条链上，工具里用「先取模再修正」的方式计算下标，所以负数（例如 -1）也能落到合法桶。桶数选质数、且明显大于元素个数时链最短；把桶数调小或插入 1、8、15 这类同余的键，就能看到链变长、查找退化成线性扫描。
最小堆的数组看起来不是有序的，是不是错了？
没有错。堆只保证「父节点不大于子节点」这一条性质，所以堆顶一定是最小值，但兄弟之间没有顺序，数组整体不是升序。想拿到有序结果需要连续 pop：每次弹出堆顶再把最后一个元素下沉，弹出的序列才会是升序。
操作失败之后结构会变成什么样？
什么都不变。失败的操作（空结构上删除、删除不存在的键、下标越界、结构不支持该操作）只记录一条失败步骤，快照与上一帧完全相同，因此可以放心地把整段脚本跑到底，再回看每一步哪里出了问题。
关键词：data structure viewerbinary search treehash tablemin heaplinked listdequealgorithm visualization数据结构可视化二叉搜索树哈希表最小堆链表栈与队列快照回放