المصفوفات في جافاسكريبت: أساسيات ومرشحات البيانات

مقدمة افتتاحية

في عالم تطوير الويب، تعد البيانات هي الوقود الذي يشغل تطبيقاتنا. تخيل أن لديك قائمة ضخمة من المنتجات، المستخدمين، أو أي معلومات أخرى. كيف يمكنك تنظيمها، والبحث فيها، واستخراج ما تحتاجه بالضبط؟ هنا يأتي دور المصفوفات (Arrays) في جافاسكريبت، والتي لا تتيح لنا فقط تخزين مجموعات من البيانات، بل توفر لنا أيضاً أدوات قوية لمعالجتها، مثل دالة filter() التي سنتعمق فيها اليوم، وهي بوابتك للتحكم بفعالية في تدفق معلوماتك.

ما هي المصفوفات في جافاسكريبت؟

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

لنفترض أن لدينا قائمة بمنتجات متجر إلكتروني. بدلاً من تعريف كل منتج كمتغير منفصل، يمكننا تجميعها في مصفوفة واحدة من الكائنات:


const products = [
  { id: 1, name: "هاتف ذكي", price: 3000, inStock: true },
  { id: 2, name: "حاسوب محمول", price: 5000, inStock: false },
  { id: 3, name: "سماعات لاسلكية", price: 500, inStock: true },
  { id: 4, name: "شاحن سريع", price: 150, inStock: true }
];

في هذا المثال، products هي مصفوفة، وكل عنصر فيها هو كائن يمثل منتجاً بخصائص مثل id، name، price، و inStock.

دالة filter(): مرشح البيانات الفعال

تخيل أنك تريد عرض المنتجات المتوفرة فقط، أو تلك التي لا تتجاوز سعراً معيناً. هنا تبرز قوة دالة filter(). دالة filter() هي إحدى دوال المصفوفات المدمجة عالية الترتيب (Higher-Order Functions) في جافاسكريبت. وظيفتها الأساسية هي إنشاء مصفوفة جديدة تحتوي على كل العناصر التي أجتازت اختباراً معيناً (أي أن الدالة التي يتم تمريرها إليها أعادت قيمة true).

كيف تعمل filter()؟

  1. تأخذ دالة filter() دالة رد نداء (callback function) كوسيط.
  2. تقوم دالة رد النداء هذه بتنفيذ اختبار منطقي على كل عنصر من عناصر المصفوفة الأصلية.
  3. إذا أعادت دالة رد النداء true للعنصر، فسيتم تضمين هذا العنصر في المصفوفة الجديدة الناتجة.
  4. إذا أعادت false، فسيتم تجاهل العنصر.

مثال عملي على filter()

لنطبق دالة filter() على مصفوفة المنتجات لدينا لاستخراج المنتجات المتوفرة في المخزون وسعرها أقل من 1000:


const affordableAvailableProducts = products.filter(product => 
  product.inStock === true && product.price < 1000
);

في هذا الكود:

  • product => ...: هذه دالة سهمية (Arrow Function) يتم تطبيقها على كل product في المصفوفة.
  • product.inStock === true: هذا هو الشرط الأول، للتأكد من أن المنتج متوفر في المخزون.
  • product.price < 1000: هذا هو الشرط الثاني، للتأكد من أن سعر المنتج أقل من 1000.
  • علامة &&: تعني أن كلا الشرطين يجب أن يكونا صحيحين لكي يتم تضمين المنتج في المصفوفة الجديدة.

عرض النتائج باستخدام console.table()

بعد تصفية البيانات، يمكنك استخدام console.table() لعرض المصفوفة الناتجة بطريقة منظمة وجدولية في متصفحك أو بيئة Node.js، مما يسهل قراءة البيانات وفهمها.


console.log("المنتجات المتاحة والمناسبة لميزانيتك:");
console.table(affordableAvailableProducts);

خاتمة

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


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

مقالات ذات صلة قد تهمك: