JavaScript는 트리 구조 데이터의 추가, 삭제, 수정 및 쿼리를 어떻게 처리합니까?-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2022-07-18 13:53:13

앞으로

2210명이 탐색했습니다.

이 기사에서는 트리 구조 데이터의 추가, 삭제, 수정 및 쿼리와 관련된 문제를 주로 정리하는 javascript에 대한 관련 지식을 제공합니다. 일반 배열 구조 데이터와 비교하여 트리 처리에는 배열이 없습니다. -구조화된 데이터. 매우 직관적이지만 그렇게 복잡하지는 않습니다. 데이터를 깊이 탐색하려면 한 단계 더 필요합니다. 모두에게 도움이 되기를 바랍니다.

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

[관련 권장사항: javascript 비디오 튜토리얼, web front-end]

문제 설명: JS가 트리 구조의 추가, 삭제, 수정 및 확인을 처리합니다

최근에 일반 배열 구조 데이터와 비교하여 추가, 삭제, 수정, 검색 등과 같은 다양한 트리 구조의 데이터 처리 논리에 대한 백그라운드 관리 시스템은 배열만큼 직관적이지 않습니다. 그렇게 복잡하지 않으며 많은 작업이 필요합니다. 한 단계 - 데이터에 대한 심층 탐색 작업을 수행하기 위한 재귀 검색 따라서 여기서는 블로거가 개발 과정에서 요약한 방법도 공유할 것입니다. 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. 트리 구조의 지정된 노드를 찾아 하위 노드를 추가합니다.

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)

로그인 후 복사

[관련 권장 사항: