Comment JavaScript traite-t-il l'ajout, la suppression, la modification et l'interrogation de données arborescentes ?

Description du problème : JS gère l'ajout, la suppression, la modification et l'interrogation des structures arborescentes.

Récemment, j'ai développé un module de gestion des autorisations pour un système de gestion backend, qui implique une logique de traitement des données de diverses structures arborescentes, telles que : l'ajout, la suppression. , modification, requête, etc. ; par rapport aux données de structure de tableau ordinaires, le traitement de la structure arborescente n'est pas aussi intuitif que celui d'un tableau, mais il n'est pas si compliqué qu'il nécessite une étape supplémentaire - une recherche récursive pour effectuer une traversée approfondie des données. ici, le blogueur résumera également le processus de développement. Je partagerai la méthode que j'ai proposée. Cet article vous donnera une compréhension approfondie du traitement des données de la structure arborescente JS :

Exemple de structure de données

let data = [{
        identifiant : 1,
        étiquette : 'Niveau 1',
        enfants: [{
          identifiant : 4,
          étiquette : 'Niveau 1-1',
          enfants: [{
            identifiant : 9,
            étiquette : 'Niveau 3 1-1-1'
          }, {
            identifiant : 10,
            étiquette : 'Niveau 3 1-1-2'
          }]
        }]
      }, {
        identifiant : 2,
        étiquette : 'Niveau 2',
        enfants: [{
          identifiant : 5,
          étiquette : 'Niveau 2-1'
        }, {
          identifiant : 6,
          étiquette : 'Niveau 2-2'
        }]
      }, {
        identifiant : 3,
        étiquette : 'Niveau 3',
        enfants: [{
          identifiant : 7,
          étiquette : 'Niveau 2 3-1'
        }, {
          identifiant : 8,
          étiquette : 'Niveau 3-2'
        }]
      }];

Solution :

1. Ajoutez un nouveau nœud

pour rechercher le nœud spécifié dans l'arborescence et ajoutez un nouveau nœud enfant. Le code est le suivant :

const appendNodeInTree = (id, tree, obj) => {.
  arbre.forEach(ele=> {
    if (ele.id === id) {
      ele.enfants ? ele.enfants.push(obj) : ele.enfants = [obj]
    } autre {
      si (ele.enfants) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  arbre de retour
}

2. Supprimez le nœud.

Recherchez le nœud spécifié dans la structure arborescente et supprimez le nœud. Le code est le suivant

const removeNodeInTree=(treeList, id)=> { // Supprimez les éléments du tableau (structure arborescente) par id if. (!treeList || ! treeList.length) {
    retour
  }
  pour (soit i = 0; i < treeList.length; i++) {
    if (treeList[i].id === id) {
      treeList.splice(i, 1);
      casser;
    }
    RemoveNodeInTree(treeList[i].children, id)
  }
}

3. Modifiez le nœud

pour rechercher et modifier de manière récursive l'état d'un nœud. Le code est le suivant :

const updateNodeInTree=(treeList,id, obj)=> {.
      si (!treeList || !treeList.length) {
        retour;
      }
      pour (soit i = 0; i < treeList.length; i++) {
        if (treeList[i].id == identifiant) {
          liste d'arbres[i]= obj;
          casser;
        }
        updateNodeInTree(treeList[i].children,id,obj);
      }
    }

4. Recherchez un nœud

de manière récursive pour trouver un nœud dans le nœud de l'arborescence, code :

const findNodeInTree = (data, key, callback) => {
      pour (soit i = 0; i < data.length; i++) {
        si (data[i].key == clé) {
          return callback (données [i], i, données)
        }
        si (données[i].enfants) {
          findNodeInTree (data[i].children, clé, rappel)
        }
      }
    }

    //La méthode pour stocker le nœud trouvé let Obj={}
    findNodeInTree(données, clé, (élément, index, arr) => {
      Obj = article
    })

    // C'est le noeud à trouver correspondant à Obj console.log(Obj)