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

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich die Probleme im Zusammenhang mit dem Hinzufügen, Löschen, Ändern und Abfragen von baumstrukturierten Daten organisiert. Im Vergleich zu gewöhnlichen Array-strukturierten Daten gibt es bei der Verarbeitung von Bäumen kein Array -Strukturierte Daten. Es ist so intuitiv, aber nicht so kompliziert. Es erfordert einen weiteren Schritt der rekursiven Suche, um die Daten gründlich zu durchsuchen.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Problembeschreibung: JS übernimmt das Hinzufügen, Löschen, Ändern und Überprüfen der Baumstruktur

Kürzlich Entwicklung eines Berechtigungsverwaltungsmoduls für a Hintergrundverwaltungssystem, das die Datenverarbeitungslogik verschiedener Baumstrukturen umfasst, z. B. Hinzufügen, Löschen, Ändern, Suchen usw. Im Vergleich zu gewöhnlichen Array-Strukturdaten ist die Verarbeitung von Baumstrukturen nicht so intuitiv wie die von Arrays ist nicht so kompliziert und erfordert viel Arbeit – Rekursive Suche, um tiefe Durchlaufoperationen an den Daten durchzuführen. Hier wird der Blogger Ihnen auch die während des Entwicklungsprozesses zusammengefassten Methoden mitteilen durch JS-Baumstruktur-Datenverarbeitung:

Datenstrukturbeispiel

  let data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];

Lösung:

1. Knoten hinzufügen

Suchen Sie den angegebenen Knoten der Baumstruktur und fügen Sie einen neuen untergeordneten Knoten hinzu lautet wie folgt:

const appendNodeInTree = (id, tree, obj) => {
  tree.forEach(ele=> {
    if (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } else {
      if (ele.children) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  return tree
}

2. Suchen Sie den Baum. Installieren Sie den angegebenen Knoten der Struktur und löschen Sie den Knoten. Der Code lautet wie folgt:

const removeNodeInTree=(treeList, id)=> { // 通过id从数组（树结构）中移除元素
  if (!treeList || !treeList.length) {
    return
  }
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].id === id) {
      treeList.splice(i, 1);
      break;
    }
    removeNodeInTree(treeList[i].children, id)
  }
}

3. Ändern Sie den Knoten Ein Knoten. Der Code lautet wie folgt:

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

4. Suchen Sie rekursiv nach einem Baumknoten. Knoten, Code:

const findNodeInTree = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key == key) {
          return callback(data[i], i, data)
        }
        if (data[i].children) {
          findNodeInTree (data[i].children, key, callback)
        }
      }
    }

    // 所查找到的节点要存储的方法
    let Obj={}
    findNodeInTree(data, key, (item, index, arr) => {
      Obj = item
    })

    // 此时就是Obj对应的要查找的节点
    console.log(Obj)

[Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWie verarbeitet JavaScript das Hinzufügen, Löschen, Ändern und Abfragen baumstrukturierter Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!