آموزش متد filter در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد filter در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد filter در جاوااسکریپت
با استفاده از متد ()filter میتونیم بروی آیتم های یک آرایه فیلتر درست کنیم، فیلتر یعنی مثلا بگیم آیتم هایی که بزرگتر از ۵ هستن بهمون نشون بده یا …
این متد یک تابع رو به ازای هر یک از آیتم های یک آرایه اجرا میکنه بعدش اون آیتم هایی که شرط تابع رو با موفقیت پاس کنند در خروجی نمایش داده میشوند.
| مقدار برگشتی | برگشت یک آرایه جدید از آیتم های فیلتر شده |
|---|---|
| نسخه | ECMAScript 5 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : آیتم هایی که مقدارشون بیشتر از ۵ هست رو جدا میکنیم و در خروجی نمایش میدیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var MyNumber = [1,3,5,7,12,20]; var result = document.getElementById("Result"); result.innerHTML = MyNumber.filter(MyFilter); function MyFilter(number){ return number > 5; } </script> |
مثال شماره ۲ : نام های Ali رو از بین آیتم ها جدا میکنیم و در خروجی نشون میدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> var MyName = ["Ali","Mina","Ali","Reza","Ali","Sanaz"]; var result1 = document.getElementById("Result1"); var result2 = document.getElementById("Result2"); result1.innerHTML = MyName; function Filter(){ result2.innerHTML = MyName.filter(MyFilter); function MyFilter(names){ return names == "Ali"; } } </script> |
مثال شماره ۳ : یک مقدار از کاربر میگیریم و بعدش فیلتر رو بر اساس چیزی که کاربر وارد کرده انجام میده.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> var MyName = ["ali","mina","reza","ali","sanaz","reza"]; var result1 = document.getElementById("Result1"); var result2 = document.getElementById("Result2"); result1.innerHTML = MyName; function MyCheck(){ var user_input = document.getElementById("UserInput").value; result2.innerHTML = MyName.filter(MyFunction); function MyFunction(names){ return names == user_input; } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()filter | بله | بله | بله | بله | ۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Array.filter ( Function(Current_Value , Current_Index , Current_Array) , This_Value ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| ()Function | ضروری – یه تابع که باید بروی تک به تک آیتم ها اجرا بشه |
| Current_Value | ضروری – مقدار فعلی آیتم آرایه |
| Current_Index | اختیاری – شماره ایندکس فعلی آیتم آرایه |
| Current_Array | اختیاری – خوده آرایه فعلی که داره روش پردازش میشه |
| This_Value | اختیاری – یک مقدار که میتونه به تابع ارسال بشه و در تابع به عنوان this گرفته میشه |
Free-Learn
موارد استفاده این متد
از این متد میتوان در بخش های زیر استفاده کرد. ( یعنی کاربرد این متد در موارد زیر می باشد )
| آرایه ها ( Array ) |
Free-Learn
نکات و توضیحات
- این متد بروی آیتم های خالی عمل نمیکنه.
- این متد هیچ تغییری در اصل آرایه ایجاد نمیکنه، فقط آیتم هارو با استفاده از یه تابع چک میکنه و خروجی میده.
