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

سلام، تو اولین نوشته ی خودم در ویرگول میرم سراغ فیلترها در جاوا اسکریپت
تو این مقاله با استفاده از مثال نحوه عملکرد سیستم آموزشی دانشگاه با فیلترها به خوبی آشنا میشیم.
متد ()filter در مقایسه با متد های ()map و reduce خیلی ساده تر و با مسمی تره :))

شما یک ارایه رو به عنوان ورود به این متد میدین و خروجی رو با یک فانکشن و شرطتون مشخص میکنید و در یک آرایه جدید تحویل میگیرین :)

این بنظر خیلی ساده میرسه، اما من عادت دارم ساختار به طور کامل بفهمم تا بتونم راحتر با قضیه کنار بیام پس بیاین باهم بیشتر بریم تو فیلتر!!!

متد ()Filter به صورت true و false بررسی میکنه و خروجی در قالب یک آرایه جدید هست.

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

استفاده از For Loop برای فیلتر کردن فانکشن

بسیار خب، ما الان میخوایم یه ارایه از 4 دانش آموز رو درست کنیم با اسم و نمره شون. در یکی از دانشکده ها دانش آموز هایی که نمره شون 3.2 و بالاتر باشه رو پذیرش میکنن پس باید همچین چیزی داشته باشیم:

let students = [
  { 
    name: "ali", 
    GPA: 3.3 
  }, 
  { 
    name: "shila", 
    GPA: 3.1 
  }, 
  { 
    name: "arezoo", 
    GPA: 3.65 
  }, 
  { 
    name: "mohammad", 
    GPA: 3.8 
  }
] 

let admitted =[]; 

for (let i=0; i < students.length; i++){ 
  if(students[i].gpa > 3.2) 
    admitted.push(students[i]); 
} 

/*admitted = [
  { 
    name: "ali", 
    GPA: 3.3 
  }, 
  { 
    name: "arezoo", 
    GPA: 3.65 
  }, 
  { 
    name: "mohammad", 
    GPA: 3.8 
  }
];*/

تو کد بالا میبینید که بعد از تعریف ارایه دانش آموزان من با استفاده از حلقه ()for با استفاده شرطی که گذاشتم دانش آموز هارو فیلتر کردم. اما این یه راهیه که خودمونو اذیت کردیم با اینکه جواب داد و خروجی درسته اما تو ادامه به جای حلقه از متد فیلتر استفاده میکنیم و مزایاشو هم باهم چک میکنیم.

استفاده از متد ()Filter

بیاین باهم همون هدفی که بالا داشتیم رو با استفاده از متد فیلتر پیاده کنیم.

1- فیلتر یک متد آرایه ای هست، خب ماهم با آرایه ای از دانش آموز ها شروع میکنیم
2- از یک فانکشن بازگشتی (callback function) استفاده میکنه برای اجرای هر المنت در آرایه.
3- در نهایت هم خروجی که کدوم المنت ها در خروجی هستند رو به صورت آرایه برگشت میده.

اما کد:

let students = [
  { 
    name: "ali", 
    GPA: 3.3 
  }, 
  { 
    name: "shila", 
    GPA: 3.1 
  }, 
  { 
    name: "arezoo", 
    GPA: 3.65 
  }, 
  { 
    name: "mohammad", 
    GPA: 3.8 
  }
] 

let admitted = students.filter(function(student){
   return student.gpa > 3.2;
})

/*admitted = [
  { 
    name: "ali", 
    GPA: 3.3 
  }, 
  { 
    name: "arezoo", 
    GPA: 3.65 
  }, 
  { 
    name: "mohammad", 
    GPA: 3.8 
  }
];*/

همونطور که میبینین ورود ها و خروجی های ما یکسان هستند، اما تفاوت ها تو اینجا چی هست؟

1- ما احتیاج نداریم که از قبل آرایه ی با اسم admitted رو تعریف کنیم و بعدا اون رو مقدار دهی کنیم. ما همونجا تعریفش کردم و مستقیم مشخص کردیم که با چه دیتایی قراره پرشه.
2- ما از یک شرطی استفاده کردیم و در نهایت وضعیت رو برگشت دادیم ( به قول فرنگیا return statement)
3- الان دیگه ما میتونیم از student برای هر المنتی استفاده کنیم، اگه یادتون باشه قبلا students[i] رو تو for loop استفاده میکردیم.

شاید الان بگین که یه چیزی اینجا میزون نیست، پذیرش در دانشگاه در مرحله آخره اما تو کد های ما متغییر admitted در اول قرار گرفته. شاید شما انتظار داشته باشین که آرایه نهایی رو داخل فانکشن ببینین اما ما اینجا از return برای مشخص کردن خروجی های استفاده کردیم

مثال 2 - استفاده از دو شرط داخل متد فیلتر

تا حالا، ما فقط از یک شرط تو متد فیلترمون استفاده میکردیم. اما همیشه که زندگی اینقد راحت نیست و ممکنه برای چک کردن شروط دیگه هم لازم باشه +10 تا فاکتور رو چک کنیم.

اما در حال حاضر شما به دوتا فاکتور رضایت بدین علاوه بر نمره کل مثلا نمره مهارت های فنی هم با چک کنیم. دانش آموز باید نمره بالای 3.2 و مهارت بالای امتیاز 1900 داشته باشه. همون دستورات بالا رو به شکل زیر اصلاح میکنیم:

let students = [
  {
    name: "ali",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "shila",
    GPA: 3.1,
    SAT: 1600
  },
  {
    name: "arezoo",
    GPA: 3.65,
    SAT: 1700
  },
  {
    name: "mohammad",
    GPA: 3.8,
    SAT: 2100
  }
]

let admitted = students.filter(function(student){
   return student.gpa > 3.2 && student.SAT > 1900;
})

/*admitted = [
  {
    name: "ali",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "mohammad",
    GPA: 3.8,
    SAT: 2100
  }
];*/

خیلی آشنا بنظر میاد نه؟ الان ما دوتا شرط داریم که خروجی هارو مشخص میکنه. اما بیاین یکم بیشتر روش کار کنیم، اگه قسمت فیلتر بالا رو به شکل زیر بنویسم چه اتفاقی میفته؟ به کد زیر دقت کنید:

let admitted = students.filter(function(student){
   let goodStudent = student.gpa > 3.2 && student.SAT > 1900
   return goodStudent;
})

اگه از کد بالا خروجی بگیرین متوجه یه تفاوت دیگه میشین که خیلی مهمه !! که تفات این متد با حلقه for رو مشخص میکنه. اگه شما متغییر goodStudent رو چک کنید متوجه میشد که خروجی true و false هست و نوع بازگشتی boolean هست.

پس در واقع اون true و false تصمیم میگیرند که تو آرایه ای که بازگشت داده میشه کدوم مقادیر قرار بگیرند.

در نهایت امیدوارم که این مطلب براتون مفید واقع شده باشه، شما تجربه استفاده از این متد رو داشتین؟ خوشحال میشم نظراتتون رو زیر این پست ببینم و باهم بیشتر صحبت و تبادل نظر کنیم :)