أساليب المصفوفات التي يجب على كل مطور إتقانها

تُعد المصفوفات من هياكل البيانات الأساسية في JavaScript، وإتقان أساليب المصفوفات أمر حاسم لكتابة كود فعال وأنيق. تسمح لك هذه الأساليب بمعالجة وتحويل وتحليل البيانات المخزنة في المصفوفات، مما يوفر وقتك ويحسن من قابلية قراءة الكود الخاص بك. سيستكشف هذا الدليل أهم أساليب المصفوفات التي يجب على كل مطور معرفتها، مع أمثلة عملية وحالات استخدام.

لماذا يجب إتقان أساليب المصفوفات؟

• الكفاءة: توفر أساليب المصفوفات طرقًا محسّنة وموجزة لإجراء العمليات الشائعة على المصفوفات.
• قابلية القراءة: استخدام الأساليب المدمجة يجعل الكود الخاص بك أسهل في الفهم والصيانة.
• البرمجة الوظيفية: تعزز العديد من أساليب المصفوفات أسلوب البرمجة الوظيفية، مما يؤدي إلى كود أنظف وأكثر قابلية للاختبار.
• التوافق عبر المتصفحات: أساليب مصفوفات JavaScript مدعومة على نطاق واسع في المتصفحات الحديثة.

أساليب المصفوفات الأساسية

1. التكرار عبر المصفوفات: forEach()

يقوم أسلوب forEach() بتنفيذ دالة معينة مرة واحدة لكل عنصر في المصفوفة. إنها طريقة بسيطة للتكرار على عناصر المصفوفة وتنفيذ إجراءات عليها.

الصيغة:

array.forEach(function(currentValue, index, array) {
  // الكود الذي سيتم تنفيذه لكل عنصر
});

مثال:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
  console.log(number * 2);
});
// المخرجات: 2, 4, 6, 8, 10

حالة الاستخدام: عرض العناصر في قائمة، تحديث خصائص عناصر المصفوفة.

2. تحويل المصفوفات: map()

يقوم أسلوب map() بإنشاء مصفوفة جديدة بنتائج استدعاء دالة معينة على كل عنصر في المصفوفة المستدعية. إنه ممتاز لتحويل البيانات من تنسيق إلى آخر.

الصيغة:

const newArray = array.map(function(currentValue, index, array) {
  // إرجاع القيمة المحولة
});

مثال:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);
// المخرجات: [1, 4, 9, 16, 25]

حالة الاستخدام: تنسيق البيانات للعرض، تحويل الوحدات، إنشاء مصفوفة جديدة بقيم معدلة.

مثال عالمي: تخيل أن لديك مصفوفة من قيم العملات بالدولار الأمريكي، وتحتاج إلى تحويلها إلى اليورو. يمكنك استخدام map() مع واجهة برمجة تطبيقات لأسعار الصرف لإنشاء مصفوفة جديدة من قيم اليورو.

3. تصفية المصفوفات: filter()

يقوم أسلوب filter() بإنشاء مصفوفة جديدة تحتوي على جميع العناصر التي تجتاز الاختبار المطبق بواسطة الدالة المقدمة. إنه مثالي لاختيار عناصر محددة من مصفوفة بناءً على شرط.

الصيغة:

const newArray = array.filter(function(currentValue, index, array) {
  // إرجاع true للاحتفاظ بالعنصر، و false لاستبعاده
});

مثال:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// المخرجات: [2, 4, 6]

حالة الاستخدام: إزالة البيانات غير المرغوب فيها، اختيار العناصر بناءً على معايير البحث، تصفية البيانات بناءً على تفضيلات المستخدم.

مثال عالمي: ضع في اعتبارك مصفوفة من كائنات المستخدمين من بلدان مختلفة. يمكنك استخدام filter() لإنشاء مصفوفة جديدة تحتوي فقط على المستخدمين من بلد معين، مثل "اليابان" أو "البرازيل".

4. تقليص المصفوفات: reduce()

يقوم أسلوب reduce() بتنفيذ دالة تقليص (reducer function) (التي تقدمها أنت) على كل عنصر من عناصر المصفوفة، مما ينتج عنه قيمة إخراج واحدة. إنه قوي لإجراء العمليات الحسابية والتجميعات على بيانات المصفوفة.

الصيغة:

const result = array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // إرجاع المجمّع المحدث
}, initialValue);

مثال:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// المخرجات: 15

حالة الاستخدام: حساب المجاميع، المتوسطات، إيجاد القيم القصوى أو الدنيا، ربط السلاسل النصية.

مثال عالمي: لنفترض أن لديك مصفوفة من أرقام المبيعات من مناطق مختلفة (على سبيل المثال، أمريكا الشمالية، أوروبا، آسيا). يمكنك استخدام reduce() لحساب إجمالي المبيعات العالمية.

5. البحث في المصفوفات: find(), findIndex(), includes(), indexOf(), lastIndexOf()

توفر JavaScript عدة أساليب للبحث في المصفوفات:

• find(): تُرجع قيمة أول عنصر في المصفوفة يحقق دالة الاختبار المقدمة. تُرجع undefined إذا لم يحقق أي عنصر الدالة.
• findIndex(): تُرجع فهرس أول عنصر في المصفوفة يحقق دالة الاختبار المقدمة. تُرجع -1 إذا لم يحقق أي عنصر الدالة.
• includes(): تحدد ما إذا كانت المصفوفة تتضمن قيمة معينة بين إدخالاتها، وتُرجع true أو false.
• indexOf(): تُرجع أول فهرس يمكن العثور فيه على عنصر معين في المصفوفة، أو -1 إذا لم يكن موجودًا.
• lastIndexOf(): تُرجع آخر فهرس يمكن العثور فيه على عنصر معين في المصفوفة، أو -1 إذا لم يكن موجودًا.

أمثلة:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find(number => number > 3);
console.log(foundNumber); // المخرجات: 4

const foundIndex = numbers.findIndex(number => number > 3);
console.log(foundIndex); // المخرجات: 3

const includesThree = numbers.includes(3);
console.log(includesThree); // المخرجات: true

const indexOfTwo = numbers.indexOf(2);
console.log(indexOfTwo); // المخرجات: 1

const lastIndexOfFour = [1, 2, 3, 4, 4, 5].lastIndexOf(4);
console.log(lastIndexOfFour); // المخرجات: 4

حالات الاستخدام: العثور على مستخدم معين في قائمة، التحقق مما إذا كان عنصر ما موجودًا في عربة التسوق، تحديد موقع عنصر في مصفوفة.

6. إضافة وإزالة العناصر: push(), pop(), shift(), unshift(), splice()

تقوم هذه الأساليب بتعديل المصفوفة الأصلية عن طريق إضافة أو إزالة العناصر:

• push(): يضيف عنصرًا واحدًا أو أكثر إلى نهاية المصفوفة ويُرجع طول المصفوفة الجديد.
• pop(): يزيل العنصر الأخير من المصفوفة ويُرجع ذلك العنصر.
• shift(): يزيل العنصر الأول من المصفوفة ويُرجع ذلك العنصر.
• unshift(): يضيف عنصرًا واحدًا أو أكثر إلى بداية المصفوفة ويُرجع طول المصفوفة الجديد.
• splice(): يغير محتويات المصفوفة عن طريق إزالة أو استبدال العناصر الموجودة و/أو إضافة عناصر جديدة في مكانها.

أمثلة:

const numbers = [1, 2, 3];

numbers.push(4, 5); // يضيف 4 و 5 إلى النهاية
console.log(numbers); // المخرجات: [1, 2, 3, 4, 5]

const lastElement = numbers.pop(); // يزيل العنصر الأخير (5)
console.log(numbers); // المخرجات: [1, 2, 3, 4]
console.log(lastElement); // المخرجات: 5

const firstElement = numbers.shift(); // يزيل العنصر الأول (1)
console.log(numbers); // المخرجات: [2, 3, 4]
console.log(firstElement); // المخرجات: 1

numbers.unshift(0); // يضيف 0 إلى البداية
console.log(numbers); // المخرجات: [0, 2, 3, 4]

numbers.splice(1, 2, 10, 20); // يزيل عنصرين بدءًا من الفهرس 1، ويدرج 10 و 20
console.log(numbers); // المخرجات: [0, 10, 20, 4]

حالات الاستخدام: إدارة طابور، إضافة عناصر إلى عربة التسوق، تحديث قائمة المهام.

7. إنشاء مصفوفات فرعية: slice()

يقوم أسلوب slice() بإرجاع نسخة سطحية لجزء من مصفوفة إلى كائن مصفوفة جديد محدد من start إلى end (لا يتم تضمين end) حيث يمثل start و end فهرس العناصر في تلك المصفوفة. لن يتم تعديل المصفوفة الأصلية.

الصيغة:

const newArray = array.slice(start, end);

مثال:

const numbers = [1, 2, 3, 4, 5];
const subarray = numbers.slice(1, 4);
console.log(subarray); // المخرجات: [2, 3, 4]
console.log(numbers); // المخرجات: [1, 2, 3, 4, 5] (المصفوفة الأصلية لم تتغير)

حالة الاستخدام: استخراج جزء من مصفوفة للمعالجة، إنشاء نسخة من مصفوفة.

8. فرز المصفوفات: sort()

يقوم أسلوب sort() بفرز عناصر المصفوفة في مكانها ويُرجع المصفوفة المفرزة. ترتيب الفرز الافتراضي هو تصاعدي، مبني على تحويل العناصر إلى سلاسل نصية، ثم مقارنة تسلسل قيم وحدات UTF-16 الخاصة بها.

الصيغة:

array.sort(compareFunction);

تعتبر compareFunction اختيارية. إذا تم حذفها، يتم تحويل عناصر المصفوفة إلى سلاسل نصية وفرزها وفقًا لقيمة وحدة UTF-16. إذا كنت ترغب في فرز الأرقام عدديًا، فأنت بحاجة إلى توفير دالة مقارنة.

أمثلة:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // يفرز أبجديًا (يعامل الأرقام كسلاسل نصية)
console.log(numbers); // المخرجات: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => a - b); // يفرز عدديًا (تصاعديًا)
console.log(numbers); // المخرجات: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => b - a); // يفرز عدديًا (تنازليًا)
console.log(numbers); // المخرجات: [9, 6, 5, 4, 3, 2, 1, 1]

حالة الاستخدام: فرز قائمة المنتجات حسب السعر، فرز المستخدمين حسب الاسم، ترتيب المهام حسب الأولوية.

9. اختبار عناصر المصفوفة: every(), some()

تختبر هذه الأساليب ما إذا كانت جميع أو بعض العناصر في المصفوفة تحقق شرطًا معينًا:

• every(): تختبر ما إذا كانت جميع العناصر في المصفوفة تجتاز الاختبار المطبق بواسطة الدالة المقدمة. تُرجع قيمة بوليانية (Boolean).
• some(): تختبر ما إذا كان عنصر واحد على الأقل في المصفوفة يجتاز الاختبار المطبق بواسطة الدالة المقدمة. تُرجع true إذا وجدت في المصفوفة عنصرًا تُرجع له الدالة المقدمة true؛ وإلا فإنها تُرجع false. لا تعدل المصفوفة.

أمثلة:

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // المخرجات: true

const someOdd = numbers.some(number => number % 2 !== 0);
console.log(someOdd); // المخرجات: false

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

10. ربط عناصر المصفوفة: join()

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

الصيغة:

const newString = array.join(separator);

مثال:

const words = ["Hello", "World", "!"];
const sentence = words.join(" ");
console.log(sentence); // المخرجات: Hello World !

حالة الاستخدام: إنشاء قائمة من القيم مفصولة بفواصل، إنشاء مسار URL من مصفوفة من المقاطع.

أفضل الممارسات

• فهم القيمة المرجعة: كن على دراية بما يُرجعه كل أسلوب (مصفوفة جديدة، قيمة واحدة، قيمة بوليانية، إلخ).
• الثباتية (Immutability): الأساليب مثل map(), filter(), و slice() تنشئ مصفوفات جديدة، مع الحفاظ على البيانات الأصلية. فضّل استخدامها على الأساليب التي تعدل المصفوفة الأصلية (push(), pop(), shift(), unshift(), splice(), sort()) كلما أمكن لتجنب الآثار الجانبية غير المتوقعة.
• السلسلة (Chaining): اجمع بين عدة أساليب للمصفوفات لتنفيذ عمليات معقدة بطريقة موجزة وقابلة للقراءة. على سبيل المثال:

  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const result = numbers
    .filter(number => number % 2 === 0) // تصفية الأرقام الزوجية
    .map(number => number * 2); // الضرب في 2
  console.log(result); // المخرجات: [4, 8, 12, 16, 20]

• الأداء: بينما تكون أساليب المصفوفات فعالة بشكل عام، ضع في اعتبارك الآثار المترتبة على الأداء عند التعامل مع مصفوفات كبيرة جدًا. في بعض الحالات، قد تكون حلقة for التقليدية أسرع.
• قابلية القراءة: اختر الأسلوب الذي يعبر عن قصدك بشكل أفضل. على سبيل المثال، استخدم forEach() للتكرار البسيط، و map() للتحويل، و filter() للاختيار.

الخاتمة

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

تدرب على استخدام هذه الأساليب في سيناريوهات مختلفة لترسيخ فهمك وإطلاق العنان لإمكاناتها الكاملة. أتمنى لك برمجة ممتعة!