js converte os dados retornados pelo plano de fundo em uma estrutura de árvore (matriz plana em estrutura de árvore)

prefácio

Ao fazer projetos, muitas vezes é encontrado que os dados retornados pelo plano de fundo precisam ser convertidos em uma estrutura de árvore para exibição ao usuário, por exemplo:

 Essa também é uma questão de algoritmo que costuma ser testada em entrevistas iniciais. Vamos testá-la juntos.

etapa

1. Prepare um objeto de árvore vazio.
2. Itere sobre cada elemento na lista.
3. Para cada elemento, encontre seu nó pai correspondente de acordo com o ID pai do elemento.
4. Se um nó pai for encontrado, o elemento será adicionado à lista de filhos do nó pai.
5. Se nenhum nó pai for encontrado, um novo nó será criado com o elemento como seu filho.
6. Repita as etapas 2 a 5 até que todos os elementos sejam percorridos.
7. Retorna o objeto árvore.

exemplo de código

const list = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 1-1', parentId: 1 },
  { id: 3, name: 'Node 1-2', parentId: 1 },
  { id: 4, name: 'Node 1-1-1', parentId: 2 },
  { id: 5, name: 'Node 2', parentId: null },
  { id: 6, name: 'Node 2-1', parentId: 5 },
]

function listToTree(list) {
  const map = {} // 用于存储节点 id 与节点的映射关系
  const tree = [] // 树的根节点

  // 首次遍历，将节点 id 与节点进行映射
  list.forEach(node => {
    map[node.id] = { ...node, children: [] }
  })

  // 第二次遍历，构建树结构
  list.forEach(node => {
    if (node.parentId) {
      // 如果存在父级节点，则将当前节点添加到父级节点的子节点列表中
      map[node.parentId].children.push(map[node.id])
    } else {
      // 否则，将当前节点作为根节点
      tree.push(map[node.id])
    }
  })

  return tree
}

const tree = listToTree(list)
console.log(tree)

saída:

[
  {
    "id": 1,
    "name": "Node 1",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "Node 1-1",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "Node 1-1-1",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "Node 1-2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 5,
    "name": "Node 2",
    "parentId": null,
    "children": [
      {
        "id": 6,
        "name": "Node 2-1",
        "parentId": 5,
        "children": []
      }
    ]
  }
]

Cenário

1. Sistema de arquivos: organize arquivos e pastas no sistema de arquivos em uma estrutura de árvore.

2. Estrutura organizacional: Em uma empresa, uma estrutura em árvore pode ser usada para representar o relacionamento entre os funcionários para construir um organograma.

3. Menu de navegação: No menu de navegação de um site ou aplicativo, geralmente é utilizada uma estrutura em árvore para representar diferentes níveis de página.

4. Responder aos comentários: Nas mídias sociais ou fóruns, os usuários podem responder aos comentários, e essa relação de resposta pode ser organizada e exibida em uma estrutura de árvore.

5. Catálogo de categorias: categorias de produtos em sites de comércio eletrônico, categorias de artigos em blogs, etc. podem ser organizadas e exibidas em uma estrutura de árvore.