JavaScript树结构是非线性数据结构，由含value和children属性的节点对象组成；遍历常用深度优先（DFS）和广度优先（BFS）两种方式，DFS适合纵向深入场景，BFS适合层级处理。
JavaScript 中的树结构是一种非线性的数据结构，由节点（node）组成，每个节点包含数据和指向子节点的引用。最常见的形式是**二叉树**（每个节点最多两个子节点），但实际开发中更常见的是**多叉树**，比如组织架构、菜单列表、DOM 树或嵌套的 JSON 数据。
树结构长什么样？
一个典型的 JavaScript 树节点通常是一个对象，至少包含：
- value（当前节点的数据）
- children（子节点数组，可能为空）
例如：
const tree = {
id: 1,
name: 'CEO',
children: [
{
id: 2,
name: 'CTO',
children: [
{ id: 4, name: 'Frontend Lead', children: [] },
{ id: 5, name: 'Backend Lead', children: [] }
]
},
{
id: 3,
name: 'CFO',
children: []
}
]
};
如何遍历树节点？两种主流方式
遍历树的核心是“访问每个节点一次”，常用方法有深度优先（DFS）和广度优先（BFS），都依赖递归或栈/队列实现。
✅ 深度优先遍历（DFS）——推荐用于大多数场景
立即学习“Java免费学习笔记（深入）”；
- 从根开始，一路向下走到叶子节点，再回溯处理其他分支
- 代码简洁，天然适合递归
- 适用于查找、路径收集、校验等任务
示例（前序遍历，先处理当前节点）：
function traverseDFS(node, callback) {
if (!node) return;
callback(node); // 先执行当前节点逻辑
if (Array.isArray(node.children)) {
node.children.forEach(child => traverseDFS(child, callback));
}
}
// 使用：traverseDFS(tree, node => console.log(node.name));
✅ 广度优先遍历（BFS）——适合按层级处理
- 逐层访问：先根，再所有子节点，再所有孙节点……
- 用队列（数组 + shift/unshift 或 push/shift）实现
- 常用于 UI 渲染层级、计算树高、找最近公共祖先等
示例：
function traverseBFS(root, callback) {
if (!root) return;
const queue = [root];
while (queue.length > 0) {
const node = queue.shift();
callback(node);
if (Array.isArray(node.children)) {
queue.push(...node.children);
}
}
}
实用技巧与注意事项
- 遍历时注意判断
children是否存在且为数组，避免undefined.map报错 - 需要中断遍历（如找到目标就停止）？DFS 可改用返回布尔值控制；BFS 可在 callback 中抛出自定义错误或用标志位
- 想获取路径（从根到当前节点的 ID 列表）？递归时把路径数组作为参数传下去
- 真实项目中（如 React 渲染菜单），常配合
flatMap扁平化树为一维列表，或用 Map 缓存节点快速查找
不复杂但容易忽略
树遍历本质就是「重复处理当前节点 + 递归/迭代处理子节点」。选 DFS 还是 BFS，取决于你要“纵向挖得深”还是“横向扫得宽”。写的时候多加一层空值判断，基本就能稳住大部分业务场景。
