ما وظيفة الدوال filter و match مع أمثلة عليهم

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

const newArray = array.filter((element) => {
  return condition; // إذا كانت القيمة true ضاف العنصر للمصفوفة الجديدة
});

حيث :

• element: العنصر الحالي في المصفوفة.
• condition: الشرط الذي يجب أن يحققه العنصر ليبقى في المصفوفة الجديدة.

إليك مثال لتصفية الأعداد الأكبر من 5 :

const numbers = [1, 6, 3, 8, 2, 9];
const filteredNumbers = numbers.filter((num) => num > 5);

console.log(filteredNumbers); // [6, 8, 9]

الناتج هو مصفوفة جديدة تحتوي فقط على الأعداد الأكبر من 5.

أما دالة match() تستخدم مع النصوص (Strings) للبحث عن تطابق مع نمط معين مثل تعبير عادي أو نص عادى أو حتى Regular Expression.

فمثلا نريد استخراج الأرقام من نص ما :

const text = "Age: 25, Height: 180cm";
const numbers = text.match(/\d+/g);

console.log(numbers); // ["25", "180"]

هنا الناتج هو مصفوفة تحتوي على جميع الأرقام الموجودة في النص.

وإليك تفاصيل أكثر حولهم :

• filter
• match

للتوضيح أكثر يمكنك الإطلاع على الأمثلة التالية 

أولاً لنفترض أن لديك تطبيقًا لإدارة المنتجات، ولديك قائمة من المنتجات ككائنات JavaScript. تريد عرض المنتجات المتوفرة فقط، أو المنتجات التي تنتمي إلى فئة معينة وهنا نستخدم filter كالتالي

// بيانات المنتجات (يمكن أن تأتي من API أو قاعدة بيانات)
const products = [
    { id: 1, name: 'لابتوب ديل XPS', category: 'إلكترونيات', price: 1500, inStock: true },
    { id: 2, name: 'ماوس لاسلكي لوجيتك', category: 'إلكترونيات', price: 50, inStock: false },
    { id: 3, name: 'كتاب تعلم JavaScript', category: 'كتب', price: 30, inStock: true },
    { id: 4, name: 'قميص قطني رجالي', category: 'ملابس', price: 45, inStock: true },
    { id: 5, name: 'سماعات رأس سوني', category: 'إلكترونيات', price: 200, inStock: true },
    { id: 6, name: 'طاولة قهوة خشبية', category: 'أثاث', price: 120, inStock: false }
];

// 1. تصفية المنتجات المتوفرة في المخزون فقط
function getAvailableProducts(allProducts) {
    return allProducts.filter(product => product.inStock === true);
}

const availableProducts = getAvailableProducts(products);
console.log("المنتجات المتوفرة في المخزون:");
console.log(availableProducts);
/*
Output:
[
  { id: 1, name: 'لابتوب ديل XPS', category: 'إلكترونيات', price: 1500, inStock: true },
  { id: 3, name: 'كتاب تعلم JavaScript', category: 'كتب', price: 30, inStock: true },
  { id: 4, name: 'قميص قطني رجالي', category: 'ملابس', price: 45, inStock: true },
  { id: 5, name: 'سماعات رأس سوني', category: 'إلكترونيات', price: 200, inStock: true }
]
*/

أما بالنسبة ل match فيمكنك أن تعمل على نظام للتحقق من صحة المدخلات في نموذج (form validation) كالتالي

function parseEmail(email) {
    // تعبير نمطي بسيط للتحقق من بنية البريد الإلكتروني واستخراج اسم المستخدم والنطاق
    // [a-zA-Z0-9._%+-]+@  -> اسم المستخدم
    // [a-zA-Z0-9.-]+\.   -> اسم النطاق (قبل النقطة الأخيرة)
    // [a-zA-Z]{2,}       -> امتداد النطاق (مثل com, org, net)
    const emailRegex = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/;
    const matchResult = email.match(emailRegex);

    if (matchResult) {
        // matchResult[0] هو التطابق الكامل
        // matchResult[1] هو الجزء الأول الملتقط (اسم المستخدم)
        // matchResult[2] هو الجزء الثاني الملتقط (النطاق الرئيسي)
        // matchResult[3] هو الجزء الثالث الملتقط (امتداد النطاق)
        return {
            isValid: true,
            fullEmail: matchResult[0],
            username: matchResult[1],
            domain: `${matchResult[2]}.${matchResult[3]}` // إعادة بناء النطاق كاملاً
        };
    } else {
        return { isValid: false, message: "صيغة البريد الإلكتروني غير صحيحة." };
    }
}

console.log("تحقق من البريد الإلكتروني 1:");
console.log(parseEmail("user.name@example.com"));
/*
Output:
{
  isValid: true,
  fullEmail: 'user.name@example.com',
  username: 'user.name',
  domain: 'example.com'
}
*/