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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کلیک کنید

همچنین باید هنگام استفاده از متدpush()‎محتاط بود،‌ زیرا این روش مستقیماً آرایه‌ای را تغییر می‌دهد که روی آن اعمال می‌شود. برخلاف متد concat() که به جای اصلاح آرایه اصلی، آرایه جدیدی را برمی‌گرداند، استفاده ازpush()‎در صورت عدم استفاده بدون دقت می‌تواند منجر به نتایج غیرمنتظره شود. اگر حفظ آرایه اصلی ضروری است، استفاده ازconcat()یا عملگر Spreadبرای ایجاد آرایه ادغام شده جدید گزینه ایمن‌تری خواهد بود. با درک و به کار گیری این ملاحظات، می‌توان به طور مؤثر روش مناسب را برای ادغام آرایه‌ها بر اساس نیازهای خاص انتخاب کرد و خطاهای غیر منتظره را کاهش داد.

سخن پایانی

در این مطلب از مجله فرادرس، ۳ روش مختلف برای جمع دو آرایه در جاوا اسکریپت بررسی شدند. در این مطلب یاد گرفتیم چگونه با استفاده از عملگر Spread در جاوا اسکریپت دو یا چند آرایه را با همدیگر ادغام کنیم. همچنین شیوه ادغام آرایه‌ها در جاوا اسکریپت با متدهای concat()و push()‎آموزش داده شد و برای هرکدام از روش‌های گفته شده چند مثال عملی ارائه شد.

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

کلیک کنید

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