كيف تقوم JavaScript بمعالجة إضافة البيانات المهيكلة على شكل شجرة وحذفها وتعديلها والاستعلام عنها؟

وصف المشكلة: يتعامل JS مع إضافة الهياكل الشجرية وحذفها وتعديلها والاستعلام عنها،

وقد قمت مؤخرًا بتطوير وحدة إدارة الأذونات لنظام إدارة الواجهة الخلفية، والتي تتضمن منطق معالجة البيانات لمختلف الهياكل الشجرية، مثل: الإضافة والحذف. والتعديل والاستعلام وما إلى ذلك؛ مقارنة ببيانات بنية المصفوفة العادية، فإن معالجة بنية الشجرة ليست بديهية مثل المصفوفة، ولكنها تتطلب خطوة أخرى - بحث متكرر لإجراء اجتياز عميق للبيانات هنا، سيلخص المدون أيضًا عملية التطوير، وسأشارك الطريقة التي توصلت إليها، وستمنحك هذه المقالة فهمًا شاملاً لمعالجة بيانات بنية شجرة JS:

مثال على بنية البيانات

دع البيانات = [{
        المعرف: 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=> {
    إذا (ele.id === معرف) {
      ele.children ?ele.children.push(obj): ele.children = [obj]
    } آخر {
      إذا (ele.children) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  شجرة العودة
}

2. احذف العقدة،

ابحث عن العقدة المحددة في بنية الشجرة واحذف العقدة، الكود كما يلي

const RemoveNodeInTree=(treeList, id)=> { // إزالة العناصر من المصفوفة (بنية الشجرة) حسب المعرف if (!treeList || ! TreeList.length) {
    يعود
  }
  for (let i = 0; i <treeList.length; i++) {
    إذا (treeList[i].id === معرف) {
      TreeList.splice(i, 1);
      استراحة؛
    }
    RemoveNodeInTree(treeList[i].children, id)
  }
}

3. قم بتعديل العقدة

للبحث بشكل متكرر وتعديل حالة العقدة، ويكون الرمز كما يلي:

const updateNodeInTree=(treeList,id, obj)=> {
      إذا (!treeList || !treeList.length) {
        يعود؛
      }
      for (let i = 0; i <treeList.length; i++) {
        إذا (treeList[i].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]. الأطفال) {
          findNodeInTree (بيانات [i]. children، مفتاح، رد اتصال)
        }
      }
    }

    // طريقة تخزين العقدة التي تم العثور عليها Let Obj={}
    findNodeInTree(data, key, (item, Index, arr) => {
      Obj = العنصر
    })

    // هذه هي العقدة التي سيتم العثور عليها المقابلة لـ Obj console.log(Obj)