أساليب المصفوفات: map وfilter وreduce وfind
حوّل المصفوفات وفلترها واجمع قيمها باستخدام الأساليب ذات الترتيب الأعلى بدلًا من الحلقات اليدوية. وسلسِلها لإنشاء مسارات بيانات واضحة.
أساليب المصفوفات: map وfilter وreduce وfind درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا نستخدم أساليب المصفوفات؟
تعمل حلقات for الإجرائية، لكنها قد تخفي الهدف من الكود. تصف الأساليب عالية الترتيب للمصفوفات ما تريده بدلًا من كيفية التكرار. وتنتج كودًا أنظف وأسهل للاختبار والتركيب، ويُقرأ كما لو كان نثرًا.
Array.map() — تحويل كل عنصر
تعيد map() مصفوفة جديدة حُوِّل كل عنصر فيها بواسطة الدالة الراجعة. ولا تعدّل المصفوفة الأصلية. استخدمها عندما تحتاج إلى تحويل مصفوفة إلى أخرى.
const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]Array.filter() — اختيار العناصر المطابقة
تعيد filter() مصفوفة جديدة تحتوي فقط على العناصر التي تعيد الدالة الراجعة لها قيمة صادقة. وتُسمى الدالة الراجعة دالةَ تحقّق.
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 17 },
{ name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]Array.reduce() — تجميع قيمة
تجمع reduce(callback, initialValue) جميع العناصر في قيمة واحدة. وتتلقى الدالة الراجعة المُجمِّعَ والعنصرَ الحالي. وتمثل القيمة الأولية قيمة البداية للمُجمِّع.
const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100
const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
acc[letter] = (acc[letter] || 0) + 1;
return acc;
}, {});
// { a: 3, b: 2, c: 1 }Array.find() — أول تطابق
تعيد find() أول عنصر يطابق دالة التحقق، أو undefined إذا لم يوجد أي عنصر. استخدمها للبحث عن عنصر حسب المعرّف أو قيمة إحدى الخصائص.
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }
const missing = users.find(u => u.id === 99);
// undefinedArray.findIndex()
تشبه findIndex() الدالة find()، لكنها تعيد فهرس العنصر المطابق أو -1 إذا لم يُعثر عليه. وهي مفيدة لمعرفة موضع العنصر الذي تريد تحديثه في مصفوفة.
const idx = users.findIndex(u => u.id === 2);
// 1Array.some() و Array.every()
تعيد some() القيمة true إذا اجتاز عنصر واحد على الأقل الاختبار. ولا تعيد every() القيمة true إلا إذا اجتازت جميع العناصر الاختبار. وتتوقف الدالتان عند الوصول إلى أول نتيجة حاسمة.
const hasAdult = users.some(u => u.age >= 18); // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adultsArray.flatMap() — تحويل ثم تسطيح
تحوّل flatMap() كل عنصر ثم تسطّح النتيجة بمستوى واحد. وهي مكافئة لـ .map(...).flat()، لكنها أكثر كفاءة.
const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']تسلسل أساليب المصفوفات
تعيد الأساليب مصفوفات جديدة، لذلك يمكنك تسلسلها. اقرأ التسلسلات من اليسار إلى اليمين: التصفية أولًا، ثم التحويل، ثم التجميع.
const result = products
.filter(p => p.inStock)
.map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
.sort((a, b) => a.price - b.price)
.slice(0, 5); // top 5 cheapest in-stock productsArray.at() و Array.includes()
تعيد at(-1) العنصر الأخير. وتتحقق includes(value) من وجود قيمة ما. وهذا أوضح بكثير من arr[arr.length - 1] و arr.indexOf(v) !== -1.
const arr = [1, 2, 3, 4, 5];
arr.at(-1); // 5
arr.at(-2); // 4
arr.includes(3); // true
arr.includes(99); // falseعدم القابلية للتغيير: لا تعدّل البيانات
تعيد map و filter و reduce مصفوفات جديدة. أما push و pop و splice فتعدّل المصفوفة الأصلية. في حالة React، أنشئ دائمًا مصفوفات جديدة (باستخدام spread أو map) بدلًا من تعديل الحالة مباشرة.
// Bad in React:
state.items.push(newItem); // mutates original
// Good:
const newItems = [...state.items, newItem]; // new arrayتحقق سريع
أي أسلوب للمصفوفات يعيد مصفوفة جديدة من العناصر التي تعيد الدالة الراجعة لها القيمة true؟
مراجعة: أساليب المصفوفات
تحوّل map() كل عنصر. وتختار filter() العناصر المطابقة. ويجمع reduce() العناصر في قيمة واحدة. ويعيد find() أول تطابق. وتختبر some()/every() تحقق الشرط. وتستبدل سلاسل هذه الأساليب الحلقات المتداخلة بخطوط معالجة بيانات واضحة وتصريحية.
الأسئلة الشائعة
هل درس «أساليب المصفوفات: map وfilter وreduce وfind» مجاني؟
نعم — نص درس «أساليب المصفوفات: map وfilter وreduce وfind» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «أساليب المصفوفات: map وfilter وreduce وfind»؟
حوّل المصفوفات وفلترها واجمع قيمها باستخدام الأساليب ذات الترتيب الأعلى بدلًا من الحلقات اليدوية. وسلسِلها لإنشاء مسارات بيانات واضحة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «أساليب المصفوفات: map وfilter وreduce وfind»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساليب المصفوفات: map وfilter وreduce وfind
- تفكيك الكائنات وعامل الانتشار
- القوالب النصية والسلسلة الاختيارية
- الوحدات: import وexport