Comment créer efficacement un arbre hiérarchique à partir d'un tableau plat en JavaScript ?

Création d'un arbre hiérarchique à partir d'un tableau plat en JavaScript

En JavaScript, il existe des situations dans lesquelles vous devrez peut-être transformer un tableau plat de objets représentant une structure hiérarchique dans une structure arborescente imbriquée. Cela peut survenir lorsque vous travaillez avec des données JSON complexes, comme dans l'exemple fourni.

Pour créer une structure arborescente, nous utilisons une approche basée sur une carte. Cette méthode est efficace et prend en charge plusieurs nœuds racine. Cela nécessite que les nœuds parents précèdent leurs enfants dans le tableau plat.

Voici comment nous implémentons cela en JavaScript :

function list_to_tree(list) {
  var map = {}, node, roots = [], i;

  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }

  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

var entries = //Your flat array of entries

console.log(list_to_tree(entries));

Cette solution initialise une carte map qui stocke les indices de chaque nœud ID, garantissant une recherche rapide. Il parcourt ensuite la liste deux fois. Lors du premier passage, il initialise la propriété enfants de chaque nœud sur un tableau vide. Lors de la deuxième passe, il construit la structure arborescente en attachant des nœuds à leurs nœuds parents respectifs à l'aide des données de la carte. Si un nœud a un parentId de « 0 », il est considéré comme un nœud racine et est ajouté à un tableau de racines. Enfin, la fonction list_to_tree renvoie un tableau de nœuds racine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!