إتقان معالجة مصفوفات JavaScript باستخدام Map و Filter

تُظهر هذه المقالة كيفية استخدام دالتي map() و filter() في جافاسكريبت بكفاءة، بشكل منفرد و مجتمعين، لمعالجة المصفوفات بكفاءة. سنتناول أمثلة عملية لتوضيح قوتهما وقدرتهما على تعديل البيانات.

محتويات

• دالة Map في جافاسكريبت
• دالة Filter في جافاسكريبت
• ربط دالتي Map و Filter
• مثال واقعي: تصفية منتجات التجارة الإلكترونية
• الخلاصة

دالة Map في جافاسكريبت

إن map() هي دالة من الدرجة الأعلى تقوم بالتكرار على كل عنصر في مصفوفة وتطبيق دالة مُستدعَة مُعطاة. تقوم هذه الدالة بتحويل كل عنصر، وmap() تُرجع مصفوفة جديدة تحتوي على القيم المُحَوَّلة. تبقى المصفوفة الأصلية دون تغيير.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // المصفوفة الأصلية لم تتغير

دالة Filter في جافاسكريبت

تقوم دالة filter() أيضًا بالتكرار خلال مصفوفة. ومع ذلك، بدلاً من تحويل العناصر، فإنها تتضمن عناصر بشكل انتقائي بناءً على شرط مُعرّف بواسطة دالة مُستدعَة. يجب أن تُرجع الدالة المُستدعَة true لإدراج العنصر و false لاستبعاده. تُرجع filter() مصفوفة جديدة تحتوي فقط على العناصر التي تلبي الشرط.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);

ربط دالتي Map و Filter

تتجلى القوة الحقيقية لدالتي map() و filter() عندما يتم ربطهما معًا. هذا يسمح بطريقة موجزة وفعالة لأداء عمليات معالجة بيانات معقدة. عادةً ما يتم تطبيق filter() أولاً لتضييق نطاق المصفوفة، متبوعًا بـ map() لتحويل العناصر المتبقية.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
  .filter(number => number % 2 === 0)
  .map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);

مثال واقعي: تصفية منتجات التجارة الإلكترونية

لنتخيل تطبيق تجارة إلكترونية. لدينا مصفوفة من كائنات المنتجات:

const products = [
  { name: "Shirt", price: 25, inStock: true, category: "clothing" },
  { name: "Pants", price: 40, inStock: false, category: "clothing" },
  { name: "Shoes", price: 75, inStock: true, category: "shoes" },
  { name: "Hat", price: 15, inStock: true, category: "accessories" },
  { name: "Jacket", price: 60, inStock: true, category: "clothing" }
];

نريد عرض أسماء ملابس المتوفرة فقط. يمكننا تحقيق ذلك بشكل أنيق باستخدام filter() و map():

const inStockClothingNames = products
  .filter(product => product.inStock && product.category === "clothing")
  .map(product => product.name);

console.log(inStockClothingNames); // ['Shirt', 'Jacket']

الخلاصة

يُقدّم الجمع بين map() و filter() نهجًا قويًا وسهل القراءة لمعالجة المصفوفات في جافاسكريبت. يُعزز هذا النمط الوظيفي من نظافة الكود، ويُقلل من الحاجة إلى الحلقات المفصلة، ويُحسّن من الصيانة. تذكر أن كلا الدالتين تُعيدان مصفوفات جديدة، مع الحفاظ على ثبات البيانات الأصلية.