3 روش ادغام آرایه‌ها در جاوا اسکریپت

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

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

1. ادغام به وسیله اپراتور (…)spread

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

یک آرایه خالی ایجاد کنید و درون آن اسامی تمام آرایه‌هایی که قصد ادغام آنها را دارید، با پیشوند اپراتور ... بنویسید؛ جاوا اسکریپت به طور خودکار آرایه‌ها را ادغام می‌کند و درون آرایه جدیدی که ساختید می‌ریزد.

const result = [...array1, ...array2];

برای مثال 

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
const all = [...heroes, ...villains];
console.log(all);  // ['Batman', 'Superman', 'Joker', 'Bane']

توجه کنید که ترتیب نوشتن آرایه‌های مدنظر برای ادغام دارای اهمیت است. آیتم‌های آرایه‌های ادغام شده به همان ترتیبی که نام آرایه‌ها را درون آرایه مجموع می‌نویسیم، درج می‌شوند. برای درک بهتر اجازه دهید در مثال بالا جای دو آرایه را با یکدیگر عوض کنیم:

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
const all = [...villains,  ...heroes];
console.log(all); // ['Joker', 'Bane', 'Batman', 'Superman']

همانطور که دیدید این اپراتور به شما امکان ادغام دو یا چند آرایه را به صورت همزمان می‌دهد.

const mergeResult= [...array1, ...array2, ...array3, ...arrayN];

2. ادغام به وسیله متد ()array.concat

اگر ترجیح دهید ادغام آرایه ها را به روش تابعی انجام دهید، میتوانید از متد ()array.concat استفاده کنید. به دو صورت زیر میتوان از آن استفاده کرد:

روش اول:

const result = array1.concat(array2);

روش دوم:

const result = [].concat(array1, array2);

این متد آرایه‌های شرکت‌کننده را دچار تغییر نمی‌کند، در عوض آرایه‌ای جدید شامل نتیجه ادغام را برمی‌گرداند.

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
const all1 = heroes.concat(villains);
const all2 = [].concat(heroes, villains);
console.log(all1); // ['Batman', 'Superman', 'Joker', 'Bane']
console.log(all2);  // ['Batman', 'Superman', 'Joker', 'Bane']

با این متد هم می‌توانید بیشتر از دو آرایه را ادغام کنید:

const result = [].concat(array1, array2, array3, arrayN);

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

3. ادغام به وسیله متد ()array.push

احتمالا از قبل با متد push آشنا هستید. این متد یک یا چند آیتم دریافت می‌کند و آن را به انتهای آرایه اضافه می‌کند؛ این متد آرایه را تغییر می‌دهد و آرایه جدیدی برنمی‌گرداند.

const heroes = ['Batman'];
heroes.push('Superman');
console.log(heroes); // ['Batman', 'Superman']

اما با کمی تغییر می‌توان از این متد برای ادغام آرایه‌ها استفاده کرد.

با علم به این موضوع که این متد تعدادی آیتم دریافت می‌کند و آنها را به انتهای آرایه اضافه می‌کند، می‌توانید یک آرایه کامل را با کمک اپراتور spread به انتهای آرایه دیگری اضافه کنید. روش کار به این صورت خواهد بود:

array1.push(...array2);

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

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
heroes.push(...villains);
console.log(heroes); // ['Batman', 'Superman', 'Joker', 'Bane']

دانستن این نکته نیز حائز اهمیت است که متدهای آرایه از قبیل push, pop, splice, shift, unshift, reverse, sort همگی از نوع mutable هستند.

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

جمع‌بندی

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

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

اگر شما هم راه‌های دیگری برای ادغام آرایه‌ها می‌شناسید، در بخش نظرات برای ما بنویسید.