算法课作业卡壳
大二计算机系学生做「二叉树层序遍历」的课后作业，手写代码能跑通，但输出顺序总跟预期差一截。在调试器里单步跟了半小时，指针飞来飞去，就是看不出哪一步入队出队顺序错了。把树的节点值按层次敲进本工具，每一步队列里存了哪些节点、先弹出哪个、子节点何时入队，全在可视化面板上一步步展开，一眼发现是右孩子先于左孩子入队。
空结构 — 输入值后操作，或点「随机」
就绪。选择数据结构，输入值后操作。
第一节
关于本工具
About调试链表反转时，纸笔推演和实际运行结果往往对不上——指针的指向变化在脑子里转瞬即逝。这个工具把栈、队列、链表、二叉树和图的操作过程，每一步都渲染成节点与连线的可视化动画，入栈、出栈、插入、删除的指针移动一目了然。所有运算在浏览器本地执行，代码和数据结构都不经服务器，适合算法课跟练、面试前复盘或验证手写实现的正确性。
使用场景
代码面试前突击
后天面一家中厂后端岗，算法题里链表反转是高频考点，但递归写法每次回退时指针怎么指，脑子里总转不过来。把 1->2->3->4 四个节点输进去，选「反转链表」操作，工具把每一层递归调用的栈帧、当前 head 指向哪个节点、返回后 next 指针怎么重新挂接，全部拆成动画步骤。反复拖进度条看三遍，面试时手写一遍过。
自学栈实现计算器
自学编译原理，想写一个支持括号和四则运算的表达式求值程序，卡在运算符优先级处理上。把「3 + 4 * (2 - 1)」输进工具，选「中缀转后缀」模式，看到操作数栈和运算符栈各自怎么压入弹出：乘号优先级高于加号，所以加号先被压在栈底，等乘号算完才弹出。对照着每一步的栈状态，半小时就把代码逻辑写顺了。
图论建模城市地铁
做交通规划课程项目，需要把本市 5 条地铁线、32 个站点抽象成图，用 Dijkstra 算最短换乘路径。手画站点关系图太乱，把每个站作为节点、相邻站之间的运行时间作为边权重输进工具，选「最短路径」模式，工具把松弛过程、已访问节点集合、当前最短距离表全部可视化。发现规划中漏了一条跨线换乘的 2 分钟通道，补上后路径缩短了 12 分钟。
校验队列实现正确性
外包项目里用循环队列做一个消息缓冲池，代码写完后担心边界条件——队列满时再入队、空时再出队，以及头尾指针绕回的逻辑有没有 bug。把 5 个元素依次入队、再出队 3 个、再入队 2 个的操作序列输进工具，选「循环队列」模式，每一步的队首指针、队尾指针、实际存储槽位全部标出来。发现第 4 步头尾指针重合时工具标记了「空/满歧义」，赶紧回去加了一个 size 计数器。
第二节
使用指南
Getting Started使用步骤
- 1在「数据结构」下拉菜单中选中要演示的类型（如栈、二叉树），画布区自动生成对应初始结构图
- 2拖拽节点或点击「插入/删除」按钮，动画逐帧展示元素入栈、出栈或节点旋转过程
- 3右侧「操作记录」面板同步列出每步执行的方法名与参数（如 push(5)），点击记录可回退到对应状态
- 4点击「清空」重置画布，或切换数据结构类型时自动保留当前结构的操作历史供对比
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| push 10, push 20, pop, push 30, pop, pop | 栈操作序列动画：入栈10 → 入栈20 → 弹出20 → 入栈30 → 弹出30 → 弹出10，栈最终为空 | 常规：模拟栈的LIFO（后进先出）基础操作，验证入栈/出栈顺序是否正确 |
| enqueue A, enqueue B, dequeue, enqueue C, dequeue, dequeue | 队列操作序列动画：入队A → 入队B → 出队A → 入队C → 出队B → 出队C，队列最终为空 | 常规：展示队列FIFO（先进先出）特性，与栈形成对比，帮助理解两种结构的区别 |
| insert 5, insert 3, insert 7, insert 2, insert 4, insert 6, insert 8 | 二叉搜索树（BST）结构图：根节点5，左子树3→2/4，右子树7→6/8，每个节点左右子树均满足BST性质 | 常规：构建一棵完全平衡的BST，验证插入算法正确性，展示树形结构可视化 |
| push (空栈) | 错误提示：无法对空栈执行pop操作，请先push元素 | 边界：空栈pop是经典越界错误，工具必须明确报错而非静默失败或返回undefined |
| insert 1, insert 2, insert 3, insert 4, insert 5（按递增顺序插入链表） | 链表结构图：1 → 2 → 3 → 4 → 5，每个节点指向下一个，尾节点指向null | 边界：递增插入导致链表退化为线性结构，验证链表在极端顺序下的表现（无分支） |
| addEdge A-B, addEdge A-C, addEdge B-C（无向图，三个节点两两相连） | 无向图结构图：三个节点A、B、C，每对节点之间有一条边，形成三角形（完全图K3） | 边界：最小完全图，验证图邻接表/邻接矩阵表示是否正确，以及环的检测 |
| insert 10, insert 5, insert 15, insert 3, insert 7, insert 12, insert 18, delete 10（删除根节点） | BST结构图：删除根节点10后，新根节点为12（或5，取决于删除算法），其余节点重新连接 | 易错：删除根节点时不同算法（取左子树最大/右子树最小）结果不同，工具需明确标注删除策略 |
| enqueue X, enqueue Y, dequeue, dequeue, dequeue（队列只有两个元素时连续三次出队） | 前两次出队成功（X、Y），第三次出队报错：队列已空，无法dequeue | 易错：超出队列长度的出队操作，验证工具是否正确处理边界检查，而非返回undefined或空值 |
常见错误对照
1.二叉树节点值重复，遍历结果混淆
✗ 错误
插入节点时未检查值重复，直接插入相同值 5✓ 修复
插入前先判断值是否已存在，若存在则跳过或更新二叉搜索树（BST）要求左子树所有值小于根、右子树大于根，重复值会破坏树的结构，导致查找/遍历结果不可预测。
2.链表尾节点未置 null，造成死循环
✗ 错误
创建链表时最后一个节点的 next 指向自身或未初始化✓ 修复
确保尾节点的 next 字段显式设为 null链表遍历依赖 next 为 null 作为终止条件，若尾节点 next 非 null（如指向自身），遍历会无限循环或访问非法内存。
3.图邻接矩阵对称性错误，有向图当无向图处理
✗ 错误
对有向图使用邻接矩阵时，误将 matrix[i][j] 与 matrix[j][i] 同时设为 1✓ 修复
有向图只设置 matrix[i][j]=1 表示 i→j 的边，不自动对称邻接矩阵的对称性代表无向边，有向图必须严格按方向填充，否则图结构被篡改，路径算法（如 Dijkstra）结果错误。
4.栈的 pop 操作未判空，导致 undefined 或异常
✗ 错误
连续 pop 超过栈内元素数量，如栈有 3 个元素却 pop 4 次✓ 修复
每次 pop 前检查栈长度 > 0，否则返回 null 或抛出明确错误栈是 LIFO 结构，空栈 pop 无合法元素返回，若不处理会导致后续操作引用 undefined，程序崩溃。
5.队列的 enqueue 与 dequeue 指针更新顺序颠倒
✗ 错误
循环队列中先移动 tail 指针再赋值，导致第一个元素丢失✓ 修复
先赋值再移动指针：queue[tail] = value; tail = (tail + 1) % capacity循环队列依赖头尾指针的精确移动，顺序错误会导致元素被覆盖或指针越界，破坏队列的 FIFO 特性。
6.二叉树递归遍历未处理空节点，引发 TypeError
✗ 错误
前序遍历函数中直接访问 node.left 而不检查 node 是否为 null✓ 修复
在递归函数开头判断 if (node === null) return; 再访问左右子节点递归遍历依赖空节点作为终止条件，不检查 null 会尝试访问 null 的属性，导致运行时错误。
7.图的 BFS 未标记已访问节点，重复入队导致死循环
✗ 错误
BFS 中只将起始节点入队，不标记 visited，遇到环时无限循环✓ 修复
每次节点出队时标记 visited，邻接节点若未 visited 才入队BFS 依赖 visited 集合避免重复处理，有向/无向图中环的存在会导致同一节点被反复入队，队列永不空。
第三节
工作原理
How It Works核心公式
二叉树深度 = max(左子树深度, 右子树深度) + 1
变量说明
左子树深度根节点左子树的最大层数右子树深度根节点右子树的最大层数二叉树深度从根到最远叶子节点的边数
示例
输入二叉树：根节点值为 1，左子节点 2（其左子节点 4），右子节点 3。左子树深度 = max(1,0)+1 = 2（节点 2→4 路径），右子树深度 = 1（仅节点 3）。二叉树深度 = max(2,1)+1 = 3。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我想看一个具体的二叉树结构，怎么输入？＋
答
直接用括号嵌套格式：`1(2(4,5),3(,6))` 表示根节点 1，左子树 2 有孩子 4 和 5，右子树 3 无左孩子、右孩子为 6。也支持 JSON 数组 `[1,2,3,4,5,null,6]` 按层序填充，null 表示空节点。输入后点「生成」即可看到树形图，节点值支持整数、小数或单字母标识。
问队列和栈的动画速度能不能调？＋
答
可以。在可视化区域下方有「速度」滑块，从 0.5x 到 3x 共 5 档。调慢适合观察入队/出队或入栈/出栈的每一步指针变化，调快适合快速验证逻辑。所有操作记录会同步在右侧日志区按时间戳列出，即使动画结束也能回看每个步骤的详细状态。
问为什么我输入一个图，它显示的不是我期望的拓扑排序结果？＋
答
拓扑排序要求有向图且无环。如果图中有环（比如 A→B→C→A），算法会检测到环并返回错误提示，此时不会输出排序序列。另外，本工具默认按邻接表输入：每行格式为 `A B` 表示 A→B 的边，节点名区分大小写。检查输入是否漏了边方向或混入了无向边。
问链表能不能输入带环的结构？＋
答
目前不支持手动输入带环链表。输入格式只接受线性序列，例如 `1->2->3->4` 或 `[1,2,3,4]`，生成的链表默认无环。如果需要判断环，可以切换到「检测环」模式，工具会随机生成带环链表并高亮环入口位置，供学习 Floyd 判环算法使用。
问这个工具是纯前端运行的，我的数据会上传到服务器吗？＋
答
完全不会。所有计算和渲染都在浏览器本地执行，不向任何服务器发送数据。输入的结构数据仅保存在页面内存中，刷新或关闭页面后自动消失。即使断网也能正常使用，适合处理敏感或临时数据。
问二叉树节点太多，画出来挤在一起看不清怎么办？＋
答
节点超过 30 个时，画布会自动启用缩放模式，可以用鼠标滚轮或双指手势缩放和平移。另外在「布局」下拉菜单里可选「紧凑」或「宽松」两种排列方式，宽松模式会增加父子节点间距。如果仍然拥挤，建议分两次输入，比如先画左子树再画右子树。
问我想对比 BFS 和 DFS 遍历同一个图，怎么操作？＋
答
输入图结构后，在遍历算法下拉框中选择 BFS，点击运行，观察节点访问顺序和队列变化；然后清空日志（点击「重置」），再选 DFS 运行。两次结果会分别记录在日志区，颜色标记不同：BFS 用蓝色标注层序，DFS 用红色标注递归深度。建议同时打开「慢速」档，逐帧对比访问顺序差异。
问为什么我输入栈的操作序列，中间某一步弹出时报错说栈为空？＋
答
说明你的操作序列中 pop 次数超过了当前栈内元素数。例如输入 `push 1, push 2, pop, pop, pop`，第三次 pop 时栈已空。本工具会高亮报错的那一步并暂停动画，同时左侧栈区域显示空状态。可以在输入区按行检查操作顺序，或先通过「示例」加载一个标准操作序列对照。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。