JavaScript 树形结构数据处理：方法与应用解析

2026-03-12 18:10:02 1048阅读

在前端开发中，树形结构数据是一种常见且重要的数据形式，它广泛应用于菜单导航、文件目录展示、组织架构图等场景。JavaScript 作为前端开发的核心语言，提供了丰富的工具和方法来处理树形结构数据。本文将详细介绍 JavaScript 中树形结构数据的处理方法和相关应用。

树形结构数据的基本概念

树形结构是一种层次化的数据结构，由节点（Node）和边（Edge）组成。每个节点可以有零个或多个子节点，除了根节点外，每个节点都有一个父节点。在 JavaScript 中，树形结构通常用对象数组来表示，每个对象代表一个节点，包含节点的 ID、名称、父节点 ID 等信息。

以下是一个简单的树形结构数据示例：

const treeData = [
  { id: 1, name: 'Root', parentId: null },
  { id: 2, name: 'Child 1', parentId: 1 },
  { id: 3, name: 'Child 2', parentId: 1 },
  { id: 4, name: 'Grandchild 1', parentId: 2 }
];

构建树形结构

将扁平的数组数据转换为树形结构是处理树形数据的常见需求。可以通过递归或迭代的方式实现。

递归方法

递归方法是一种简洁且直观的实现方式。以下是一个递归构建树形结构的示例代码：

function buildTree(data, parentId = null) {
  const tree = [];
  // 遍历数据数组
  for (const item of data) {
    if (item.parentId === parentId) {
      // 递归调用构建子树
      const children = buildTree(data, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  }
  return tree;
}

const tree = buildTree(treeData);
console.log(tree);

迭代方法

迭代方法通过使用 Map 数据结构来提高性能。以下是一个迭代构建树形结构的示例代码：

function buildTreeIterative(data) {
  const map = new Map();
  const tree = [];
  // 先将所有节点存入 Map
  for (const item of data) {
    map.set(item.id, { ...item, children: [] });
  }
  // 构建树形结构
  for (const item of data) {
    const node = map.get(item.id);
    if (item.parentId === null) {
      tree.push(node);
    } else {
      const parent = map.get(item.parentId);
      if (parent) {
        parent.children.push(node);
      }
    }
  }
  return tree;
}

const treeIterative = buildTreeIterative(treeData);
console.log(treeIterative);

遍历树形结构

遍历树形结构是对树形数据进行操作的基础，常见的遍历方式有深度优先遍历（DFS）和广度优先遍历（BFS）。

深度优先遍历

深度优先遍历是沿着树的深度遍历树的节点，尽可能深地搜索树的分支。以下是一个深度优先遍历的示例代码：

function dfs(tree) {
  for (const node of tree) {
    console.log(node.name);
    if (node.children) {
      dfs(node.children);
    }
  }
}

dfs(tree);

广度优先遍历

广度优先遍历是按照树的层次依次访问节点。以下是一个广度优先遍历的示例代码：

function bfs(tree) {
  const queue = [...tree];
  while (queue.length > 0) {
    const node = queue.shift();
    console.log(node.name);
    if (node.children) {
      queue.push(...node.children);
    }
  }
}

bfs(tree);

树形结构数据的查找与过滤

在树形结构数据中查找特定节点或过滤符合条件的节点是常见的需求。可以通过递归的方式实现查找和过滤功能。

查找节点

以下是一个查找特定 ID 节点的示例代码：

function findNode(tree, id) {
  for (const node of tree) {
    if (node.id === id) {
      return node;
    }
    if (node.children) {
      const result = findNode(node.children, id);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

const foundNode = findNode(tree, 4);
console.log(foundNode);

过滤节点

以下是一个过滤符合条件节点的示例代码：

function filterTree(tree, condition) {
  const newTree = [];
  for (const node of tree) {
    if (condition(node)) {
      const children = filterTree(node.children || [], condition);
      if (children.length > 0) {
        node.children = children;
      }
      newTree.push(node);
    }
  }
  return newTree;
}

const filteredTree = filterTree(tree, (node) => node.name.includes('Child'));
console.log(filteredTree);