جمع دو آرایه در جاوا اسکریپت – از صفر تا صد + مثال و کد

ادغام آرایه‌ها در جاوا اسکریپت را می‌توان با استفاده از رویکردهای مختلفی انجام داد. ادغام یا جمع کردن آرایه‌ها در جاوا اسکریپت در برخی از سناریوها لازم است و می‌توان با روش‌های مختلفی به آن دست یافت. در این مطلب از «مجله تم آف» نحوه جمع دو آرایه در جاوا اسکریپت با سه روش مختلف به همراه مثال‌های کاربردی ارائه شده است.

جمع دو آرایه در جاوا اسکریپت چگونه انجام می شود؟

آرایه نوعی ساختار داده بنیادی در زبان برنامه نویسی جاوا اسکریپت و انواع زبان‌های برنامه نویسی دیگر است که مجموعه منظمی از عناصر را نشان می‌دهد که هر یک از آن‌ها با استفاده از «اندیس» (Index) قابل دسترسی هستند. جمع دو یا چند آرایه در جاوا اسکریپت را می‌توان با ۳ روشِ استفاده از عملگر «Spread»، متد «Concat» و متد «Push» انجام داد. هر ۳ روش در این مطلب آموزش داده شده است.

فیلم آموزش جاوا اسکریپت JavaScript در تم آف

کلیک کنید

یکی از عملیات معمولی که روی آرایه‌ها انجام می‌شود، ادغام است که شامل ترکیب ۲ یا چند آرایه برای ایجاد آرایه‌ای بزرگ‌تر، شامل تمام عناصر آرایه‌های ادغام شده خواهد بود. به عنوان مثال، اگر دو آرایه، [1، 2، 3]

 و [4، 5، 6]

 وجود داشته باشند، ادغام این دو آرایه منجر به آرایه جدید [1، 2، 3، 4، 5، 6]

 می‌شود.

در ادامه سه روش مفید و ساده برای جمع دو آرایه در جاوا اسکریپت به همراه مثال ارائه شده است.

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

برای ادغام آرایه‌ها در جاوا اسکریپت، روشی مؤثر، استفاده از عملگر «Spread» است. با گنجاندن عملگر Spread

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف

کلیک کنید

در ادامه نحوه رسیدن به این هدف ارائه شده است.

// merge array1 and array2
const mergeResult = [...array1, ...array2];

برای مثال، جمع دو آرایه heroes

 و villains

 را در نظر می‌گیریم:

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

const all = [...heroes, ...villains];

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

در مثال فوق، آرایه all

 با ادغام آرایه heroes

و به دنبال آن آرایه villains

ایجاد می‌شود. آرایه به دست آمده، ترتیب آرایه‌های اصلی را حفظ می‌کند، به این معنی که آیتم‌های heroes

قبل از آیتم‌های villains

در آرایه ادغام شده یا همان آرایه نهایی قرار می‌گیرند. برای مثال در نمونه کد بالا اگر این بار آرایه villains

قبل از آرایه heroes

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

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

const all = [...villains,  ...heroes];

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

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

رویکرد عملگر Spread

در جمع کردن آرایه‌ها در جاوا اسکریپت به کاربر امکان می‌دهد که ٢ یا بیشتر از دو آرایه را با همدیگر ادغام کند. «سینتکس» (Syntax) زیر این مفهموم را بیان می‌کند.

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

مثال استفاده از Spread برای جمع آرایه ها

در ادامه ۲ مثال دیگر از عملگر Spread

 برای جمع کردن دو یا چند آرایه در جاوا اسکریپت به منظور درک بهتر آورده شده است. قطعه کد مثال اول به صورت است.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

const merged = [...array1, ...array2]
// [1, 2, 3, 4, 5, 6]

در مثال فوق برای متغیر ادغام شده، آرایه‌ای جدید ایجاد خواهد شد و سپس مقادیر array1

 و سپس array2

 را در آن پخش می‌شوند و در نتیجه آرایه جدید با مقادیر ادغام شده از دو آرایه قبلی ایجاد خواهد شد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف

کلیک کنید

مثال زیر هم نحوه ادغام چندین آرایه در جاوا اسکریپت با عملگر Spread

را نشان می‌دهد.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]

const merged = [...array2, ...array3, ...array1]
// [4, 5, 6, 7, 8, 9, 1, 2, 3]

در مثال فوق، ابتدا محتوای array2

، سپس array3

 و در آخر، array1

در آرایه جدید قرار گرفته‌اند.

ادغام ۲ آرایه در جاوا اسکریپت با متد Concat

در جاوا اسکریپت، از متد concat()

 برای ادغام مقادیر جدید با یک آرایه استفاده می‌شود و در نتیجه آرایه‌ای جدید ایجاد خواهد شد. متد concat()

چندین مقدار را به عنوان آرگومان می‌پذیرد، از جمله اعداد، «رشته‌ها» (استرینگ | Strings)، مقادیر بولی، شی یا حتی خود آرایه‌ها. متد نام برده این مقادیر را با آرایه اصلی ترکیب می‌کند و آرایه‌ای جدید حاوی تمام عناصر ادغام شده را بازمی‌گرداند. سینتکس استفاده از متد concat()

به شرح زیر است.

// merge array1 and array2
const mergeResult = array1.concat(array2);

همچنین به شیوه زیر نیز این متد می‌تواند مورد استفاده قرار بگیرد.

// merge array1 and array2
const mergeResult = [].concat(array1, array2);

در کل متد array.concat()

 فهرستی از مقادیر را به عنوان آرگومان به صورت زیر می‌پذیرد:

array.concat(value1, value2, ..., valueN)

متد array.concat()

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

فیلم آموزش جاوا اسکریپت JavaScript در تم آف

کلیک کنید

اگر این بار مثال بالا را برای جمع دو آرایه heroes

و villains

با متد array.concat()

در نظر بگیریم، قطعه کد و نتیجه آن صورت زیر خواهد بود.

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']

در مثال فوق heroes.concat(villains)

 و [].concat(heroes, villains)‎‎

 هرکدام آرایه‌ای جدید بازمی‌گردانند که این آرایه‌های جدید، نتیجه ادغام دو آرایه heroes

و villains

هستند. متد concat()

می‌تواند چندین آرایه را به عنوان آرگومان بپذیرد، بنابراین با استفاده از آن می‌توان ٢ یا چند آرایه را به‌طور هم‌زمان ادغام کرد. سینتکس زیر این نشان دهنده این امر است.

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

در ادامه ۲ مثال دیگر از نحوه جمع کردن آرایه در جاوا اسکریپت با متد concat()

ارائه می‌شود.

مثال جمع ۲ آرایه در JS با متد Contact

در زیر مثالی دیگر از جمع دو آرایه در Javascript با متد concat()

آورده شده است.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

const merged = array1.concat(array2)
// [1, 2, 3, 4, 5, 6]

همان‌طور که در مثال بالا قابل مشاهده است، محتویات array1

 با محتویات array2

 ادغام و آرایه‌ای جدید با محتویات متفاوت تشکیل شده است. حال همین مثال را می‌توان برای ادغام چندین آرایه در جاوا اسکریپت به صورت زیر انجام داد:

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]

const merged = array2.concat(array3, array1)
// [4, 5, 6, 7, 8, 9, 1, 2, 3]

در مثال فوق این بار سه آرایه با همدیگر ادغام و آرایه‌ای جدید از ادغام آن‌ها تشکیل شده است. باید به این نکته توجه داشت که در مثال فوق از متد concat()

در array2

 استفاده شده است، به این معنی که محتویات array2

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

 ارسال می‌شود، به این معنی که محتویات این آرایه در ترتیب بعدی قرار می‌گیرد و در نهایت محتویات array1

 قرار خواهد گرفت و آرایه جدید را تشکیل می‌دهد.

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

اگر کاربر بخواهد آرایه‌ها را در جاوا اسکریپت بدون ایجاد آرایه جدیدی ادغام کند، می‌تواند از متد push()‎

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف

کلیک کنید

سینتکس استفاده از متد push()‎

برای جمع دو آرایه در جاوا اسکریپت به صورت زیر است.

const heroes = ['Batman'];

heroes.push('Superman');

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

متد push()‎

در جاوا اسکریپت می‌تواند چندین آیتم را به طور هم‌زمان با استفاده از آرگومان‌های جداگانه بپذیرد. این بدان معنا است که می‌توان با اعمال عملگر Spread

 روی آرگومان‌ها، کل یک آرایه را در آرایه دیگری ادغام کرد. برای ادغام array2

در array1

 با استفاده از متد push()‎

می‌توان به سادگی به صورت زیر عمل کرد.

// merge array2 into array1
array1.push(...array2);

برای مثال اگر دو آرایه heroes

و villains

در مثال‌های بالا این بار با استفاده از متد push()‎

ادغام شوند، قطعه کد آن به صورت زیر خواهد بود:

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

heroes.push(...villains);

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

در مثال فوق heroes.push (… villains)

 همه آیتم های آرایه villains

را در انتهای آرایه heroes

قرار داده و در این عملیات، آرایه heroes

تغییر یافته است.

مثال ادغام آرایه ها با متد push

در این بخش چند مثال از جمع دو آرایه در جاوا اسکریپت با متد push()‎

ارائه خواهد شد. مثال زیر نحوه استفاده از متد push()‎

برای جمع دو آرایه عددی را نشان می‌دهد.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

for(let i = 0; i 

در مثال فوق، از حلقه For

 به منظور پیمایش array2

استفاده شده است و در هر حلقه، مقدار موجود در اندیس را به array1

اضافه خواهد کرد. در انتهای حلقه، array1

تغییر خواهد یافت و مقادیر array2

به آن اضافه می‌شود. به جای استفاده از حلقه for

 ، می‌توان از عملگر Spread

 در ترکیب با متد push()‎

برای جمع دو آرایه در جاوا اسکریپت استفاده کرد. با بسط یک آرایه دیگر در متد push()‎

، عناصر آن آرایه push

داده می‌شوند و به آرایه هدف اضافه خواهند شد. مثال زیر این مفهوم را بیان می‌کند:

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

array1.push(...array2)

console.log(array1)
// [1, 2, 3, 4, 5, 6]

از متد push()‎

همچنین می‌توان برای ادغام چندین آرایه در جاوا اسکریپت نیز استفاده کرد که مثال زیر این موضوع را بیان می‌کند.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]

array3.push(...array2, ...array1)

console.log(array3)
// [7, 8, 9, 4, 5, 6, 1, 2, 3]

در کد بالا، عملگر Spread

 برای گسترش و بسط عناصر array2

و array1

به عنوان آرگومان‌های جداگانه در متد push()‎

استفاده خواهد کرد که روی array3

 فراخوانی می‌شود. در نتیجه، ابتدا عناصر array2

و به دنبال آن عناصر array1

پوش داده می‌شوند و در نتیجه آرایه‌ای ادغام شده در array3

ذخیره می‌شود.

بهترین روش برای ادغام دو آرایه در جاوا اسکریپت چیست؟

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت در تم آف

کلیک کنید

همچنین باید هنگام استفاده از متد push()‎

محتاط بود،‌ زیرا این روش مستقیماً آرایه‌ای را تغییر می‌دهد که روی آن اعمال می‌شود. برخلاف متد concat()

 که به جای اصلاح آرایه اصلی، آرایه جدیدی را برمی‌گرداند، استفاده از push()‎

در صورت عدم استفاده بدون دقت می‌تواند منجر به نتایج غیرمنتظره شود. اگر حفظ آرایه اصلی ضروری است، استفاده از concat()

یا عملگر Spread

برای ایجاد آرایه ادغام شده جدید گزینه ایمن‌تری خواهد بود. با درک و به کار گیری این ملاحظات، می‌توان به طور مؤثر روش مناسب را برای ادغام آرایه‌ها بر اساس نیازهای خاص انتخاب کرد و خطاهای غیر منتظره را کاهش داد.

سخن پایانی

در این مطلب از مجله تم آف، ۳ روش مختلف برای جمع دو آرایه در جاوا اسکریپت بررسی شدند. در این مطلب یاد گرفتیم چگونه با استفاده از عملگر Spread

 در جاوا اسکریپت دو یا چند آرایه را با همدیگر ادغام کنیم. همچنین شیوه ادغام آرایه‌ها در جاوا اسکریپت با متدهای concat()

و push()‎

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

فیلم مجموعه آموزش جاوا اسکریپت (JavaScript) در تم آف

کلیک کنید

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