递归是处理树形结构的自然方式，但需优化性能。通过缓存索引、扁平化数据、迭代替代递归、控制深度及懒加载，可有效提升效率，避免栈溢出与重复遍历问题。
处理树形结构是前端开发中常见的需求，比如组织架构图、文件目录、菜单系统等。JavaScript 中通过递归算法可以方便地遍历和操作树形数据，但不当的实现容易带来性能问题。本文将介绍如何使用递归处理树形结构，并提供有效的性能优化策略。
递归遍历树的基本实现
树形结构通常以嵌套对象数组的形式存在，每个节点包含子节点数组（children）。最直观的处理方式是使用递归进行深度优先遍历。
例如，查找某个节点：
function findNode(tree, id) {
for (let node of tree) {
if (node.id === id) return node;
if (node.children) {
const found = findNode(node.children, id);
if (found) return found;
}
}
return null;
}
这段代码逻辑清晰，适合小规模数据。但当树非常深或节点数量庞大时，频繁的函数调用会增加调用栈压力，可能导致栈溢出或响应变慢。
立即学习“Java免费学习笔记（深入）”；
避免重复递归：缓存与扁平化
在实际应用中，频繁查询同一棵树会导致重复遍历，影响性能。可以通过构建索引或扁平化结构来优化。
一种有效方法是将树拍平为 Map，以 ID 为键存储节点引用：
function buildIndex(tree) {
const map = new Map();
function traverse(nodes) {
for (let node of nodes) {
map.set(node.id, node);
if (node.children) traverse(node.children);
}
}
traverse(tree);
return map;
}
// 使用时 O(1) 查找
const index = buildIndex(tree);
const node = index.get('target-id');
虽然初始化需要一次完整遍历，但后续所有查询都变成常量时间操作，适合频繁读取的场景。
控制递归深度：迭代代替递归
对于极深的树，递归可能触发最大调用栈限制。可改用基于栈的迭代方式模拟递归，避免爆栈。
例如，使用数组模拟调用栈进行深度优先搜索：
function findNodeIterative(tree, id) {
const stack = [...tree];
while (stack.length) {
const node = stack.pop();
if (node.id === id) return node;
if (node.children) {
stack.push(...node.children);
}
}
return null;
}
这种方式不依赖函数调用栈，能安全处理更深的层级，同时执行效率更高。
节流与懒加载：按需处理节点
在渲染大型树时，不必一次性处理全部节点。可结合虚拟滚动或懒加载，只展开用户可见或交互的部分。
例如，在展开某个父节点时才加载其子节点：
async function loadChildren(parentNode) {
if (!parentNode.loaded) {
const children = await fetch(`/api/children/${parentNode.id}`);
parentNode.children = children;
parentNode.loaded = true;
}
return parentNode.children;
}
这样既减少初始数据量，也避免无意义的递归遍历，显著提升首屏性能。
基本上就这些。递归是处理树的自然方式，但在性能敏感场景下需谨慎使用。通过缓存、迭代替代、扁平化和懒加载等手段，可以在保持代码可读性的同时大幅提升效率。
