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

توی این قسمت متدهای map ،find و filter که از مهمترین متدهای آرایه‌های جاوااسکریپت هستند رو بررسی می‌کنیم

درود دوستان! سه متد پرکاربرد از آرایه‌های جاوااسکریپت که توی این قسمت می‌خوایم رو بررسی کنیم:

• filter()
• find()
• map()

متد Filter

این متد آرایه ما رو از یک فیلتر (شرط) عبور میده. خروجی این متد، یک آرایه جدید از آیتم‌هایی هست که شرط رو پاس کردن. پس هر وقت می‌خوایم یک آرایه جدید از اعضای دلخواه (فیلتر شده) داشته باشیم از این متد استفاده می‌کنیم.

توی مثال زیر می‌خوایم اعضایی از آرایه رو داشته باشیم که بزرگتر از ۱۰ هستن:

let numbers = [29, 5, 10, 11, 35];

let filtered = numbers.filter(item => item > 10);
// [29, 11, 35]

ساختار کلی متد filter بصورت زیر هست:

let newArray = arr.filter(function(element, index, arr) {

});

این متد یک تابع Callback (این توابع با رخ‌دادن یک رویداد خاص توی برنامه اجرا میشن) به عنوان ورودی می‌گیره. توی این تابع ما شرط فیلترمون رو می‌نویسیم. این شرط روی همه‌ی اعضای آرایه اعمال میشه و اعضایی که نتیجه‌ی شرط برای اونها true باشه از این فیلتر عبور می‌کنن. این تابع سه تا آرگومان قبول می‌کنه:

element
اجباری هست و مقدار اون عضوی از آرایه هست که داره پردازش میشه.

index
ایندکس عضوی هست که داره پردازش میشه

array
شامل آرایه‌ای هست که متد filter داره روی اون کار می‌کنه

let numbers = [29, 5, 10, 11, 35];

let filtered = numbers.filter((number, index, array) {
  console.log(index);
  console.log(array);

  return number > 10;
});

// 0  [29, 5, 10, 11, 35]
// 1  [29, 5, 10, 11, 35]
// 2  [29, 5, 10, 11, 35]
// 3  [29, 5, 10, 11, 35]
// 4  [29, 5, 10, 11, 35]

توی مثال بعدی می‌خوایم اعضایی رو داشته باشیم که رنگ مورد علاقه‌ی اونها سبز هست:

const users = [
    { name: 'Chris', color: 'Brown' },
    { name: 'Napoleon', color: 'Green' },
    { name: 'David', color: 'Blue' },
    { name: 'Michael', color: 'Green' },
];

const greenLovers = users.filter(
  user => user.color === 'Green'
);

console.log(greenLovers);

/*
[
  { name: 'Napoleon', color: 'Green' },
  { name: 'Michael', color: 'Green' }
]
*/

که البته filter رو با Object Destructuring میشه زیباتر هم نوشت:

const greenLovers = users.filter(
  ({ color }) => color === 'Green'
);

متد Find

این متد اولین عضوی رو برمی‌گردونه که شرط مورد نظر ما برای اون برقرار باشه. استفاده از این متد برای زمانی خوبه که یک آرایه از چندین آبجکت داریم و این آبجکت‌ها هر کدوم شامل یک فیلد خاص مثلا id (شناسه) میشن. مثلا یک آرایه از کاربران که از پایگاه داده اومده. برای جستجوی یک شناسه‌ی خاص توی این آرایه کافیه از این متد استفاده کنیم:

const users = [
    { id: 50, name: 'Chris' },
    { id: 90, name: 'Napoleon' },
    { id: 73, name: 'David' },
    { id: 29, name: 'Michael' },
];

let david = users.find(item => item.id === 73);

console.log(david); // { id: 73, name: 'David' }

به محض اینکه عضو مورد نظر ما پیدا شد، کار این متد متوقف میشه. همچنین اگه هیچ عضوی پیدا نشد خروجی این متد undefined هست. ساختار کلی متد find به صورت زیر هست:

arr.find(function(element, index, arr) {

})

این متد، یک تابع Callback رو به عنوان آرگومان قبول می‌کنه. به این تابع سه آرگومان میشه پاس داد که دقیقا مشابه چیزی هست که توی filter داشتیم.

متد Map

این متد، یک سری عملیات رو روی هر کدوم از اعضای آرایه اعمال می‌کنه و خروجی رو می‌ریزه تو یک آرایه جدید.

توی مثال زیر می‌خوایم اعضای آرایه رو ضربدر ۲ کنیم:

const numbers = [1, 2, 3];

const mulBy2 = numbers.map(item => item * 2);

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

همونطور که می‌بینیم تابعی که به این متد پاس داده شده، عملیات ضربدر ۲ رو روی همه‌ی اعضا اعمال کرد و نتیجه‌ی نهایی رو به خروجی داد. ساختار کلی متد map بصورت زیر هست:

arr.map(function(element, index, arr) {

});

درست مثل find و filter، این متد هم یک تابع به عنوان ورودی می‌گیره و این تابع خودش ۳ آرگومان می‌گیره که کارایی اون دقیقا مثل چیزی هست که توی متدهای قبلی داشتیم.

چه زمانی از map استفاده نکنیم؟

همونطور که گفته شد خروجی این متد یک آرایه جدید هست. اگه به آرایه جدید ساخته شده احتیاجی نداریم بهتره که از این متد استفاده نشه و بجای اون از حلقه‌های معمولی مثل forEach و for...of استفاده بشه.

تابع پاس داده شده به متد map همیشه باید خروجی (return) داشته باشه. در غیر این صورت خروجی برای عضوی که داره پردازش میشه undefined هست:

let numbers = [1, 2, 3, 4];

let filteredNumbers = numbers.map(function(num, index) {
  if (index < 3) {
     return num;
  };

});

console.log(filteredNumbers); // [1, 2, 3, undefined]

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

['1', '2', '3'].map(Number)  // [1, 2, 3]

خب دوستان امیدوارم از این قسمت استفاده کرده باشین. روزتون خوش ? ‍✌️

Resources:

https://developer.mozilla.org/en-US/.../filter

https://developer.mozilla.org/en-US/.../find

https://developer.mozilla.org/en-US/.../map