آموزش تبدیل یک آرایه به گروهی از آرایه‌ها در JavaScript

گاهی اوقات هنگام کار با داده‌ها در JavaScript لازم می‌شود که یک آرایه بزرگ را به بخش‌های کوچکتر تقسیم کنید. این کار می‌تواند به سازماندهی بهتر داده‌ها، ساده‌تر شدن پردازش‌ها و افزایش کارایی کد شما کمک کند. در این مقاله از لیارا قصد داریم یک روش سریع، ساده و کاربردی را برای تقسیم آرایه‌ها به شما معرفی کنیم تا بتوانید به راحتی آرایه‌های خود را مدیریت و دسته‌بندی کنید.

سرور ابری NodeJS لیارا با پشتیبانی از مقیاس‌پذیری خودکار، امنیت بالا و مدیریت آسان، گزینه‌ای ایده‌آل برای راه‌اندازی سریع برنامه‌های NodeJS است.
✅ پشتیبانی از نسخه‌های مختلف NodeJS ✅ ترافیک نامحدود ✅ مدیریت آسان از طریق پنل کاربر
خرید هاست NodeJS

آنچه در ادامه خواهید خواند:

• نحوه تبدیل آرایه به گروهی از آرایه‌ها در JavaScript
• ساخت فانکشن برای استفاده مجدد
• سوالات متداول
• جمع بندی

آموزش ذخیره داده‌ها در Local Storage با JavaScript
ذخیره داده‌ها در Local Storage با JavaScript

نحوه تبدیل آرایه به گروهی از آرایه‌ها در JavaScript

در ادامه به شما نشان خواهیم داد که چگونه می‌توان کد زیر را به یک تابع تبدیل کرد تا بتوانید آن را برای آرایه‌های مختلف با تعداد دلخواه گروه‌ها استفاده کنید.

فرض کنید آرایه‌ای به نام nums دارید که می‌خواهید آن را به چندین زیرآرایه تقسیم کنید. تابعی که در این قسمت تعریف می‌شود، این امکان را به شما می‌دهد تا تعداد دلخواه اعضای هر زیرآرایه را تعیین کرده و آرایه اصلی را بدون تغییر حفظ کنید.

برای این منظور از کد زیر استفاده کنید.

function chunkArray(nums, chunkSize) {
  const result = [];
  
  for (let i = 0; i < nums.length; i += chunkSize) {
    result.push(nums.slice(i, i + chunkSize));
  }
  
  return result;
}

// Using the function
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const chunkedResult = chunkArray(nums, 3);

console.log(chunkedResult);
// Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

توضیحات:

• تابع chunkArray دو پارامتر ورودی را در ابتدا می‌گیرد آرایه اصلی nums و تعداد اعضای هر زیرآرایه chunkSize.
• در داخل تابع، از یک حلقه برای تقسیم آرایه به چندین زیرآرایه استفاده می‌شود.
• هر بار که حلقه اجرا می‌شود، یک بخش از آرایه اصلی nums.slice(i, i + chunkSize) به نتیجه اضافه می‌شود.
• در نهایت، تابع result را که شامل آرایه‌های تقسیم شده است، باز می‌گرداند.

نکته قابل توجه:

• این روش آرایه اصلی را تغییر نمی‌دهد و یک آرایه جدید result با آرایه‌های تقسیم شده ایجاد می‌شود.
• شما می‌توانید از این تابع برای هر آرایه‌ای با اندازه‌های مختلف استفاده کنید.

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

ترفندهایی برای نوشتن کدهای کوتاه در JavaScript
نوشتن کدهای کوتاه در JavaScript

ساخت فانکشن برای استفاده مجدد

برای استفاده‌ی مجدد و منعطف‌تر از راه‌حلی که قبلاً بررسی کردیم، بهتر است کد را در قالب یک تابع (function) آن را تعریف کنیم. به این ترتیب می‌توانیم آرایه‌ مورد نظر و تعداد گروه‌ها را به‌عنوان ورودی به تابع بدهیم و خروجی را به صورت آرایه‌ای از زیرآرایه‌ها دریافت کنیم.

تابع پیشنهادی:

function createGroups(arr, numGroups) {
  const perGroup = Math.ceil(arr.length / numGroups);
  return new Array(numGroups)
    .fill('')
    .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup));
}

نحوه‌ی استفاده از تابع:

console.log(createGroups(['cat', 'dog', 'pig', 'frog'], 2));
// Output: [["cat", "dog"], ["pig", "frog"]]

console.log(createGroups([1, 2, 3, 4, 5], 3));
// Output: [[1, 2], [3, 4], [5]]

نکته این روش:

• arr آرایه‌ی ورودی است.
• numGroups تعداد گروه‌هایی است که می‌خواهیم آرایه به آن‌ها تقسیم شود.
• هر گروه به‌صورت مساوی یا تقریباً مساوی از عناصر آرایه‌ی اصلی تشکیل می‌شود.
• تابع، بدون ایجاد تغییر در آرایه‌ی اولیه، خروجی جدیدی تولید می‌کند.

این راه‌حل برای سناریوهایی که نیاز به تقسیم آرایه به بخش‌های مساوی دارید (مانند تقسیم وظایف بین چند نفر، نمایش آیتم‌ها در ستون‌های مختلف) بسیار کاربردی است.

همین الان، بدون کمترین پیچیدگی، سرور مجازی خودتون رو در کمتر از ۳۰ ثانیه، راه‌اندازی کنید.
✅ عملکرد پایدار ✅ ترافیک نامحدود ✅ هزینه به‌صرفه
خرید سرور مجازی ابری

سوالات متداول

در ادامه به سوالاتی که امکان دارد در این زمینه برای شما بدون پاسخ بماند، جواب‌های کوتاه اما مفیدی داده‌ایم که با استفاده از آن می‌توانید به سوال خود پاسخ صحیحی را بدهید.

چرا باید آرایه‌ها را به چند گروه تقسیم کنیم؟

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

تفاوت بین تقسیم آرایه با slice و splice چیست؟

متد slice نسخه‌ای از آرایه را بدون تغییر آرایه اصلی برمی‌گرداند، در حالی‌ که splice مستقیماً آرایه‌ی اصلی را تغییر می‌دهد.

چگونه مطمئن شویم که تقسیم آرایه باعث تغییر در آرایه‌ی اصلی نمی‌شود؟

با استفاده از متدهایی مانند slice یا map که داده‌ها را کپی می‌کنند و به صورت غیرمخرب عمل می‌کنند، می‌توان از تغییر در آرایه‌ی اصلی جلوگیری کرد.

آیا می‌توان تابع تقسیم آرایه را برای آرایه‌هایی با هر نوع داده استفاده کرد؟

بله، این تابع به‌صورت عمومی نوشته شده و می‌تواند روی هر آرایه‌ای با هر نوع داده کار کند.

اگر تعداد آیتم‌ها برابر با تعداد گروه‌ها نباشد، چه اتفاقی می‌افتد؟

در این حالت، برخی از گروه‌ها ممکن است یک آیتم بیشتر یا کمتر داشته باشند. این تابع از Math.ceil استفاده می‌کند تا توزیع آیتم‌ها تا حد ممکن یکنواخت باشد.

چگونه می‌توانم خروجی گروه‌بندی‌شده را در رابط کاربری (UI) نمایش دهم؟

می‌توانید خروجی این تابع را با استفاده از حلقه‌ها یا متد map در React ،Vue یا سایر فریم‌ورک‌ها به‌صورت لیست، جدول نمایش دهید.

آیا می‌توان تابع را به شکلی بازنویسی کرد که اندازه‌ی هر گروه ثابت باشد، نه تعداد گروه‌ها؟

بله، در این صورت کافی است به‌جای تعداد گروه‌ها، اندازه‌ی هر گروه را به عنوان ورودی دریافت کرده و تعداد گروه‌ها را با استفاده از Math.ceil(arr.length / size) محاسبه کنید.

۱۰ ترفند جاوا اسکریپت که فقط توسعه‌دهندگان حرفه‌ای از آن‌ها خبر دارند!
جاوا اسکریپت

جمع بندی

در این مقاله با دو روش کاربردی برای تقسیم آرایه‌ها در JavaScript آشنا شده‌ایم. یکی بر مبنای تعداد عناصر هر گروه و دیگری بر اساس تعداد گروه‌های دلخواه. این روش‌ها بدون ایجاد تغییر در آرایه‌ی اصلی، داده‌ها را به شکلی منظم و قابل استفاده در قالب زیرآرایه‌ها سازماندهی می‌کنند. با استفاده از این رویکردها می‌تواند به بهبود ساختار کد، افزایش خوانایی و سهولت در مدیریت داده‌ها کمک کند. توصیه ما به شما این است که از این توابع به‌عنوان ابزارهای کمکی در پروژه‌های خود استفاده کنید.

منبع: https://typeofnan.dev/how-to-split-an-array-into-a-group-of-arrays-in-javascript