توابع المصفوفات: map و filter و reduce و find

تعلّم تحويل البيانات وتصفيتها وتجميعها باستخدام توابع المصفوفات الأربعة الأكثر استخدامًا في المشاريع الواقعية.

10 دقيقة · 3 أسئلة

في أي مشروع حقيقي، تقضي وقتك في تحويل البيانات: قائمة منتجات لعرضها، ونتائج API لفرزها، وسلة مشتريات لحساب مجموعها. تحلّ توابع map وfilter وreduce وfind محل معظم حلقات for بشيفرة أقصر وأكثر تعبيرًا. إنها لا تعدّل المصفوفة الأصلية أبدًا: بل تُعيد نتيجة جديدة، ما يمنع صنفًا كاملًا من الأخطاء.

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

يحتفظ filter فقط بالعناصر التي تجتاز اختبارًا ويُعيد مصفوفة جديدة قد تكون فارغة. أما find فيتوقف عند أول عنصر مطابق ويُعيد العنصر نفسه، أو undefined إذا لم يطابق شيء. تمرين ذهني: للحصول على كل المنتجات المتوفرة في المخزون، أيّهما تختار؟ وللحصول على المنتج المسمّى "mouse"؟

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce هو الأقوى: فهو يختزل مصفوفة إلى قيمة واحدة (عدد أو كائن أو نص). يأخذ دالة فيها مُراكِم والعنصر الحالي، إضافةً إلى قيمة ابتدائية. حالة الاستخدام الكلاسيكية: حساب مجموع سلة المشتريات.

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

لاختيار التابع المناسب، اسأل نفسك سؤالًا واحدًا: ما الشكل الذي ينبغي أن تكون عليه النتيجة؟ العدد نفسه من العناصر الأصلية لكن محوّلة: map. مجموعة جزئية: filter. عنصر واحد: find. قيمة محسوبة واحدة: reduce. سيوفّر عليك هذا الحدس وقتًا ثمينًا في المقابلات وفي المشاريع على حد سواء.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أيّ تابع يُعيد دائمًا مصفوفة بالطول نفسه للمصفوفة الأصلية؟
   • filter
   • map
   • reduce
   • find
2. ماذا يُعيد find إذا لم يحقّق أي عنصر الشرط؟
   • null
   • undefined
   • مصفوفة فارغة
   • يُطلَق خطأ
3. في cart.reduce((sum, item) => sum + item.unitPrice, 0)، ما فائدة الـ 0 الأخيرة؟
   • إنها القيمة الابتدائية للمُراكِم sum
   • إنها فهرس البداية للمرور
   • إنها القيمة المُعادة إذا كانت المصفوفة غير صالحة