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

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

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

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

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

کلیک کنید

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

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

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

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

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

کلیک کنید

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

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

برای مثال، جمع دو آرایه heroes  و villains  را در نظر می‌گیریم:

1const heroes = ['Batman', 'Superman'];
2const villains = ['Joker', 'Bane'];
3
4const all = [...heroes, ...villains];
5
6console.log(all); // ['Batman', 'Superman', 'Joker', 'Bane']

در مثال فوق، آرایه all  با ادغام آرایه heroes و به دنبال آن آرایه villains ایجاد می‌شود. آرایه به دست آمده، ترتیب آرایه‌های اصلی را حفظ می‌کند، به این معنی که آیتم‌های heroes قبل از آیتم‌های villains در آرایه ادغام شده یا همان آرایه نهایی قرار می‌گیرند. برای مثال در نمونه کد بالا اگر این بار آرایه villains قبل از آرایه heroes قرار بگیرد، ترتیب عناصر در آرایه خروجی فرق خواهد کرد. مثال زیر این موضوع را نشان می‌دهد.

1const heroes = ['Batman', 'Superman'];
2const villains = ['Joker', 'Bane'];
3
4const all = [...villains,  ...heroes];
5
6console.log(all); // ['Joker', 'Bane', 'Batman', 'Superman']

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

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

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

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

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

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

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

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

کلیک کنید

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

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

در مثال فوق، ابتدا محتوای array2 ، سپس array3  و در آخر، array1 در آرایه جدید قرار گرفته‌اند.

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

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

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

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

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

در کل متد array.concat()  فهرستی از مقادیر را به عنوان آرگومان به صورت زیر می‌پذیرد:

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

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

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

کلیک کنید

اگر این بار مثال بالا را برای جمع دو آرایه heroes و villains با متد array.concat() در نظر بگیریم، قطعه کد و نتیجه آن صورت زیر خواهد بود.

1const heroes = ['Batman', 'Superman'];
2const villains = ['Joker', 'Bane'];
3
4const all1 = heroes.concat(villains);
5const all2 = [].concat(heroes, villains);
6
7console.log(all1); // ['Batman', 'Superman', 'Joker', 'Bane']
8console.log(all2); // ['Batman', 'Superman', 'Joker', 'Bane']

در مثال فوق heroes.concat(villains)  و [].concat(heroes, villains)‎‎  هرکدام آرایه‌ای جدید بازمی‌گردانند که این آرایه‌های جدید، نتیجه ادغام دو آرایه heroes و villains هستند. متد concat() می‌تواند چندین آرایه را به عنوان آرگومان بپذیرد، بنابراین با استفاده از آن می‌توان ٢ یا چند آرایه را به‌طور هم‌زمان ادغام کرد. سینتکس زیر این نشان دهنده این امر است.

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

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

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

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

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

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

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

در مثال فوق این بار سه آرایه با همدیگر ادغام و آرایه‌ای جدید از ادغام آن‌ها تشکیل شده است. باید به این نکته توجه داشت که در مثال فوق از متد concat() در array2  استفاده شده است، به این معنی که محتویات array2  در ابتدای آرایه ادغام شده قرار دارند. برای آرگومان‌های دیگر نیز به این صورت است که ابتدا array3  ارسال می‌شود، به این معنی که محتویات این آرایه در ترتیب بعدی قرار می‌گیرد و در نهایت محتویات array1  قرار خواهد گرفت و آرایه جدید را تشکیل می‌دهد.

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

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

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

کلیک کنید

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

1const heroes = ['Batman'];
2
3heroes.push('Superman');
4
5console.log(heroes); // ['Batman', 'Superman']

متد push()‎ در جاوا اسکریپت می‌تواند چندین آیتم را به طور هم‌زمان با استفاده از آرگومان‌های جداگانه بپذیرد. این بدان معنا است که می‌توان با اعمال عملگر Spread  روی آرگومان‌ها، کل یک آرایه را در آرایه دیگری ادغام کرد. برای ادغام array2 در array1  با استفاده از متد push()‎ می‌توان به سادگی به صورت زیر عمل کرد.

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

برای مثال اگر دو آرایه heroes و villains در مثال‌های بالا این بار با استفاده از متد push()‎ ادغام شوند، قطعه کد آن به صورت زیر خواهد بود:

1const heroes = ['Batman', 'Superman'];
2const villains = ['Joker', 'Bane'];
3
4heroes.push(...villains);
5
6console.log(heroes); // ['Batman', 'Superman', 'Joker', 'Bane']

در مثال فوق heroes.push (... villains)  همه آیتم های آرایه villains را در انتهای آرایه heroes قرار داده و در این عملیات، آرایه heroes تغییر یافته است.

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

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

1const array1 = [1, 2, 3]
2const array2 = [4, 5, 6]
3
4for(let i = 0; i < array2.length; i++) {
5  array1.push(array2[i])
6}
7
8console.log(array1)
9// [1, 2, 3, 4, 5, 6]

در مثال فوق، از حلقه For  به منظور پیمایش array2 استفاده شده است و در هر حلقه، مقدار موجود در اندیس را به array1 اضافه خواهد کرد. در انتهای حلقه، array1 تغییر خواهد یافت و مقادیر array2 به آن اضافه می‌شود. به جای استفاده از حلقه for  ، می‌توان از عملگر Spread  در ترکیب با متد push()‎ برای جمع دو آرایه در جاوا اسکریپت استفاده کرد. با بسط یک آرایه دیگر در متد push()‎ ، عناصر آن آرایه push داده می‌شوند و به آرایه هدف اضافه خواهند شد. مثال زیر این مفهوم را بیان می‌کند:

1const array1 = [1, 2, 3]
2const array2 = [4, 5, 6]
3
4array1.push(...array2)
5
6console.log(array1)
7// [1, 2, 3, 4, 5, 6]

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

1const array1 = [1, 2, 3]
2const array2 = [4, 5, 6]
3const array3 = [7, 8, 9]
4
5array3.push(...array2, ...array1)
6
7console.log(array3)
8// [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 – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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