اضافه کردن مقادیر به آرایه در زبان JavaScript

روش‌های مختلف اضاف‌کردن مقادیر به آرایه در زبان javascript

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

۱) push

احتمالا متداول‌ترین متد برای کار با آرایه‌ها در زبان JavaScript، متد push() است. شما با استفاده از این متد می‌توانید یک مقدار را به انتهای آرایه اضافه کنید. فرض کنید شما آرایه‌ای از مقادیر رشته‌ای مختلف دارید که هرکدام از مقادیر، کارهایی هستند که می‌بایست به ترتیب انجام دهید. منطقی است که ابتدا کارهای قبلی خود را به اتمام برسانید و مقادیر جدید را به انتهای آرایه اضافه کنید. بیایید این مثال را به صورت کد مشاهده کنیم:

const arr = ['First task', 'Second task', 'Third task'];

arr.push('Fourth task');

console.log(arr);
// OutPut: ['First task', 'Second task', 'Third task', 'Fourth task']

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

const arr = ['First task', 'Second task', 'Third task'];

arr.push('Fourth task', 'Fifth task');

console.log(arr);
// OutPut: ['First task', 'Second task', 'Third task', 'Fourth task', 'Fifth task']

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

const arr = ['First task', 'Second task', 'Third task'];

const arrLength = arr.push('Fourth task', 'Fifth task');

console.log(arrLength);
// OutPut: 5

console.log(arr);
// OutPut: ['First task', 'Second task', 'Third task', 'Fourth task', 'Fifth task']

۲) unshift

ممکن است در بعضی مواقع با سناریو بالا روبرو نباشید و احساس کنید که یک کار ضروری‌تر از سایر موارد است. اینجاست که متد unshift() به کمک شما می‌آید تا بتوانید مواردی را به ابتدای آرایه خود اضافه کنید.

const arr = ['First task', 'Second task', 'Third task'];

const arrLength = arr.unshift('Urgent task 1', 'Urgent task 2');

console.log(arrLength);
// OutPut: 5 

console.log(arr);
// OutPut: ['Urgent task 1', 'Urgent task 2', 'First task', 'Second task', 'Third task']

این متد نیز مانند متد قبل، طول آرایه را برمی‌گرداند و به‌صورت همزمان می‌تواند چندین مقدار را به ابتدای آرایه اضافه کند.

۳) concat

با استفاده از متد concat() می‌توانید دو یا چند آرایه را با همدیگر ادغام کنید. قبل‌تر گفتیم که متد‌های shift() و unshift()، طول نهایی آرایه را برمی‌گردانند. در متد concat() شاهد اتفاقی دیگر هستیم زیرا این متد، یک آرایه را برمی‌گرداند.

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

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3);
// OutPut: ["?", "?", "?", "?"] 

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

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4);
// OutPut: ["?", "?", "?", "?", "?", "?"]

شبیه‌سازی با استفاده از متد concat

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

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1)
// OutPut: ["?", "?", "?", "?", "?", "?"]
console.log(arr2)
// OutPut: ["?", "?", "?", "?", "?", "?", "?"]

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

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

//change only arr2
arr2[1].food = "?";
arr2.push({food:"?"})

console.log(arr1)
// OutPut: [ { food: '?' }, { food: '?' }, { food: '?' } ]

console.log(arr2)
// OutPut: [ { food: '?' }, { food: '?' }, { food: '?' }, 
{ food: '?' } ]

به این صورت حتی اگر مستقیما تغییری در آرایه اول به‌وجود نیاوریم، درنهایت آرایه اول ما تحت تاثیر تغییرهایی که در آرایه شبیه‌سازی شده خود ایجاد کرده‌ایم، قرار خواهد گرفت. اینجا یک چالش به‌وجود می‌آید که برای حل آن می‌بایست در رابطه با deep clone در زبان JavaScript تحقیق کنید.

چکیده

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

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

منبع: https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

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

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

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

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi