بررسی سه تابع مهم Map، Filter و Reduce در جاواسکریپت

در این مقاله می خواهیم به سه تا متد مهم Map، Filter و Reduce جاوا اسکریپت در ارایه ها بپردازیم.

متد فیلتر

متد فیلتر یک تابع callback را به عنوان ورودی می گیرد و یک ارایه جدید بر می گرداند.

نکات مهم:

• متد filter یک آرایه جدید پر از عناصری ایجاد می کند که تست ارائه شده توسط یک تابع را رد می کنند.
• متد filter تابع را برای عناصر خالی اجرا نمی کند.
• متد filter آرایه اصلی را تغییر نمی دهد.

به طور خلاصه، اگر بخواهیم یک ارایه را فیلتر کنیم، می توانیم از تابع filter استفاده کنیم.

نحو استفاده:

array.filter((element) => { /* ... */ } )‍‍‍‍‍‍‍‍

مثال:

let array = [
     {id: 1},
     {id: 2},
     {id: 3},
     {id: 4},
     {id: 5},
     {id: 6},
     {id: 7},
     {id: 8},
     {id: 9},
     {id: 10},
     {id: 11},
     {id: 12},
     {id: 13},
     {id: 14},
     {id: 15},
     // ...
];
let result = array.filter(item => item.id>5);
console.log(result);

در این نمونه ما می خواهیم همه عناصر با id بالاتر از ۵ را بگیریم

تابع فیلتر را می نویسیم و آن را به متغیر با نام result اختصاص می دهیم. این متغیر را روی صفحه چاپ می کنیم

و ما با موفقیت عناصر با id بالاتر از ۵ را فیلتر کردیم.

متد مپ

ما از تابع map برای بازسازی یک آرایه در قالبی که می خواهیم استفاده می کنیم.

• متد map یک آرایه جدید از فراخوانی یک تابع برای هر عنصر آرایه ایجاد می کند.
• متد map یک تابع را یکبار برای هر عنصر در یک آرایه فراخوانی می کند.
• متد map تابع را برای عناصر خالی اجرا نمی کند.
• متد map آرایه اصلی را تغییر نمی دهد.

متد map یک آرایه جدید ایجاد می کند که با نتایج فراخوانی یک تابع ارائه شده در هر عنصر در آرایه فراخوان پر شده است.

نحو استفاده:

array.map((element) => { /* ... */ })

مثال:

let array = [
    {id: 1, name: 'John'},
    {id: 2, name: 'Doe'},
    {id: 3, name: 'Smith'},
    {id: 4, name: &quotBob&quot},
    {id: 5, name: &quotAdam&quot},
// ...
];
let mapResult = array.filter(item => item.id<5).map(item => {
return {
    mapId: item.id,
     mapName: item.name
 }
});
console.log(mapResult);

من می خواستم اطلاعات با id کوچکتر از ۵ را بگیرم و id را در mapId قرار دهم و name را در mapName.

تابع filter و map را می نویسیم سپس ارایه جدید را در متغیر mapResult قرار می دهیم و مقدار متغیر را چاپ می کنیم.

و ما عناصر با شناسه کوچکتر از ۵ را با موفقیت filter و map کردیم.

متد Reduce

هدف تابع Reduce این است که تمام عناصر آرایه اصلی را با مقدار اولیه یا مقدار شی به واحد تبدیل کند.

• متد Reduce یک تابع reducer را برای عنصر آرایه اجرا می کند.
• متد Reduce یک مقدار واحد را برمی گرداند: نتیجه جمع اوری شده تابع.
• متد Reduce تابع را برای عناصر آرایه خالی اجرا نمی کند.
• متد Reduce آرایه اصلی را تغییر نمی دهد.

متد reducer تابع فراخوانی «reducer» ارائه شده توسط کاربر را بر روی هر عنصر آرایه به ترتیب ارسال مقدار بازگشتی از محاسبه روی عنصر قبلی اجرا می کند. نتیجه نهایی اجرای reducer در تمام عناصر آرایه یک مقدار واحد است.

نحو استفاده:

array.reduce((previousValue, currentValue) => { /* ... */ } )

مثال:

let array = [
     {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 5},
    {id: 6},
    {id: 7},
    {id: 8},
    {id: 9},
    {id: 10},
    {id: 11},
    {id: 12},
    {id: 13},
    {id: 14},
    {id: 15},
    // ...
];
let sumId = array.reduce((sum, item) => sum + item.id, 0);
console.log(sumId);

من می خواهم جمع id های موجود در ارایه را بگیرم.

تابع reduce را می نویسیم سپس مقدار جدید را در متغیر sumId ذخیره می کنم. سپس متغیر را چاپ می کنیم.

ما با موفقیت id عناصر را جمع کردیم.

نتیجه گیری

ما توابع filter، map و reduce را به شکل ساده بررسی کردیم. آنها در صورت استفاده صحیح عملیات ما را بسیار ساده تر می کنند.

نظر شما چیست کدام تابع کاربردی تر هست؟ یا اصلا تا حالا از این ۳ تابع استفاده کردید؟ ایا قبلا نحوه استفاده انها را می دانستید؟ لطفا نظرات خودتون رو به اشتراک بگذارید

منابع:

https://ocokyilmaz.medium.com/how-to-use-filter-map-and-reduce-a60fce1e6957

https://developer.mozilla.org/

https://www.w3schools.com/