树结构是前端处理层级数据的核心，通过对象实现节点与子节点关联。掌握深度优先（DFS）、广度优先（BFS）遍历、查找、增删节点及扁平化等操作，能高效处理菜单、组织架构等场景。1. DFS递归访问子树；2. BFS使用队列按层遍历；3. 查找节点需递归匹配id；4. 添加节点前需定位父级并初始化children；5. 删除节点通过filter过滤目标id；6. listToTree将带parentId的扁平数据构造成树；7. flattenTree将树转为带层级的数组。关键在于递归思维与边界处理，如null判断和children初始化。
在JavaScript中处理树结构是前端开发中的常见需求，尤其在处理菜单、组织架构、文件系统等层级数据时非常实用。掌握如何创建、遍历、查找和修改树结构，能显著提升数据处理能力。
什么是树结构
树是一种非线性数据结构，由节点（node）组成，每个节点包含一个值和指向子节点的引用。最顶层的节点称为根节点，没有子节点的节点称为叶子节点。常见的树结构包括二叉树、多叉树、N叉树等。
在JavaScript中，树通常用对象来表示：
const tree = {
id: 1,
name: 'A',
children: [
{
id: 2,
name: 'B',
children: [
{ id: 4, name: 'D', children: [] }
]
},
{
id: 3,
name: 'C',
children: []
}
]
};
常见树操作方法
对树结构的操作主要包括遍历、查找、增删改节点等。以下是几种核心操作的实现方式。
立即学习“Java免费学习笔记（深入）”；
1. 深度优先遍历（DFS）
从根节点出发，沿着子树深入到底，再回溯。
function dfs(node, callback) {
if (!node) return;
callback(node);
if (node.children) {
node.children.forEach(child => dfs(child, callback));
}
}
// 使用示例：打印所有节点名
dfs(tree, node => console.log(node.name));
2. 广度优先遍历（BFS）
按层级从上到下、从左到右访问节点。
function bfs(root, callback) {
const queue = [root];
while (queue.length > 0) {
const node = queue.shift();
callback(node);
if (node.children) {
queue.push(...node.children);
}
}
}
3. 根据条件查找节点
常用于根据id或name查找特定节点。
function findNodeById(node, id) {
if (!node) return null;
if (node.id === id) return node;
for (let child of node.children || []) {
const found = findNodeById(child, id);
if (found) return found;
}
return null;
}
4. 添加子节点
找到目标节点后，向其children数组添加新节点。
function addChild(parentId, newNode) {
const parent = findNodeById(tree, parentId);
if (parent) {
parent.children = parent.children || [];
parent.children.push(newNode);
}
}
5. 删除节点
删除某个节点需要在其父节点的children中过滤掉该节点。
function deleteNode(root, id) {
if (!root || !root.children) return;
root.children = root.children.filter(node => node.id !== id);
root.children.forEach(child => deleteNode(child, id));
}
扁平化与重构树
有时后端返回的是扁平列表（带parentId），需要转换成树结构。
将扁平数组构造成树
function listToTree(list) {
const map = {};
let root = null;
// 建立索引
list.forEach(item => {
map[item.id] = { ...item, children: [] };
});
list.forEach(item => {
if (item.parentId === null || item.parentId === undefined) {
root = map[item.id];
} else {
const parent = map[item.parentId];
if (parent) {
parent.children.push(map[item.id]);
}
}
});
return root;
}
将树结构扁平化
便于展示或导出为表格数据。
function flattenTree(node, result = [], level = 0) {
if (!node) return result;
result.push({ ...node, level });
node.children?.forEach(child => flattenTree(child, result, level + 1));
return result;
}
基本上就这些。熟练掌握这些基础操作，就能灵活应对大多数树形数据的处理场景。关键是理解递归思想和父子关系的维护逻辑。不复杂但容易忽略细节，比如children初始化、边界判断等。
