JavaScript树结构操作_javascript数据结构-js教程-PHP中文网

JavaScript树结构操作_javascript数据结构

幻影之瞳

发布： 2025-12-02 19:45:12

原创

837人浏览过

树结构是前端处理层级数据的核心，通过对象实现节点与子节点关联。掌握深度优先（DFS）、广度优先（BFS）遍历、查找、增删节点及扁平化等操作，能高效处理菜单、组织架构等场景。1. DFS递归访问子树；2. BFS使用队列按层遍历；3. 查找节点需递归匹配id；4. 添加节点前需定位父级并初始化children；5. 删除节点通过filter过滤目标id；6. listToTree将带parentId的扁平数据构造成树；7. flattenTree将树转为带层级的数组。关键在于递归思维与边界处理，如null判断和children初始化。

javascript树结构操作_javascript数据结构

在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查找特定节点。

OrgChart组织结构插件

gt是一款简单实用的组织结构图表jQuery插件。gt通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。

查看详情

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初始化、边界判断等。

以上就是JavaScript树结构操作_javascript数据结构的详细内容，更多请关注php中文网其它相关文章！