当前位置：首页 > JavaScript

js实现树形

2026-01-31 22:58:51JavaScript

js实现树形结构的方法

递归法

递归是构建树形结构的常见方法。通过递归函数可以遍历嵌套的数据结构，生成树形视图。

function buildTree(data, parentId = null) {
  const tree = [];
  data.forEach(item => {
    if (item.parentId === parentId) {
      const children = buildTree(data, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  return tree;
}

非递归法

使用对象映射可以提高性能，特别适合大数据量的树形结构构建。

function buildTreeWithMap(data) {
  const map = {};
  const tree = [];

  data.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });

  data.forEach(item => {
    if (item.parentId && map[item.parentId]) {
      map[item.parentId].children.push(map[item.id]);
    } else {
      tree.push(map[item.id]);
    }
  });

  return tree;
}

使用第三方库

一些成熟的库如lodash、d3-hierarchy等提供了树形结构处理的工具函数。

import { groupBy, mapValues } from 'lodash';

function buildTreeWithLodash(data) {
  const grouped = groupBy(data, 'parentId');
  const tree = mapValues(grouped, items => 
    items.map(item => ({
      ...item,
      children: grouped[item.id] || []
    }))
  );
  return tree[null] || [];
}

树形结构的渲染方法

递归组件

在Vue/React等框架中可以使用递归组件渲染树形结构。

function TreeNode({ node }) {
  return (
    <li>
      {node.name}
      {node.children && (
        <ul>
          {node.children.map(child => (
            <TreeNode key={child.id} node={child} />
          ))}
        </ul>
      )}
    </li>
  );
}

虚拟滚动优化

对于大型树形结构，虚拟滚动可以提高性能。

import { FixedSizeTree } from 'react-vtree';

function Tree({ treeData }) {
  const treeWalker = function* () {
    for (let node of treeData) {
      yield {
        id: node.id,
        data: node,
        isOpen: true,
        nestingLevel: 0
      };
    }
  };

  return (
    <FixedSizeTree
      treeWalker={treeWalker}
      itemSize={30}
      height={500}
      width={300}
    />
  );
}

树形结构的操作

添加节点

function addNode(tree, newNode, parentId) {
  if (tree.id === parentId) {
    tree.children = tree.children || [];
    tree.children.push(newNode);
    return true;
  }

  if (tree.children) {
    for (let child of tree.children) {
      if (addNode(child, newNode, parentId)) {
        return true;
      }
    }
  }

  return false;
}

删除节点

function removeNode(tree, nodeId) {
  if (tree.children) {
    tree.children = tree.children.filter(child => child.id !== nodeId);
    for (let child of tree.children) {
      removeNode(child, nodeId);
    }
  }
}

查找节点

function findNode(tree, nodeId) {
  if (tree.id === nodeId) {
    return tree;
  }

  if (tree.children) {
    for (let child of tree.children) {
      const found = findNode(child, nodeId);
      if (found) return found;
    }
  }

  return null;
}