JavaScript ประมวลผลการเพิ่ม การลบ การแก้ไข และการสืบค้นข้อมูลที่มีโครงสร้างแบบต้นไม้อย่างไร

คำอธิบายปัญหา: JS จัดการการเพิ่ม การลบ การแก้ไข และการสืบค้นโครงสร้างแผนผัง

เมื่อเร็วๆ นี้ ฉันได้พัฒนาโมดูลการจัดการสิทธิ์สำหรับระบบการจัดการแบ็กเอนด์ ซึ่งเกี่ยวข้องกับตรรกะการประมวลผลข้อมูลของโครงสร้างแผนผังต่างๆ เช่น การเพิ่ม การลบ การแก้ไข การสืบค้น ฯลฯ เมื่อเปรียบเทียบกับข้อมูลโครงสร้าง Array ทั่วไป การประมวลผลโครงสร้างต้นไม้นั้นไม่ซับซ้อนเท่ากับ Array แต่ก็ไม่ได้ซับซ้อนขนาดนั้น ที่นี่ บล็อกเกอร์จะสรุปกระบวนการพัฒนาที่ฉันจะแบ่งปันวิธีการที่ฉันคิดขึ้นมา บทความนี้จะช่วยให้คุณมีความเข้าใจอย่างถ่องแท้เกี่ยวกับการประมวลผลข้อมูลโครงสร้าง JS:

ตัวอย่างโครงสร้างข้อมูล

ให้ 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. เพิ่มโหนดใหม่

เพื่อค้นหาโหนดที่ระบุในโครงสร้างต้นไม้และเพิ่มโหนดลูกใหม่ รหัสจะเป็นดังนี้:

const appendNodeInTree = (id, tree, obj) => {
  tree.forEach(เอเล=> {
    ถ้า (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } อื่น {
      ถ้า (ele.children) {
        ผนวก NodeInTree (id, ele.children, obj)
      -
    -
  -
  ต้นไม้กลับ
}

2. ลบโหนด

ค้นหาโหนดที่ระบุในโครงสร้างต้นไม้และลบโหนด รหัสจะเป็นดังนี้

const removeNodeInTree=(treeList, id)=> { // ลบองค์ประกอบออกจากอาร์เรย์ (โครงสร้างต้นไม้) ด้วย id if (!treeList || ! treeList.length) {
    กลับ
  -
  สำหรับ (ให้ i = 0; i < treeList.length; i++) {
    ถ้า (treeList [i] .id === id) {
      treeList.splice (i, 1);
      หยุดพัก;
    -
    RemoveNodeInTree(treeList[i].children, id)
  -
}

3. แก้ไขโหนด

เพื่อค้นหาและแก้ไขสถานะของโหนดแบบวนซ้ำ รหัสจะเป็นดังนี้:

const updateNodeInTree=(treeList,id, obj)=> {
      ถ้า (!treeList || !treeList.length) {
        กลับ;
      -
      สำหรับ (ให้ i = 0; i < treeList.length; i++) {
        ถ้า (treeList [i] .id == id) {
          treeList[i]= obj;
          หยุดพัก;
        -
        updateNodeInTree(treeList[i].children,id,obj);
      -
    }

4. ค้นหาโหนด

แบบวนซ้ำเพื่อค้นหาโหนดในโหนดแผนผัง รหัส:

const findNodeInTree = (data, key, callback) => {
      สำหรับ (ให้ i = 0; i < data.length; i++) {
        ถ้า (ข้อมูล [i] .key == คีย์) {
          โทรกลับ (ข้อมูล [i], i, ข้อมูล)
        -
        ถ้า (ข้อมูล [i] .children) {
          findNodeInTree (data[i].children, คีย์, โทรกลับ)
        -
      -
    -

    //วิธีการจัดเก็บโหนดที่พบ ให้ Obj={}
    findNodeInTree (ข้อมูล, คีย์, (รายการ, ดัชนี, arr) => {
      Obj = รายการ
    -

    // นี่คือโหนดที่จะพบซึ่งสอดคล้องกับ Obj console.log(Obj)