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

この記事では、主にツリー構造データの追加、削除、変更、クエリに関する問題を整理した javascript に関する関連知識を提供します。 data 構造体の処理は配列ほど直感的ではありませんが、それほど複雑ではありません。データを深く調べるには、再帰検索がもう 1 ステップ必要です。一緒に見てみましょう。皆さんのお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

問題の説明: JS処理ツリー ツリー状構造の追加、削除、変更、クエリ

最近、私はバックグラウンド管理システム用の権利管理モジュールを開発しています。これには、さまざまなツリー状構造のデータ処理ロジックが含まれます。追加、削除、変更、クエリなど; ツリー構造の処理は、通常の配列構造データに比べて、配列ほど直感的ではありませんが、それほど複雑ではありません。もう 1 つの手順が必要です - 再帰検索 を使用して、データに対して深いトラバーサル操作を実行します。では、ここではどうでしょうか? 、ブロガーは、開発プロセス中に要約されたメソッドも共有します。この記事では、JS ツリー構造のデータ処理を完全に理解できます。

#データ構造の例

  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'
        }]
      }];

解決策:

1. 新規追加node

ツリー構造の指定されたノードを検索し、新しい子ノードを追加します。コードは次のとおりです:

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. ノードの削除

指定されたノードをツリー構造から検索します。ツリー構造を変更してノードを削除します。コードは次のとおりです。

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. ノードの変更

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

  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. ノードの検索

ツリー ノード内のノードを再帰的に検索します。コード:

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)

[ 関連する推奨事項:

javascript ビデオ チュートリアル 、webフロントエンド＃＃＃】＃＃＃

以上がJavaScript はツリー構造データの追加、削除、変更、クエリをどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。