مع التطوير المستمر لتكنولوجيا الواجهة الأمامية، أصبحت الواجهات التي يجب عرضها في العمل الأمامي أكثر تعقيدًا، لذلك هناك المزيد والمزيد من سيناريوهات معالجة البيانات، على سبيل المثال: غالبًا ما يلزم عرض بنية الشجرة في نظام إدارة الخلفية، تكون بيانات الواجهة الأمامية التي يتم إرجاعها بواسطة الخلفية ذات بنية أفقية، وفي هذا الوقت نحتاج إلى تحويل البيانات إلى بنية شجرة عند عرض الرسم البياني للرسم البياني، ويجب إلغاء تكرار البيانات التي تم إرجاعها ودمجها؛ عند التصفية، نحتاج إلى فرز البيانات، وأكثرها شيوعًا هو وجود إضافات وحذف وتعديلات وعمليات فحص لـ Dom عند تقديم التعليقات، وما إلى ذلك. لذا ستأخذك مقالة اليوم إلى سيناريوهات الأعمال هذه وستواجه هذه الصعوبات لم نعد نخاف من عمليات بيانات JavaScript ودع أعمال التطوير تصبح بسيطة وفعالة.
: هذا هو نظام إدارة الخلفية - وحدة إدارة القاموس، والتي تتضمن أربع عمليات لإضافة وحذف وتعديل والاستعلام عن قاموس البيانات. إذن ما هو الحل للتعامل مع هذه العمليات الأربع، يرجى القراءة؟
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]
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];
arr.splice : يمكن إضافتها أو حذفها أو تعديلها في أي موضع في المصفوفة،
ولها ثلاث وظائف: الحذف والإدراج والاستبدال إرجاع مصفوفة (بما في ذلك العناصر المحذوفة الأصلية في المصفوفة (إرجاع مصفوفة فارغة إذا لم يتم حذف أي عناصر))
splice
(index,howmany,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]
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); لتوصيل عناصر متعددة في المصفوفة في سلسلة مع الفاصل المحدد
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'] يجب القول أنه مع تقدم التكنولوجيا وتطوير الأجهزة، تحسن أداء الحوسبة للمتصفحات أيضًا الوضع الثاني - عملية فرز البيانات، مما يعني أننا بحاجة إلى تنفيذ فرز مختلف على الواجهة الأمامية، فما هي الحلول التي لدينا؟
var arr = [23,34,3,4,23,44,333,444];
arr.sort(وظيفة(أ,ب){
العودة أب.
})
console.log(arr); نقدم هنا أيضًا العديد من خوارزميات الفرز شائعة الاستخدام:
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] 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];
}
المصفوفة[يسار] = مفتاح؛
}
مصفوفة العودة؛
} آخر {
إرجاع "المصفوفة ليست مصفوفة!";
}
} 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] = دقيقة؛
}
مصفوفة العودة؛
} آخر {
إرجاع "المصفوفة ليست مصفوفة!";
}
} 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] = درجة الحرارة;
}
}
}
مصفوفة العودة؛
} آخر {
إرجاع "المصفوفة ليست مصفوفة!";
}
} // الطريقة الأولى 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));
}; /*وصف الطريقة: فرز الكومة على مصفوفة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 ليس رقمًا!';
}
} حسنًا، بعد أن قمنا بحل مشكلة الفرز، نواجه الآن مشكلة إلغاء البيانات المكررة، لا تزال هناك العديد من الحلول، يرجى القراءة ببطء:
في العمل عند معالجة بيانات json، على سبيل المثال، عند فرز أحجام منتجات معينة، من الطبيعي أن يكون للمنتجات المختلفة نفس الحجم، إذا أردنا تحويلها إلى جدول لعرضها، فلا ينبغي تكرار هذا الحجم إليك بعض الطرق لإزالة التكرار من المصفوفات للرجوع إليها:
// أبسط طريقة لإزالة التكرار من المصفوفات/*
* إنشاء مصفوفة جديدة، واجتياز المصفوفة الواردة، ودفع القيمة إلى المصفوفة الجديدة إذا لم تكن في المصفوفة الجديدة * 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)); /*
* الأسرع ويأخذ مساحة أكبر (يتم استبدال المساحة بالوقت)
*
* يتم تنفيذ هذه الطريقة بشكل أسرع من أي طريقة أخرى، ولكنها تستهلك مساحة أكبر من الذاكرة.
* الفكرة الحالية: إنشاء كائن 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));/*
* قم بفرز المصفوفة الواردة بحيث تكون نفس القيم متجاورة بعد الفرز.
* ثم عند الاجتياز، تتم إضافة القيم التي ليست مكررة من القيمة السابقة فقط إلى المصفوفة الجديدة.
* سوف يعطل ترتيب المصفوفة الأصلية * */
وظيفة يونيك (صفيف) {
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)); /*
*
* لا يزال يتعين عليك الاتصال بـ "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)); // الفكرة: احصل على القيمة الموجودة في أقصى اليمين دون تكرار وضعها في مصفوفة جديدة /*
*الطريقة الموصى بها*
* كود تنفيذ الطريقة رائع جدًا.
* فكرة التنفيذ: احصل على القيمة الموجودة في أقصى اليمين دون تكرار وضعها في مصفوفة جديدة.
* (عند اكتشاف قيم مكررة، قم بإنهاء الحلقة الحالية وأدخل الجولة التالية من الحكم لحلقة المستوى الأعلى) */
وظيفة يونيك (صفيف) {
فار درجة الحرارة = [];
مؤشر فار = []؛
فار 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)); عند تحديد قسم، هل ترى غالبًا أن البيانات التي يتم إرجاعها بواسطة الخلفية هي مصفوفة أفقية نحن بشكل عام نقوم بإنشاء هذا النوع من القائمة، يرجى الاطلاع على ~~
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)); 
غالبًا ما نواجه معالجة البيانات عند عرض المخططات، وغالبًا ما نواجه أيضًا دمج المصفوفات، وفيما يلي طريقة لدمج نفس عناصر المصفوفات:
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); بعد رؤية هذا، تم حل العديد من مشكلات معالجة البيانات الشائعة على الواجهة الأمامية تقريبًا. بالطبع، في الواقع، لا تزال هناك العديد من المشكلات التي لم يتم تضمينها، وسيتم متابعتها واحدة تلو الأخرى. سأقوم بتحديثه وإدراجه ببطء، وفي الوقت نفسه، آمل أيضًا أن يتمكن الأصدقاء الذين لديهم مشكلة في معالجة بيانات JavaScript من التواصل مع المدون، ويمكن لأولئك الذين لديهم أفكار جيدة لحل المشكلات أيضًا تقديم تعليقات إلى المدون.
تقدم هذه المقالة خمس مشكلات شائعة في معالجة البيانات في عملية تطوير JavaScript وتوفر الحلول المناسبة لها، وهي تغطي بشكل أساسي احتياجات الاستخدام في عملية التطوير اليومية. يمكن أن تؤدي قراءة هذه المقالة إلى تحسين مهارات JavaScript الأساسية بشكل كبير وتلقي احتياجات التطوير تقديم الحلول.