当前位置：首页 > JavaScript

js实现树形

2026-04-05 15:17:34JavaScript

实现树形结构的方法

在JavaScript中实现树形结构通常涉及创建节点类或对象，并通过递归或迭代方式构建层级关系。以下是几种常见实现方式：

使用对象字面量

最简单的树形结构可以直接用嵌套对象表示：

const tree = {
  value: 'root',
  children: [
    {
      value: 'child1',
      children: []
    },
    {
      value: 'child2',
      children: [
        { value: 'grandchild', children: [] }
      ]
    }
  ]
};

使用类实现

更规范的实现方式是定义节点类：

js实现树形

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }

  addChild(childNode) {
    this.children.push(childNode);
  }
}

const root = new TreeNode('root');
const child1 = new TreeNode('child1');
const child2 = new TreeNode('child2');
root.addChild(child1);
root.addChild(child2);

递归遍历

遍历树形结构的典型方法是递归：

function traverse(node) {
  console.log(node.value);
  node.children.forEach(child => traverse(child));
}

扁平数组转树形结构

将扁平数组转换为树形结构的常见方法：

js实现树形

function buildTree(items, parentId = null) {
  return items
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: buildTree(items, item.id)
    }));
}

const flatData = [
  { id: 1, name: 'root', parentId: null },
  { id: 2, name: 'child1', parentId: 1 },
  { id: 3, name: 'child2', parentId: 1 }
];
const treeData = buildTree(flatData);

性能优化建议

对于大型树结构，递归可能导致栈溢出。可以使用迭代方式替代：

function traverseIterative(root) {
  const stack = [root];
  while (stack.length) {
    const node = stack.pop();
    console.log(node.value);
    stack.push(...node.children.reverse());
  }
}

可视化渲染

结合DOM实现树形可视化：

function renderTree(node, parentElement) {
  const element = document.createElement('div');
  element.textContent = node.value;
  parentElement.appendChild(element);

  if (node.children.length) {
    const childrenContainer = document.createElement('div');
    childrenContainer.style.marginLeft = '20px';
    node.children.forEach(child => renderTree(child, childrenContainer));
    element.appendChild(childrenContainer);
  }
}

标签: js