Wie verarbeitet JavaScript das Hinzufügen, Löschen, Ändern und Abfragen baumstrukturierter Daten?

Problembeschreibung: JS verwaltet das Hinzufügen, Löschen, Ändern und Abfragen von Baumstrukturen.

Kürzlich habe ich ein Berechtigungsverwaltungsmodul für ein Backend-Verwaltungssystem entwickelt, das die Datenverarbeitungslogik verschiedener Baumstrukturen umfasst, z. B. Hinzufügen und Löschen , Änderung, Abfrage usw.; im Vergleich zu gewöhnlichen Array-Strukturdaten ist die Verarbeitung der Baumstruktur nicht so intuitiv, aber es ist nicht so kompliziert. Es ist ein weiterer Schritt erforderlich – eine rekursive Suche , um eine tiefe Durchquerung der Daten durchzuführen Hier wird der Blogger auch den Entwicklungsprozess zusammenfassen. Ich werde die von mir entwickelte Methode vorstellen. Dieser Artikel vermittelt Ihnen ein umfassendes Verständnis der JS-Baumstrukturdatenverarbeitung:

Beispiel für eine Datenstruktur

let data = [{
        ID: 1,
        Beschriftung: „Stufe 1“,
        Kinder: [{
          ID: 4,
          Beschriftung: „Stufe 1-1“,
          Kinder: [{
            ID: 9,
            Beschriftung: „Stufe 3 1-1-1“
          }, {
            ID: 10,
            Beschriftung: „Stufe 3 1-1-2“
          }]
        }]
      }, {
        ID: 2,
        Beschriftung: „Stufe 2“,
        Kinder: [{
          ID: 5,
          Beschriftung: „Stufe 2-1“
        }, {
          ID: 6,
          Beschriftung: „Stufe 2-2“
        }]
      }, {
        ID: 3,
        Beschriftung: „Stufe 3“,
        Kinder: [{
          ID: 7,
          Beschriftung: „Stufe 2 3-1“
        }, {
          ID: 8,
          Beschriftung: „Stufe 3-2“
        }]
      }];

Lösung:

1. Fügen Sie einen neuen Knoten hinzu

, um den angegebenen Knoten in der Baumstruktur zu finden, und fügen Sie einen neuen untergeordneten Knoten hinzu. Der Code lautet wie folgt:

const appendNodeInTree = (id, tree, obj) => {
  tree.forEach(ele=> {
    if (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } anders {
      if (ele.children) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  Rückkehrbaum
}

2. Löschen Sie den Knoten.

Suchen Sie den angegebenen Knoten in der Baumstruktur und löschen Sie den Knoten wie folgt:

const removeNodeInTree=(treeList, id)=> { // Elemente aus dem Array (Baumstruktur) nach ID entfernen (!treeList || ! treeList.length) {
    zurückkehren
  }
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].id === id) {
      treeList.splice(i, 1);
      brechen;
    }
    removeNodeInTree(treeList[i].children, id)
  }
}

3. Ändern Sie den Knoten,

um den Status eines Knotens rekursiv zu suchen und zu ändern. Der Code lautet wie folgt:

const updateNodeInTree=(treeList,id, obj)=> {
      if (!treeList || !treeList.length) {
        zurückkehren;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == id) {
          treeList[i]= obj;
          brechen;
        }
        updateNodeInTree(treeList[i].children,id,obj);
      }
    }

4. Suchen Sie

rekursiv einen Knoten, um einen Knoten im Baumknoten zu finden, Code:

const findNodeInTree = (Daten, Schlüssel, Rückruf) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key == key) {
          Rückruf zurückgeben (Daten[i], i, Daten)
        }
        if (data[i].children) {
          findNodeInTree (data[i].children, Schlüssel, Rückruf)
        }
      }
    }

    //Die Methode zum Speichern des gefundenen Knotens let Obj={}
    findNodeInTree(data, key, (item, index, arr) => {
      Obj = Artikel
    })

    // Dies ist der zu findende Knoten entsprechend Obj console.log(Obj)