JavaScript는 트리 구조 데이터의 추가, 삭제, 수정 및 쿼리를 어떻게 처리합니까?

문제 설명: JS는 트리 구조의 추가, 삭제, 수정 및 쿼리를 처리합니다.

최근에는 추가, 삭제와 같은 다양한 트리 구조의 데이터 처리 로직을 포함하는 백엔드 관리 시스템에 대한 권한 관리 모듈을 개발하고 있습니다. , 수정, 쿼리 등 일반적인 배열 구조 데이터에 비해 트리 구조 처리는 배열만큼 직관적이지는 않지만 데이터의 심층 탐색을 수행하려면 한 단계 더 필요합니다. 여기에서 블로거는 제가 생각해낸 방법을 공유할 개발 프로세스도 요약할 것입니다. 이 기사에서는 JS 트리 구조 데이터 처리에 대한 철저한 이해를 제공할 것입니다.

데이터 구조 예

let data = [{
        아이디: 1,
        라벨: '레벨 1',
        어린이들: [{
          아이디: 4,
          라벨: '레벨 1-1',
          어린이들: [{
            아이디: 9,
            라벨: '레벨 3 1-1-1'
          }, {
            아이디: 10,
            라벨: '레벨 3 1-1-2'
          }]
        }]
      }, {
        아이디: 2,
        라벨: '레벨 2',
        어린이들: [{
          아이디: 5,
          라벨: '레벨 2-1'
        }, {
          아이디: 6,
          라벨: '레벨 2-2'
        }]
      }, {
        아이디: 3,
        라벨: '레벨 3',
        어린이들: [{
          아이디: 7,
          라벨: '레벨 2 3-1'
        }, {
          아이디: 8,
          라벨: '레벨 3-2'
        }]
      }];

해결 방법:

1. 새 노드를 추가하여

트리 구조에서 지정된 노드를 찾고 새 하위 노드를 추가합니다.

constappendNodeInTree = (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 RemoveNodeInTree=(treeList, id)=> { // id별로 배열(트리 구조)에서 요소를 제거합니다. (!treeList || ! treeList.length) {
    반품
  }
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].id === id) {
      treeList.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) {
          treeList[i]= obj;
          부서지다;
        }
        updateNodeInTree(treeList[i].children,id,obj);
      }
    }

트리 노드에서 노드를 찾기 위해 재귀적으로

노드를 찾습니다

const findNodeInTree = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key == 키) {
          콜백(데이터[i], i, 데이터) 반환
        }
        if (data[i].children) {
          findNodeInTree(data[i].children, 키, 콜백)
        }
      }
    }

    //발견된 노드를 저장하는 방법 let Obj={}
    findNodeInTree(data, key, (item, index, arr) => {
      Obj = 아이템
    })

    // Obj에 해당하는 노드를 찾습니다. console.log(Obj)