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

1. سيناريوهات إضافة البيانات وحذفها وتعديلها والاستعلام عنها

: هذا هو نظام إدارة الخلفية - وحدة إدارة القاموس، والتي تتضمن أربع عمليات لإضافة وحذف وتعديل والاستعلام عن قاموس البيانات. إذن ما هو الحل للتعامل مع هذه العمليات الأربع، يرجى القراءة؟

1. إضافة جديدة إلى المصفوفة

arr.push تدفع عنصرًا أو أكثر من الجزء الخلفي للمصفوفة

var arr = [1,2,3];
// العودة: طول المصفوفة المعدلة arr.push(4,5,6);
console.log(arr)
// نتيجة الإخراج arr=[1,2,3,4,5,6]

يضيف arr.unshift عنصرًا واحدًا أو أكثر من مقدمة المصفوفة

var arr = [1,2,3];
// العودة: طول المصفوفة المعدلة arr.unshift(4,5,6);
console.log(arr)
// نتيجة الإخراج arr=[4,5,6,1,2,3]

2. يتم استخدام حذف المصفوفة

arr.shift لإزالة العنصر الأول من المصفوفة

// يتم استخدام طريقة Shift للمصفوفة لإزالة العنصر الأول عنصر من المصفوفة. قم بإزالة عنصر واحد var arr = [1,2,3];
// إرجاع العنصر المحذوف؛
arr.shift();
// نتيجة الإخراج arr=[2,3]

arr.pop يحذف العنصر الأخير في المصفوفة;

// يتم استخدام طريقة pop للمصفوفة لإزالة العنصر الأخير في المصفوفة var arr = [1,2,3] ;
// إرجاع العنصر المحذوف؛
arr.pop();
// نتيجة الإخراج arr = [1,2];

3. تعديل المصفوفة

arr.splice : يمكن إضافتها أو حذفها أو تعديلها في أي موضع في المصفوفة،

ولها ثلاث وظائف: الحذف والإدراج والاستبدال إرجاع مصفوفة (بما في ذلك العناصر المحذوفة الأصلية في المصفوفة (إرجاع مصفوفة فارغة إذا لم يتم حذف أي عناصر))

• Syntax

splice

(index,howmany,item1,...itemx);

• أو حذف، استخدم الأرقام السالبة، ابدأ من نهاية المصفوفة وحدد الموقع.
• howmany - مطلوب، الكمية المراد حذفها، إذا كانت 0، فلن يتم حذف العنصر.
• item1,...itemx – عناصر جديدة اختيارية لإضافتها إلى المصفوفة.

1. يمكن حذف أي عدد من العناصر عن طريق تحديد معلمتين: موضع العنصر الأول المراد حذفه وعدد العناصر المراد حذفها.

دع arr=[1,2,3];
Let arr1=arr.splice(1,2);// سيحذف العنصرين الثاني والثالث من المصفوفة (أي 2,3)
تنبيه(arr);//[1]
تنبيه (arr1)؛ // [2،3]


2. يمكن إدراج إدراج أي عدد من العناصر في الموضع المحدد من خلال توفير 3 معلمات فقط: موضع البداية، 0 (عدد العناصر المراد حذفها)، والعناصر المراد إدراجها.
دع arr=[1,2,3];
Let arr1=arr.splice(1,0,4,5);// سيتم إدراج 4,5 بدءًا من الموضع 1 في المصفوفة
تنبيه (arr)؛ // [1،4،5،2،3]
تنبيه (arr1)؛//[]

3. يمكن للاستبدال إدراج أي عدد من العناصر في الموضع المحدد وحذف أي عدد من العناصر في نفس الوقت، ما عليك سوى تحديد 3 معلمات: موضع البداية، وعدد العناصر المراد حذفها، وأي عدد من العناصر المراد حذفها سيتم إدراجها (لا يجب أن يكون عدد عمليات الإدراج مساوياً للعدد المحذوف)
دع arr = [1,2,3];
Let arr1=arr.splice(1,1,"red"،"green");// سيحذف 2، ثم يدرج السلاسل "الحمراء" و"الأخضر" من الموضع 2
تنبيه (arr)؛ // [1، "أحمر"، "أخضر"، 3]
تنبيه (arr1)؛//[2]

4. بحث المصفوفة

arr.indexOf : ابحث عن الفهرس وفقًا للعنصر. إذا كان العنصر موجودًا في المصفوفة، فارجع الفهرس، وإلا فارجع -1 المصفوفة

فار آر = [10،20،30]
console.log(arr.indexOf(30)); // 2
console.log(arr.indexOf(40)); // -1

arr.findIndex : يُستخدم للعثور على فهرس العنصر الأول الذي يستوفي الشرط، وإذا لم يكن كذلك، يُرجع -1

var arr = [10, 20, 30] ;
فار res1 = arr.findIndex(function (item) {
  عنصر الإرجاع >= 20؛
});
// قم بإرجاع فهرس العنصر الأول الذي يلبي الشرط console.log(res1);

5. يتم استخدام ربط تحويل المصفوفة والسلسلة

لتوصيل عناصر متعددة في المصفوفة في سلسلة مع الفاصل المحدد

var arr = [ 'User1' ,'User2','User3'];
var str = arr.join('|'); 
console.log(str);  
المستخدم 1 |. المستخدم 2

طريقة تقسيم السلسلة: تحويل الأرقام، متبوعة بأحرف منفصلة

// تُستخدم هذه الطريقة لتقسيم سلسلة إلى مصفوفة بالرمز المحدد var str = 'User 1 User 2 |.
var arr = str.split('|');
console.log(arr);
['User 1', 'User 2', 'User 3']

2. فرز البيانات

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

1. الدالة المضمنة في js arr.sort()

var arr = [23,34,3,4,23,44,333,444];
        arr.sort(وظيفة(أ,ب){
            العودة أب.
        })
    console.log(arr);

نقدم هنا أيضًا العديد من خوارزميات الفرز شائعة الاستخدام:

2. فرز الإدراج

var arr = [23,34,3,4,23,44,333,444];

فار arrShow = (function InsertionSort(array){
إذا (Object.prototype.toString.call(array).slice(8,-1) ==='Array'){

    لـ (var i = 1; i < array.length; i++) {
        مفتاح فار = المصفوفة[i];
        فار ي = ط - 1؛
        بينما (j >= 0 && array[j] > key) {
        المصفوفة[j + 1] = المصفوفة[j];
        ي--؛
        }
      المصفوفة[j + 1] = مفتاح؛
    }
    مصفوفة العودة؛
}آخر{

    إرجاع "المصفوفة ليست مصفوفة!"؛
}
})(arr);

console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444]

3. وظيفة فرز الإدراج الثنائي

BinaryInsertionSort(array) {
إذا (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
لـ (var i = 1; i < array.length; i++) {
    مفتاح فار = المصفوفة[i]، اليسار = 0، اليمين = i - 1؛
    بينما (يسار <= يمين) {
    var middle = parseInt((left + right) / 2);
    إذا (مفتاح <صفيف[الأوسط]) {
    اليمين = الوسط - 1؛
} آخر {
    اليسار = الأوسط + 1؛
}
}
لـ (var j = i - 1; j >= يسار; j--) {
    المصفوفة[j + 1] = المصفوفة[j];
}
المصفوفة[يسار] = مفتاح؛
}
مصفوفة العودة؛
} آخر {
    إرجاع "المصفوفة ليست مصفوفة!"؛
}
}

4. وظيفة فرز التحديد

SelectSort(array) {
إذا (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
    فار لين = array.length، درجة الحرارة؛
    لـ (var i = 0; i < len - 1; i++) {
    var min = array[i];
    لـ (var j = i + 1; j < len; j++) {
        إذا (صفيف [ي] <دقيقة) {
        درجة الحرارة = دقيقة؛
        دقيقة = صفيف[ي];
        المصفوفة[j] = درجة الحرارة;
    }
  }
    المصفوفة[i] = دقيقة؛
}
 مصفوفة العودة؛
} آخر {
    إرجاع "المصفوفة ليست مصفوفة!"؛
}
}

5. وظيفة فرز الفقاعات

bubbleSort(array) {
إذا (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
فار لين = array.length، درجة الحرارة؛
لـ (var i = 0; i < len - 1; i++) {
    لـ (var j = len - 1; j >= i; j--) {
        إذا (صفيف[ي] <صفيف[ي - 1]) {
        درجة الحرارة = صفيف[ي];
        المصفوفة[j] = المصفوفة[j - 1];
        المصفوفة[j - 1] = درجة الحرارة;
}
}
}
    مصفوفة العودة؛
} آخر {
    إرجاع "المصفوفة ليست مصفوفة!"؛
}
}

6. فرز سريع

// الطريقة الأولى function QuickSort(array, left, right) {
إذا (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
إذا (يسار <يمين) {
var x = array[right], i = left - 1, temp;
لـ (var j = left; j <= right; j++) {
    إذا (صفيف [ي] <= س) {
    أنا++;
    درجة الحرارة = صفيف[i];
    المصفوفة[i] = المصفوفة[j];
    المصفوفة[j] = درجة الحرارة;
}
}
QuickSort(array, left, i - 1);
QuickSort(array, i + 1, right);
};
} آخر {
return "المصفوفة ليست مصفوفة أو اليسار أو اليمين ليس رقمًا!";
}
}
فار aaa = [3, 5, 2, 9, 1];
فرز سريع(aaa, 0, aaa.length - 1);
console.log(aaa);


// الطريقة الثانية var QuickSort = function(arr) {
إذا (arr.length <= 1) {return arr}
فار PivotIndex = Math.floor(arr.length / 2);
var Pivot = arr.splice(pivotIndex, 1)[0];
فار اليسار = [];
فار يمين = [];
for (var i = 0; i < arr.length; i++){
إذا (ar[i] <المحور) {
left.push(arr[i]);
} آخر {
right.push(arr[i]);
}
}
إرجاع QuickSort(left).concat([pivot], QuickSort(right));
};

7. فرز الكومة

/*وصف الطريقة: فرز الكومة على مصفوفةparam*/
وظيفة كومة الترتيب (صفيف) {
إذا (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
// أنشئ كومة var heapSize = array.length, temp;
for (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(array, i, heapSize);
}

// فرز الكومة for (var j = heapSize - 1; j >= 1; j--) {
    درجة الحرارة = المصفوفة[0];
    المصفوفة[0] = المصفوفة[j];
    المصفوفة[j] = درجة الحرارة;
    heapify(array, 0, --heapSize);
}
} آخر {
إرجاع "المصفوفة ليست مصفوفة!"؛
}
}
/*وصف الطريقة: الحفاظ على خصائص الكومة @param arr array @param x array subscript @param len heap size*/
وظيفة هيابيفي (arr، x، len) {
إذا (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'number') {
فار ل = 2 * س، ص = 2 * س + 1، الأكبر = س، درجة الحرارة؛
إذا (l < len && arr[l] > arr[أكبر]) {
الأكبر = ل؛
}
إذا (r < len && arr[r] > arr[أكبر]) {
الأكبر = ص؛
}
إذا (الأكبر! = س) {
    درجة الحرارة = آر[x];
    arr[x] = arr[أكبر];
    arr[أكبر] = درجة الحرارة;
    heapify(arr, الأكبر, len);
}
} آخر {
    return 'arr ليس مصفوفة أو x ليس رقمًا!';
}
}

3. إلغاء البيانات المكررة

حسنًا، بعد أن قمنا بحل مشكلة الفرز، نواجه الآن مشكلة إلغاء البيانات المكررة، لا تزال هناك العديد من الحلول، يرجى القراءة ببطء:

في العمل عند معالجة بيانات json، على سبيل المثال، عند فرز أحجام منتجات معينة، من الطبيعي أن يكون للمنتجات المختلفة نفس الحجم، إذا أردنا تحويلها إلى جدول لعرضها، فلا ينبغي تكرار هذا الحجم إليك بعض الطرق لإزالة التكرار من المصفوفات للرجوع إليها:

1. طريقة بسيطة لإزالة التكرار من

// أبسط طريقة لإزالة التكرار من المصفوفات/*
* إنشاء مصفوفة جديدة، واجتياز المصفوفة الواردة، ودفع القيمة إلى المصفوفة الجديدة إذا لم تكن في المصفوفة الجديدة * IE8 وما دونه لا يدعمان طريقة فهرس المصفوفة * */
وظيفة يونيك (صفيف) {
    var temp = []; // مصفوفة مؤقتة جديدة for(var i = 0; i < array.length; i++){
        إذا(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    درجة حرارة العودة؛
}

فار أأ = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

2. طريقة قيمة مفتاح الكائن لإزالة التكرارات

/*
* الأسرع ويأخذ مساحة أكبر (يتم استبدال المساحة بالوقت)
*
* يتم تنفيذ هذه الطريقة بشكل أسرع من أي طريقة أخرى، ولكنها تستهلك مساحة أكبر من الذاكرة.
* الفكرة الحالية: إنشاء كائن js جديد ومصفوفة جديدة عند اجتياز المصفوفة الواردة، تحديد ما إذا كانت القيمة هي مفتاح كائن js.
* إذا لم يكن الأمر كذلك، أضف المفتاح إلى الكائن وضعه في مصفوفة جديدة.
* ملاحظة: عند تحديد ما إذا كان مفتاح كائن js، سيتم تنفيذ "toString ()" تلقائيًا على المفتاح الوارد.
* قد يتم الخلط بين المفاتيح المختلفة، مثل n[val]--n[1], n["1"];
* لحل المشكلة المذكورة أعلاه، لا يزال يتعين عليك الاتصال بـ "indexOf". */
وظيفة يونيك (صفيف) {
    var temp = {}, r = [], len = array. length, val, type;
    لـ (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        إذا (! درجة الحرارة [فال]) {
            temp[val] = [type];
            r.push(val);
        } وإلا إذا (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    العودة ص؛
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

3. طريقة إزالة العناصر المجاورة بعد الفرز

/*
* قم بفرز المصفوفة الواردة بحيث تكون نفس القيم متجاورة بعد الفرز.
* ثم عند الاجتياز، تتم إضافة القيم التي ليست مكررة من القيمة السابقة فقط إلى المصفوفة الجديدة.
* سوف يعطل ترتيب المصفوفة الأصلية * */
وظيفة يونيك (صفيف) {
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        إذا (صفيف [i] ! == درجة الحرارة [temp. length-1]) {
            temp.push(array[i]);
        }
    }
    درجة حرارة العودة؛
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

4. طريقة اشتراك المصفوفة

/*
*
* لا يزال يتعين عليك الاتصال بـ "indexOf" والأداء مشابه للطريقة الأولى.
* فكرة التنفيذ: إذا ظهر العنصر i من المصفوفة الحالية لأول مرة في موضع آخر غير i،
* فهذا يعني تكرار العنصر الأول وتجاهله. بخلاف ذلك، قم بتخزين مصفوفة النتائج.
* */
وظيفة يونيك (صفيف) {
    فار درجة الحرارة = [];
    for(var i = 0; i < array.length; i++) {
        // إذا ظهر العنصر i من المصفوفة الحالية لأول مرة في i في المصفوفة الحالية، فسيتم تخزينه في المصفوفة، وإلا فهذا يعني نسخة مكررة if(array.indexOf(array[i]) == i) {
            temp.push(صفيف[i])
        }
    }
    درجة حرارة العودة؛
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

5. تحسين طريقة اجتياز المصفوفة

// الفكرة: احصل على القيمة الموجودة في أقصى اليمين دون تكرار وضعها في مصفوفة جديدة /*
*الطريقة الموصى بها*
* كود تنفيذ الطريقة رائع جدًا.
* فكرة التنفيذ: احصل على القيمة الموجودة في أقصى اليمين دون تكرار وضعها في مصفوفة جديدة.
* (عند اكتشاف قيم مكررة، قم بإنهاء الحلقة الحالية وأدخل الجولة التالية من الحكم لحلقة المستوى الأعلى) */
وظيفة يونيك (صفيف) {
    فار درجة الحرارة = [];
    مؤشر فار = []؛
    فار l = array.length;
    ل(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            إذا (صفيف[i] === صفيف[ي]){
                أنا++;
                ي = ط؛
            }
        }
        temp.push(array[i]);
        مؤشر.push(i);
    }
    console.log(index);
    درجة حرارة العودة؛
}

فار أأ = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));

4. تصبح القائمة الأفقية عبارة عن بنية شجرة

عند تحديد قسم، هل ترى غالبًا أن البيانات التي يتم إرجاعها بواسطة الخلفية هي مصفوفة أفقية نحن بشكل عام نقوم بإنشاء هذا النوع من القائمة، يرجى الاطلاع على ~~

1. تم تقديم الطريقة خصيصًا هنا:

const dataTree = [
        {المعرف: 1، الاسم: 'المكتب الرئيسي'، معرف الوالدين: 0}،
        {المعرف: 2، الاسم: 'فرع شنتشن'، معرف الوالدين: 1}،
        {المعرف: 3، الاسم: "فرع بكين"، معرف الوالدين: 1}،
       {المعرف: 4، الاسم: "قسم البحث والتطوير"، معرف الوالدين: 2}،
        {المعرف: 5، الاسم: "قسم التسويق"، معرف الوالدين: 2}،
        {المعرف: 6، الاسم: "قسم الاختبار"، معرف الوالدين: 2}،
        {المعرف: 7، الاسم: 'الإدارة المالية'، معرف الوالدين: 2}،
        {المعرف: 8، الاسم: 'قسم التشغيل والصيانة'، معرف الوالدين: 2}،
        {المعرف: 9، الاسم: "قسم التسويق"، معرف الوالدين: 3}،
        {المعرف: 10، الاسم: 'الإدارة المالية'، معرف الوالدين: 3}،
       
    ]
    دالة تغيير البيانات (البيانات، ParentId = 0) {
        Let Tree = [];// أنشئ مصفوفة فارغة// اجتياز كل جزء من البيانات data.map((item) => {
            // معرف الأصل في كل جزء من البيانات هو نفسه الذي تم تمريره if (item.parentId ==parentId) {
                // ما عليك سوى البحث عن مجموعة فرعية من هذا العنصر للعثور علىparentId==item.id في العنصر بهذه الطريقة بشكل متكرر item.children =changeData(data, item.id);
                Tree.push(item);
            }
        })
        شجرة العودة
    }
    console.log(changeData(dataTree, 0));

5. دمج نفس عناصر كائنات المصفوفة

غالبًا ما نواجه معالجة البيانات عند عرض المخططات، وغالبًا ما نواجه أيضًا دمج المصفوفات، وفيما يلي طريقة لدمج نفس عناصر المصفوفات:

• أولاً، يتم استخدام بيانات المصفوفة الأصلية،
• ثم يتم إنشاء كائن خريطة فارغ ومصفوفة نتائج فارغة. من خلال الحكم على ما إذا كانت الخريطة تحتوي على عنصر معين، يتم الحكم على نتيجة المصفوفة ما إذا كان سيتم إضافة بيانات،
• ثم يتم إضافة نفس العنصر مقارنة محتويات مصفوفة النتائج الحالية ودمجها؛

1. خصص المدون رمز الأجداد الذي تم الاعتزاز به لسنوات عديدة هنا:

var arr = [.
{"id": "1"، "name": "Chelizi"، "num": "245"}،
{"id": "1"، "name": "Chelizi"، "num": "360"}،
{"id": "2"، "name": "Apple"، "num": "120"}،
{"id": "2"، "name": "Apple"، "num": "360"}،
{"id": "2"، "name": "Apple"، "num": "180"}،
{"id": "3"، "name": "banana"، "num": "160"}،
{"id": "4"، "name": "الأناناس"، "الرقم": "180"}،
{"id": "4"، "name": "الأناناس"، "الرقم": "240"}
];
خريطة فار = {},result= [];
for(var i = 0; i < arr.length; i++){
varele = arr[i];
إذا(!خريطة[ele.id]){
نتيجة.دفع({
المعرف:ele.id،
الاسم: ele.name،
القيمة: ele.value
});
Map[ele.id] = ele;
}آخر{
for(var j = 0; j < result.length; j++){
var dj = result[j];
إذا (dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
استراحة؛
}
}
}
};
console.log(result);