JavaScript はツリー構造データの追加、削除、変更、クエリをどのように処理しますか?

問題の説明: JS はツリー構造の追加、削除、変更、クエリを処理します。

最近、私はバックエンド管理システム用の権限管理モジュールを開発しています。これには、追加、削除などのさまざまなツリー構造のデータ処理ロジックが含まれます。通常の配列構造のデータと比較して、ツリー構造の処理は配列ほど直感的ではありませんが、データの詳細な走査を実行するためにもう 1 つのステップが必要です。ここで、ブロガーは私が思いついた方法を共有する開発プロセスも要約します。この記事は、JS ツリー構造のデータ処理を完全に理解するのに役立ちます。

データ構造例

let data = [{
        ID:1、
        ラベル: 'レベル 1'、
        子供たち： [{
          ID:4、
          ラベル: 'レベル 1-1'、
          子供たち： [{
            ID:9、
            ラベル: 「レベル 3 1-1-1」
          }、{
            ID:10、
            ラベル: 「レベル 3 1-1-2」
          }]
        }]
      }、{
        ID:2、
        ラベル: 'レベル 2'、
        子供たち： [{
          ID:5、
          ラベル: 'レベル 2-1'
        }、{
          ID:6、
          ラベル: 「レベル 2-2」
        }]
      }、{
        ID:3、
        ラベル: 'レベル 3'、
        子供たち： [{
          ID:7、
          ラベル: 「レベル 2 3-1」
        }、{
          ID:8、
          ラベル: 「レベル 3-2」
        }]
      解決

策:

1. 新しいノードを追加して、

ツリー構造内で指定されたノードを見つけ、新しい子ノードを追加します。

const appendNodeInTree = (id,tree, obj) => {
  Tree.forEach(ele=> {
    if (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } それ以外 {
      if (ele.children) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  リターンツリー
}

2. ノードを削除します。

ツリー構造から指定したノードを見つけてノードを削除します。 コードは次のとおりです。

const deleteNodeInTree=(treeList, id)=> { // 配列 (ツリー構造) から要素を id if で削除します。 (!treeList || !treeList.length) {
    戻る
  }
  for (let i = 0; i <treeList.length; i++) {
    if (treeList[i].id === id) {
      ツリーリスト.splice(i, 1);
      壊す;
    }
    RemoveNodeInTree(treeList[i].children, id)
  }
3.

ノードを変更して

ノードのステータスを再帰的に検索および変更します。コードは次のとおりです。

const updateNodeInTree=(treeList,id, obj)=> {
      if (!treeList || !treeList.length) {
        戻る;
      }
      for (let i = 0; i <treeList.length; i++) {
        if (treeList[i].id == id) {
          ツリーリスト[i]= obj;
          壊す;
        }
        updateNodeInTree(treeList[i].children,id,obj);
      }
    4.

ノードを

再帰的に検索してツリー ノード内のノードを見つけます。コードは次のとおりです。

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、キー、コールバック)
        }
      }
    }

    //見つかったノードを保存するメソッド let Obj={}
    findNodeInTree(データ, キー, (項目, インデックス, arr) => {
      オブジェクト = アイテム
    })

    // これは、Obj に対応するノードです console.log(Obj)