17370845950

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）——推荐用于大多数场景

• 从根开始，一路向下走到叶子节点，再回溯处理其他分支
• 代码简洁，天然适合递归
• 适用于查找、路径收集、校验等任务

示例（前序遍历，先处理当前节点）：

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，取决于你要“纵向挖得深”还是“横向扫得宽”。写的时候多加一层空值判断，基本就能稳住大部分业务场景。