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

در این مقاله قصد داریم روشی برای گروه‌بندی آرایه‌ها در جاوا اسکریپت یاد بگیریم. برای این کار از متدهایی کمک می‌گیریم که در ادامه با آنها آشنا می‌شویم.

👈 در صورتی که با آرایه ها در جاوا اسکریپت آشنایی ندارید؛ به بخش آموزشی آرایه در جاوا اسکریپت مراجعه کنید

1- متد ()Array.reduce

فرض کنید لیستی از محصولات داریم که در آن، هر محصول یک شئ دارای دو ویژگی name و category می‌باشد.

const products = [

  { name: 'apples', category: 'fruits' },

  { name: 'oranges', category: 'fruits' },

  { name: 'potatoes', category: 'vegetables' }

];

در این مثال products آرایه‌ای شامل چندین شئ product است.

حالا قصد داریم تغییری در لیست محصولات ایجاد کنیم. می‌خواهیم محصولات را بر اساس دسته‌بندی آنها گروه‌بندی کنیم تا به نتیجه به صورت زیر باشد:

const groupByCategory= {

  'fruits': [

    { name: 'apples', category: 'fruits' }, 

    { name: 'oranges', category: 'fruits' },

  ],

  'vegetables': [

    { name: 'potatoes', category: 'vegetables' }

  ]

};

اما چطور می‌توانیم از آرایه products ، آرایه‌ای مانند بالا بسازیم؟

راه معمول، استفاده از متد ()array.reduce به همراه تابع callback هست.

const groupByCategory= products.reduce((group, product) => {

  const { category } = product;

  group[category] = group[category] ?? [];

  group[category].push(product);

  return group;

}, {});



console.log(groupByCategory);



// {

//   'fruits': [

//     { name: 'apples', category: 'fruits' }, 

//     { name: 'oranges', category: 'fruits' },

//   ],

//   'vegetables': [

//     { name: 'potatoes', category: 'vegetables' }

//   ]

// }

در این مثال،

products.reduce((acc, product) => { ... })

آرایه محصولات را به یک object از محصولات که بر اساس دسته‌بندی، گروه‌بندی شده‌اند تبدیل می‌کند.

در حقیقت این متدی مفید و قدرتمند است اما در بعضی مواقع خوانایی و فهم آن دشوار خواهد بود. به این دلیل که گروه‌بندی دیتاها امری رایج است، برای راحتی بیشتر از دو متد ()array.groupBy و ()array.groupByToMap کمک می‌گیریم.

2- متد ()Array.groupBy

حالا با استفاده از این متد کاری که بالاتر انجام دادیم را تکرار می‌کنیم:

const groupByCategory= products.groupBy(product => {

  return product.category;

});



console.log(groupByCategory); 



// {

//   'fruits': [

//     { name: 'apples', category: 'fruits' }, 

//     { name: 'oranges', category: 'fruits' },

//   ],

//   'vegetables': [

//     { name: 'potatoes', category: 'vegetables' }

//   ]

// }

در مثال بالا،

products.groupBy(product => {...})

یک object که در آن هر property کلیدی برابر با نام دسته‌بندی و مقداری به صورت یک آرایه شامل محصولات دارای آن دسته‌بندی دارد را برمی‌گرداند.

استفاده از این متد نیازمند خطوط کمتری از کدنویسی است و خوانایی بیشتری دارد. array.groupBy(callback) یک تابع callback دریافت می‌کند که با 3 ورودی فراخوانی می‌شود؛ آیتم کنونی آرایه، اندیس و خود آرایه. 

این تابع callback باید یک رشته برگرداند. اسم گروهی که قصد دارید آیتم را به آن اضافه کنید:

const groupedObject= array.groupBy((item, index, array) => {

  // ...

  return groupNameAsString;

});

3- متد ()Array.groupByToMap

گاهی اوقات ممکن است قصد داشته باشید از یک Map به جای یک object ساده استفاده کنید. مزیت استفاده از map این است که هر نوع دیتایی به عنوان کلید قبول می‌کند اما شئ ساده اینگونه عمل نمی‌کند.

اگر قصد داشتید دیتا را در یک map گروه‌بندی کنید، می‌توانید از متد ()array.groupByToMap استفاده کنید.

array.groupByToMap(callback) دقیقا مشابه array.groupBy(callback) کار می‌کند، با این تفاوت که آیتم‌ها را به جای object ساده در یک map گروه‌بندی می‌کند.

برای درک این موضوع به تکه کد زیر توجه کنید.

const groupByCategory= products.groupByToMap(product => {

  return product.category;

});



console.log(groupByCategory); 



// Map([

//   ['fruits', [

//     { name: 'apples', category: 'fruits' }, 

//     { name: 'oranges', category: 'fruits' },

//   ]],

//   ['vegetables', [

//     { name: 'potatoes', category: 'vegetables' }

//   ]

// ])

جمع بندی

اگر قصد داشته باشید آیتم‌های آرایه‌ای را گروه‌بندی کنید می‌توانید برای راحتی این کار از متدهای ()array.groupBy و ()array.groupByToMap استفاده کنید. هر دو متد، یک callback دریافت می‌کنند که باید کلیدی را برگرداند؛ این کلید در واقع نام گروهی است که آیتم فعلی باید در آن درج شود. ()array.groupBy آیتم ها را در یک object ساده گروه بندی می‌کند، اما ()array.groupByToMap آنها را در یک map گروه بندی می‌کند.

اگر قصد داشتید از متدها به درستی استفاده کنید، می‌توانید polyfill را مطالعه کنید.

💎 از دیگر عملیات کاربردی که ممکن است بخواهید درباره آرایه‌ها انجام دهید، ادغام (merge) آنهاست. منظور از ادغام آرایه‌ها این است که از ترکیب 2 یا چند آرایه، آرایه‌ای بزرگتر حاصل شود که شامل تمام آیتم‌های آرایه‌های ترکیب شده باشد. برای این کار نیز سه روش برتر وجود دارد که برای آشنایی با آنها میتوانید مقاله‌ی 3 روش ادغام آرایه‌ها در جاوا اسکریپت را مطالعه کنید.

💎 برای آشنایی با ترفندهای بیشتر برای کار با آرایه ها، به مقاله "7 تابع مهم کار با آرایه ها در جاوا اسکریپت" مراجعه کنید.