فیلتر (Filter) کردن عنصرهای (Element) یک آرایه (Array)، با اجرای یک تابع (Function) بر روی تک تک عنصرهای (Element) آرایه (Array) و چک کردن یک شرط (Condition) توسط تابع (Function) و برگرداندن عنصرهایی (Element) که در شرط صدق می کنند به صورت یک آرایه (Array) جدید، با روش filter ، در JavaScript

با استفاده از روش filter در JavaScript ، می توانیم عنصرهای (Element) یک آرایه (Array) را فیلتر (Filter) کنیم، یعنی عنصرهایی (Element) از آرایه (Array) که در یک شرط (Condition) خاص صدق می کنند را به صورت یک آرایه (Array) جدید به دست می آوریم (فیلتر کردن).

روش filter ، یک تابع (Function) را در ورودی خود دریافت می کند و این تابع (Function) است که شرط (Condition) مورد نظرمان در آن تعریف شده است و هر عنصری (Element) را که شرط برای آن صادق باشد، تابع (Function) آن عنصر (Element) را با استفاده از return برمی گرداند.

نکته

اگر تابعی (Function) که به روش filter می دهیم، تنها یک ورودی (input) داشته باشد، آنگاه روش filter ، آن ورودی را به عنوان مقدار (Value) عنصر (Element) (یعنی خود عنصر) در نظر می گیرد (عنصر آرایه اصلی). یعنی به شکل کلی زیر :

اگر تابعی (Function) که به روش filter می دهیم، دو ورودی (input) داشته باشد، آنگاه روش filter ، ورودی اول را به عنوان مقدار (Value) عنصر (Element) (یعنی خود عنصر) و ورودی دوم را به عنوان شماره متناظر با عنصر (ایندکس - index) در نظر می گیرد (عنصر آرایه اصلی و شماره متناظر با آن). یعنی به شکل کلی زیر :

دقت شود که نام های تعیین شده برای ورودی های تابع (Function) در کدهای تعریف تابع (Function) مهم نیستند و هر چه باشند، روش filter آنها را مطابق آنچه گفته شد، در نظر می گیرد.

نکته

روش filter ، آرایه (Array) اصلی را تغییر نمی دهد.

به مثال زیر توجه کنید :

مثال

نتیجه :

نکته مهم

معمولا در وب سایت های مختلف، نحوه استفاده از روش filter را به این صورت شرح می دهند که در هنگام تعریف تابع (Function)، صرفا شرط (Condition) مورد نظر در جلوی return نوشته می شود (یک شرط تک خطی). مثل تابع (Function) زیر :

اگرچه این مدل استاندارد تعریف تابع (Function) در هنگام استفاده از روش filter است، اما اگر شرط (Condition) در جلوی return نوشته نشود و فقط در تابع (Function) ذکر کنیم که اگر شرط (Condition) برقرار بود، آنگاه کد مربوط به return اجرا شود (حالا هر چه جلوی return نوشته شده باشد و هر چه را که برگرداند)، آنگاه باز هم روش filter به درستی عمل می کند (ما در تابع هر چه که تعیین کرده باشیم که توسط return برگردانده شود، روش filter صرفا خود مقدار (Value) عنصر (Element) را برمی گرداند و مشکلی در عملکرد آن وجود نخواهد داشت) :

مثلا اگر در تابع (Function) بالا، در جلوی return ، فقط عدد ثابت 1 را بنویسیم، باز هم روش filter به درستی عمل می کند، زیرا خط مربوط به return زمانی اجرا می شود که قبلا شرط (Condition) مورد نظرمان برآورده شده باشد (روش filter مقدار (Value) عنصر (Element) را برمی گرداند، نه عدد ثابت 1 را) :

به مثال زیر توجه کنید :

مثال

نتیجه :

مثال

نتیجه :

مثال

نتیجه :

مثال

روش filter ، خود مقدار (Value) عنصر (Element) از آرایه (Array) اصلی را برمی گرداند و ما حتی اگر در کدهای تابع (Function)، عملیاتی را بر روی عنصر (Element) انجام دهیم و نتیجه عملیات را در تابع (Function) در جلوی return بنویسیم، روش filter آن نتیجه را به ما نمی دهد، بلکه خود مقدار (Value) عنصر (Element) از آرایه (Array) اصلی را به ما می دهد :

نتیجه :

مشاهده می کنید با وجودی که در تابع (Function)، مقدار (Value) عنصر (Element) را در 3 ضرب کرده ایم و نتیجه را در جلوی return نوشته ایم (تا تابع آن نتیجه را برگرداند)، ولی روش filter ، خود مقدار (Value) عنصر (Element) از آرایه (Array) اصلی را برای ما برگردانده است :

مثال

نتیجه :

نکته

می توانیم تابع (Function) مورد نظرمان را در ورودی خود روش filter تعریف کنیم. برای این منظور، دقیقا همان کدهایی که برای تعریف تابع (Function) می نوشتیم را درون پرانتز روش filter می نویسیم.

به مثال زیر توجه کنید :

مثال

اگر در کدهای JavaScript بالا دقت کنید، مشاهده می کنید که کد تعریف تابع (Function) زیر، درون پرانتز روش filter نوشته شده است :

نتیجه :

آرایه ای (Array) از شیء ها (Object) :

اگر آرایه (Array) مورد نظرمان، آرایه ای (Array) از شیء ها (Object) باشد، آنگاه می توانیم روش filter را برای اجرای یک تابع (Function) بر روی مشخصه های (Property) شیء های (Object) موجود در آن آرایه (Array) به کار ببریم، تا شرط (Condition) مورد نظرمان بر روی مشخصه های (Property) شیء ها (Object) بررسی شود و سپس عنصرهایی (Element) که در شرط (Condition) صدق کرده اند، به صورت یک آرایه (Array) برگردانده می شود.

به مثال زیر توجه کنید :

مثال

از روش JSON.stringify برای تبدیل آرایه (Array) شامل شیء ها (Object) به یک رشته (String) استفاده کرده ایم تا بتوانیم آن را در خروجی صفحه نمایش دهیم.