js写一个父id的递归展示

假设我们有如下的数据结构：

const data = [
  { id: 1, name: 'Parent 1', parentId: null },
  { id: 2, name: 'Child 1.1', parentId: 1 },
  { id: 3, name: 'Child 1.2', parentId: 1 },
  { id: 4, name: 'Parent 2', parentId: null },
  { id: 5, name: 'Child 2.1', parentId: 4 },
  { id: 6, name: 'Child 2.2', parentId: 4 },
  { id: 7, name: 'Grandchild 2.2.1', parentId: 6 },
  { id: 8, name: 'Grandchild 2.2.2', parentId: 6 },
  { id: 9, name: 'Great Grandchild 2.2.2.1', parentId: 8 },
];

我们可以使用递归函数将其转化为树形结构并展示：

// 递归函数
function generateTree(data, parentId) {
  const result = [];
  data.forEach(item => {
    if (item.parentId === parentId) {
      const children = generateTree(data, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
  });
  return result;
}

// 显示树形结构
function displayTree(tree, level = 0) {
  tree.forEach(item => {
    console.log(`${' '.repeat(level * 4)}${item.name}`);
    if (item.children) {
      displayTree(item.children, level + 1);
    }
  });
}

// 生成树形结构并显示
const tree = generateTree(data, null);
displayTree(tree);

运行结果如下：

Parent 1
    Child 1.1
    Child 1.2
Parent 2
    Child 2.1
    Child 2.2
        Grandchild 2.2.1
        Grandchild 2.2.2
            Great Grandchild 2.2.2.1