فیلتر در جاوا اسکریپت: بیان ساده + مثال عملی

فیلتر کردن داده‌ها در برنامه‌نویسی مهارتی حیاتی است. به عنوان یک توسعه دهنده جاوا اسکریپت، اغلب اوقات نیاز دارید تا زیرمجموعه‌ای از داده‌ها را بر اساس شرایط خاص استخراج‌کنید. در اینجاست که فیلتر در جاوا اسکریپت وارد عمل می‌شود. Filter در جاوا اسکریپت ابزاری قدرتمند برای غربالگری آرایه‌ها و ایجاد مجموعه‌های داده جدید بر اساس معیارهای از پیش تعیین شده است که در ادامه این مقاله از مکتوب به آن خواهیم پرداخت.

فیلتر در جاوا اسکریپت چیست؟

فیلتر در اصل متدی است که به شما امکان می‌دهد عناصر خاصی را از یک آرایه بر اساس یک تابع callback استخراج‌کنید. این تابع برای هر عنصر در آرایه اجرا می‌شود و یک مقدار true یا false را برمی‌گرداند. اگر تابع برای یک عنصر true برگرداند، آن عنصر در آرایه فیلتر شده گنجانده می‌شود. در غیر این صورت، عنصر حذف می‌شود.

متد Filter در جاوا اسکریپت

جاوا اسکریپت دارای یک متد داخلی به نام Filter است که برای فیلتر کردن آرایه‌ها استفاده می‌شود. این متد دو آرگومان می‌پذیرد:

مرجع کامل و تخصصی آموزش جاوا اسکریپت + اعطای گواهینامه دوره

کلیک کنید

• آرایه: آرایه‌ای که می‌خواهید فیلتر کنید.
• تابع callback: تابعی که برای هر عنصر در آرایه اجرا می‌شود. این تابع باید یک مقدار true یا false برگرداند.

بیایید با یک مثال ساده شروع کنیم:

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

در این مثال، تابع callback بررسی می‌کند که آیا عدد بر 2 بخش‌پذیر است یا خیر (even number). اگر چنین باشد، تابع true برمی‌گرداند و عدد در آرایه فیلتر شده evenNumbers گنجانده می‌شود.

درک تابع callback در فیلتر

تابع callback قلب فیلتر کردن در جاوا اسکریپت است. این تابع به شما امکان می‌دهد منطق فیلتر کردن را بر اساس نیازهای خاص خود تعریف کنید. تابع callback یک آرگومان دریافت می‌کند که عنصر جاری در آرایه است و یک مقدار true یا false برمی‌گرداند.

نکاتی در مورد تابع callback:

• این تابع می‌تواند هر تعداد آرگومان اضافی را بپذیرد، به عنوان مثال، برای دسترسی به سایر عناصر در آرایه یا شاخص فعلی عنصر.
• می‌توانید از arrow function برای نوشتن یک تابع callback مختصرتر استفاده کنید.

پیشنهاد مطالعه: آموزش تست نویسی جاوا اسکریپت به زبان ساده

مثال‌های کاربردی Filter در جاوا اسکریپت

فیلتر کاربردهای فراوانی در جاوا اسکریپت دارد. در اینجا چند نمونه از نحوه استفاده از آن در سناریوهای مختلف آورده شده است:

• استخراج اعداد زوج از یک آرایه: همان‌طور که در مثال قبلی نشان داده شد، می‌توانید از فیلتر برای استخراج اعداد زوج یا فرد از یک آرایه استفاده کنید.
• ایجاد لیستی از کاربران فعال: فرض کنید آرایه‌ای از اشیاء کاربر دارید که دارای فیلدی به نام isActive هستند. می‌توانید از فیلتر برای ایجاد لیستی از کاربران فعال با بررسی مقدار isActive استفاده کنید.
• فیلتر کردن بر اساس چندین شرط: تابع callback می‌تواند شرایط بیشتری را برای فیلتر کردن عناصر در خود جای دهد. برای مثال، می‌توانید محصولاتی را با قیمت کمتر از حد معینی و موجود در انبار فیلتر کنید.

تفاوت فیلتر با سایر متدهای آرایه جاوا اسکریپت

جاوا اسکریپت چندین متد مفید دیگر برای کار با آرایه‌ها ارائه می‌دهد. مهم است که تفاوت‌های بین فیلتر و سایر متدها را درک کنید:

• map: متد map در جاوا اسکریپت یک آرایه جدید ایجاد می‌کند که هر عنصر در آرایه اصلی را بر اساس یک تابع transform می‌کند. فیلتر یک آرایه فرعی از عناصر مطابق با شرایط خاص ایجاد می‌کند.
• reduce: متد reduce در جاوا اسکریپت آرایه را به یک مقدار واحد کاهش می‌دهد. فیلتر برای استخراج زیرمجموعه‌ای از عناصر بر اساس شرایط استفاده می‌شود.
• findIndex: متد findIndex در جاوا اسکریپت شاخص اولین عنصری را که تابع callback مقدار true را برای آن برمی‌گرداند، باز خواهد گرداند.

چند مثال برای متد فیلتر در جاوا اسکریپت

درست است که فیلتر در جاوا اسکریپت ابزاری قدرتمند برای غربالگری آرایه‌ها است، اما درک آن برای کاربران مبتدی می‌تواند کمی دشوار باشد. به همین دلیل، در این بخش به ارائه چند مثال ساده و کاربردی از متد فیلتر می‌پردازیم تا درک این مفهوم برای شما آسان‌تر شود.

دوره آموزش جامع طراحی سایت فرانت اند

کلیک کنید

در ادامه برای درک بهتر این موضوع با ما همراه باشید:

مثال ۱: استخراج اعداد زوج از یک آرایه

فرض کنید آرایه‌ای از اعداد به نام numbers دارید و می‌خواهید لیستی از اعداد زوج را از آن استخراج‌کنید. می‌توانید از فیلتر به شرح زیر استفاده کنید:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {

  return number % 2 === 0;

});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

در این مثال، تابع callback بررسی می‌کند که آیا عدد بر 2 بخش‌پذیر است یا خیر. اگر عدد بخش‌پذیر باشد، در آرایه evenNumbers گنجانده می‌شود.

مثال ۱: ایجاد لیستی از کاربران فعال

فرض کنید آرایه‌ای از اشیاء کاربر به نام users دارید که دارای فیلدی به نام isActive هستند. می‌خواهید لیستی از کاربران فعال را بر اساس isActive ایجاد کنید:

const users = [

  { id: 1, name: 'John Doe', isActive: true },

  { id: 2, name: 'Jane Doe', isActive: false },

  { id: 3, name: 'Peter Jones', isActive: true },

];

const activeUsers = users.filter(function(user) {

  return user.isActive;

});

console.log(activeUsers); // [{ id: 1, name: 'John Doe', isActive: true }, { id: 3, name: 'Peter Jones', isActive: true }]

در این مثال، تابع callback بررسی می‌کند که آیا isActive کاربر true است یا خیر. اگر true باشد، کاربر در آرایه activeUsers گنجانده می‌شود.

پیشنهاد مطالعه: آموزش جاوا اسکریپت در وردپرس؛ صفر تا صد

مثال ۳: فیلتر کردن بر اساس چند شرط

می‌توانید از فیلتر برای فیلتر کردن عناصر بر اساس چندین شرط استفاده کنید. به عنوان مثال، می‌توانید محصولاتی را با قیمت کمتر از 500 تومان و موجود در انبار فیلتر کنید:

const products = [
  { id: 1, name: 'Laptop', price: 600, inStock: true },
  { id: 2, name: 'Phone', price: 400, inStock: false },
  { id: 3, name: 'Tablet', price: 350, inStock: true },
];

const filteredProducts = products.filter(function(product) {
  return product.price < 500 && product.inStock;
});

console.log(filteredProducts); // [{ id: 2, name: 'Phone', price: 400, inStock: false }, { id: 3, name: 'Tablet', price: 350, inStock: true }]

در این مثال، تابع callback بررسی می‌کند که آیا قیمت محصول کمتر از 500 تومان است و در انبار موجود است یا خیر. اگر هر دو شرط true باشند، محصول در آرایه filteredProducts گنجانده می‌شود.

نکات مهم  در استفاده از متد فیلتر در Javascript

نکات زیر برای متد فیلتر اهمیت زیادی دارند:

• تابع callback در فیلتر قلب منطق فیلتر کردن است. این تابع باید بر اساس شرایط شما عناصر را بررسی کند و مقدار true یا false را برگرداند.
• می‌توانید از arrow function برای نوشتن تابع callback به صورت مختصرتر استفاده کنید.
• فیلتر آرایه اصلی را تغییر نمی‌دهد. در عوض، یک آرایه جدید حاوی عناصر فیلتر شده ایجاد می‌کند.
• می‌توانید فیلتر را با سایر متدهای آرایه جاوا اسکریپت مانند map و reduce ترکیب کنید.

با تمرین و استفاده از مثال‌های مختلف، می‌توانید به راحتی از قدرت فیلتر در جاوا اسکریپت برای فیلتر کردن آرایه‌ها و استخراج داده‌های موردنیاز خود استفاده کنید.

مزایای استفاده از فیلتر در جاوا اسکریپت

Filter در جاوا اسکریپت مزایای متعددی را برای برنامه‌نویسی ارائه می‌دهد، از جمله موارد زیر:

• کد خوانا: فیلتر به شما امکان می‌دهد کد خود را برای خوانایی و درک آسان‌تر سازمان‌دهی کنید. منطق فیلتر کردن به طور واضح در تابع callback جدا شده است.
• انعطاف‌پذیری: تابع callback به شما امکان می‌دهد شرایط فیلتر کردن را بر اساس نیازهای خاص خود سفارشی کنید.
• عملکرد: فیلتر به طور کارآمد برای آرایه‌های بزرگ اجرا می‌شود.

نکات و بهترین روش‌ها برای استفاده از فیلتر

در هنگام استفاده از فیلتر در جاوا اسکریپت، به نکات زیر توجه کنید:

• از تابع callback واضح و مختصر استفاده کنید.
• برای شرایط پیچیده‌تر، از چندین تابع callback یا توابع کمکی استفاده کنید.
• از فیلتر برای استخراج زیرمجموعه‌ای از عناصر به‌جای تغییر آرایه اصلی استفاده کنید.
• با سایر متدهای آرایه جاوا اسکریپت مانند map و reduce ترکیب کنید.

چه زمانی باید از فیلتر و چه زمانی از map استفاده کنم؟

از فیلتر برای استخراج زیرمجموعه‌ای از عناصر از یک آرایه بر اساس شرایط خاص استفاده کنید. از map برای تبدیل هر عنصر در یک آرایه به یک عنصر جدید استفاده کنید.

آیا می‌توان از چندین شرط در تابع callback فیلتر استفاده کرد؟

بله می‌توانید از چندین شرط در تابع callback فیلتر برای فیلتر کردن عناصر بر اساس شرایط پیچیده‌تر استفاده کنید.

 آیا فیلتر آرایه اصلی را تغییر می‌دهد؟

خیر، فیلتر آرایه اصلی را تغییر نمی‌دهد. در عوض، یک آرایه جدید حاوی عناصر فیلتر شده ایجاد می‌کند.

 آیا می‌توان از فیلتر برای مرتب‌سازی آرایه استفاده کرد؟

خیر، فیلتر برای مرتب‌سازی آرایه‌ها طراحی نشده است. برای مرتب‌سازی آرایه، از متد sort استفاده کنید.

پیشنهاد مطالعه: آموزش دستورات جاوا اسکریپت به زبان ساده

 آیا می‌توان از Filter در جاوا اسکریپت برای یافتن اولین عنصر مطابق با یک شرط استفاده کرد؟

بله می‌توانید از متد findIndex برای یافتن شاخص اولین عنصری که تابع callback مقدار true را برای آن برمی‌گرداند، استفاده کنید.

کلام پایانی

فیلتر در جاوا اسکریپت ابزاری قدرتمند برای غربالگری آرایه‌ها و استخراج زیرمجموعه‌ای از داده‌ها بر اساس شرایط خاص است. با درک نحوه عملکرد فیلتر و تابع callback، می‌توانید کد خود را برای خوانایی، انعطاف‌پذیری و عملکرد بهتر ارتقا دهید.

آموزش Asynchronous در جاوا اسکریپت

کلیک کنید

اگر به برنامه نویسی جاوا اسکریپت علاقه‌مند هستید  ودوست دارید در این زمینه واقعا پیشرفت کنید، پیشنهاد ما به شما استفاده از دوره‌های آموزش javascript مکتب خونه است. همچنین در مکتب خونه انواع دوره آموزش طراحی سایت و آموزش برنامه نویسی نیز موجود است که در پایان هر دوره به شما گواهینامه معتبر نیز تعلق خواهد گرفت.