快捷導(dǎo)航

一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)

更新時間：2022年07月05日 14:13:00 作者：國服第二切圖仔

在開發(fā)后臺管理系統(tǒng)時，常常會涉及到各種樹狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等。而樹狀結(jié)構(gòu)的處理就沒有數(shù)組那么的直觀。本文為大家總結(jié)了JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理的方法，需要的可以參考下

問題描述

JS處理樹狀結(jié)構(gòu)的增刪改查

最近在開發(fā)一個后臺管理系統(tǒng)的權(quán)限管理模塊，涉及到各種樹狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等；相比普通的數(shù)組結(jié)構(gòu)數(shù)據(jù)，樹狀結(jié)構(gòu)的處理就沒有數(shù)組那么的直觀，但是也沒那么復(fù)雜，需要多一步——遞歸查找來對數(shù)據(jù)進行深度遍歷操作，那么這里呢，博主也將開發(fā)過程中總結(jié)出來的方法分享給大家，一文帶你吃透JS樹裝結(jié)構(gòu)數(shù)據(jù)處理：

數(shù)據(jù)結(jié)構(gòu)示例

  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、新增節(jié)點

查找樹裝結(jié)構(gòu)的指定節(jié)點，新增子節(jié)點，代碼如下：

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、刪除節(jié)點

查找樹裝結(jié)構(gòu)的指定節(jié)點，刪除節(jié)點，代碼如下

 const removeNodeInTree=(treeList, id)=> { // 通過id從數(shù)組（樹結(jié)構(gòu)）中移除元素
  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、修改節(jié)點

遞歸查找并修改某個節(jié)點的狀態(tài)，代碼如下：

  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;
        }
        setTreeListNodeFalse(treeList[i].children,id,obj);
      }
    }

4、查找節(jié)點

遞歸查找樹形節(jié)點的某個節(jié)點，代碼：

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)
        }
      }
    }
 
    // 所查找到的節(jié)點要存儲的方法
    let Obj={}
    findNodeInTree(data, key, (item, index, arr) => {
      Obj = item
    })
 
    // 此時就是Obj對應(yīng)的要查找的節(jié)點
    console.log(Obj)