تعریف آرایه (Array):

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

مثلا فرض کنید می‌خواهید در یک برنامه نام دوستانتان را در یک متغیر داشته باشید.

در حالت عادی باید تک‌تک نام‌ها را در یک متغیر جداگانه ذخیره کنید:

var name1 = “ali”

var name2  = “reza”

var name3 = “mohammad”

حالا اگر به‌جای این‌ها بخواهید ۱۰ اسم دیگر اضافه کنید و خیلی فوری به هر یک دسترسی داشته باشید یا به‌طور کلی روی همه آن‌ها با یک خط کد تغییر ایجاد کنیم، باید روی تک‌تک آن‌ها تغییر ایجاد کنیم. ولی این کار زمان‌بر و غیر استاندارد است. پس راه چاره ما ساخت آرایه است!

روش ساخت آرایه:

• یک متغیر با نام دلخواه تعریف کنید.
• دو [] باز کنید.
• آیتم‌های مورد نظر خود را بین دو براکت [] بنویسید.
• بین هر یک از آیتم‌ها علامت , قرار دهید.
• آیتم‌های شما می‌توانند هر چیزی مثل عدد، متن و … باشند.

var array-name = [item1, item2, ...];

مثلا در همین مثال بالا می‌توانیم یک آرایه با نام دوستان ایجاد و تمامی متغیرها را در آن ذخیره کنیم

var Friends = [“ali”, “reza”, = “mohammad”]؛

حالا اگر ما در جریان کارمان بخواهیم علی را صدا بزنیم، چه باید کنیم؟ هر یک از آیتم‌های یک آرایه دارای شماره منحصربه‌فردی است که از طریق آن می‌توانیم به آیتم دسترسی داشته باشیم. شماره‌های آیتم‌های یک آرایه از صفر شروع می‌شود و تا n-1  ادامه دارد (n تعداد آیتم‌های آرایه است). دقت کنید که شماره آرایه‌ها از صفر شروع می‌شود. پس اولین آیتم آرایه شماره‌ی صفر را دارد نه یک!

مثلا برای صدا زدن علی در آرایه بالا، ابتدا نام آرایه را می‌نویسیم و در کروشه باز و بسته شماره آن را می‌گذاریم! در این مثال علی می‌شود:

var bestFriend = Friends[0];

طول آرایه:

هر آرایه یک متد طول دارد که به ما می‌گوید این آرایه چه تعداد آیتم در خود ذخیره کرده است! برای دسترسی به طول هر آرایه دستور .length را به کار می‌بریم. برای مثال:

var freinds = ["mohammad", "ali", "mohsen", "sina"];

fruits.length;                       

طول آرایه freinds برابر ۴ است؛ یعنی چهار آیتم دارد. 

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

if( arrayName.length != 0 ) {

// یعنی اکر آرایه ما خالی نبود و مقداری در آن ذخیره شده بود

}

متدهای Array:

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

قاعده کلی استفاده از متدها در آرایه:

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

arrayName.methodName()

متد ()toString

toString همانطور که از نامش پیدا است، آرایه شما را به یک جمله استرینگ تبدیل و آیتم‌های آن را به کمک , از هم جدا می‌کند! با هم مثال زیر را برای درک بهتر مرور می‌کنیم:

var freinds = ["ali", "sina", "behnam", "mohammad"];

document.getElementById("array-string").innerHTML = freinds.toString();

در این مثال یک آرایه داریم. در ادامه گفته‌ایم که این آرایه را به استرینگ تبدیل کن. 

در نهایت برای اینکه این خروجی را در جایی نشان دهیم، یک المان اچ‌تی‌ام‌ال با آی‌دی array-string را برای نمایش خروجی انتخاب کرده‌ایم. به همین سادگی!

متد ()join

متد جوین دقیقا همان کار متد toString() را انجام می‌دهد؛ با این تفاوت که شما می‌توانید آیتم‌های آرایه را با حرف دلخواه از هم جدا کنید. در واقع در متد toString نتیجه نهایی توسط , از هم جدا شده است ولی در متد join این علامت را ما تعیین می‌کنیم. به مثال زیر دقت کنید تا منظورمان را بهتر متوجه شوید:

var freinds = ["ali", "sina", "behnam", "mohammad"];

document.getElementById("join-method").innerHTML = fruits.join(" * “);

نتیجه نهایی در مثال بالا به‌صورت زیر خواهد بود.

ali * sina *  behnam *  mohammad

متد ()pop

این متد آخرین آیتم از آرایه ما را برمی‌دارد. در واقع وقتی می‌خواهید آخرین آیتم آرایه را از آن بردارید، کافی است نام آرایه را بنویسید، یک نقطه بگذارید و متد پاپ را در ادامه آن بنویسید!

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();              

در این مثال آخرین آیتم آرایه یعنی Mango از آرایه fruits حذف خواهد شد.

این آیتم برداشته‌شده کجا می‌‌رود؟‌آیا این آيتم به‌کلی حذف می‌شود؟ پاسخ منفی است. اگر این متد را با استفاده از یک متغیر بنویسید، خواهید دید که نه‌تنها به‌طور کلی حذف نمی‌شود، بلکه آخرین آیتم آرایه خودش در قالب یک متغیر ذخیره و به شما نمایش داده می‌شود. مورد زیر را امتحان کنید:

var freinds = ["ali", "sina", "behnam", "mohammad"];

var myLastFreind = fruits.pop();     

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

متد ()Push 

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

مثال زیر را مشاهده کنید:

var freinds = ["ali", "sina", "behnam", "mohammad"];

fruits.push("gholam");       //   یک آیتم با نامgholam به انتهای آرایه اضافه می‌شود

اگر از آرایه freinds مجددا خروجی بگیریم، خواهیم دید که به‌جای ۴ آیتم ۵ آیتم دارد و به‌صورت زیر درآمده است:

var freinds = ["ali", "sina", "behnam", "mohammad", "gholam"  ];

تغییر یک آیتم در آرایه:

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

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

var friends = ["ali", "sina", "behnam", "mohammad"];

friends[0] = "mohsen";        

در مثال بالا در واقع ما به‌جای آیتم ali در آرایه، یک مقدار جدید به نام mohsen را جایگزین کرده‌ایم.

حالا اگر مقدار friendsا[0] را خروجی بگیریم، به‌جای مقدار اولیه، با مقدار جدید آن یعنی mohsen روبه‌رو خواهیم شد.

متد ()splice

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

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

حذف آیتم از آرایه با کمک splice

در splice ما باید چند پارامتر مهم وارد کنیم. این پارامترها به شرح زیر هستند:

کدام آیتم‌ها را باید حذف کنم؟‌

کدام‌ آیتم‌ها را اضافه کنم؟

این کارها را از کدام خانه آرایه (شماره آیتم)‌ شروع کنم؟

تا چند آیتم آن‌طرف‌تر این کار باید ادامه پیدا کند؟

برای درک بهتر صحبت‌هایمان، ابتدا مثال زیر را با دقت نگاه کنید:

var friends = ["ali", "sina", "behnam", "mohammad"];

friends.splice(2, 1);

این آرایه چهار آیتم دارد. ما می‌خواهیم فقط و فقط آیتم behnam را از آرایه حذف کنیم.

برای این کار ابتدا باید بدانیم که در متد Splice باید چند پارامتر اصلی داشته باشیم! هر کدام از این‌ پارامترها درون پرانتز Splice نوشته می‌شوند و عملیات اسپلایس یا جداسازی از آرایه را انجام می‌دهند.

پارامتر اول: پارامتر اول Splice (‌عدد 2 در مثال بالا) می‌گوید از از شماره چندم آرایه (که از صفر شروع می‌شود) باید شروع به حذف کردن آیتم‌ها کند. ما قصد داریم آیتم behnam را از این آرایه حذف کنیم. بنابراین باید بدانیم که شمارش آیتم‌های یک آرایه از صفر شروع می‌شود نه از یک! بنابراین آیتم behnam دومین آیتم از این آرایه محسوب می‌شود نه سومین آیتم...(در واقع ali آیتم شماره صفر محسوب می‌شود نه آیتم شماره اول).

پارامتر دوم: پارامتر دوم (همان عدد 1 در مثال بالا)‌ می‌گوید حالا که می‌دانیم از شماره چندم آرایه قرار است شروع به حذف کنیم، چند مورد از آیتم‌هایی را که بعد از این شماره قرار گرفته‌اند حذف کنیم! در اینجا ما تنها می‌خواهیم یک مورد را حذف کنیم. پس عدد ۱ را قرار داده‌ایم تا تنها شماره دوم این آرایه حذف شود.

در مثال زیر می‌خواهیم آیتم اول (ali) از آرایه زیر را حذف کنیم! برای این کار باید به اندازه یک آیتم، از آیتم شماره صفر شروع به حذف کنیم: 

var friends = ["ali", "sina", "behnam", "mohammad"];

friends.splice(0, 1);        // حذف کردن آیتم ali از آرایه friends 

در این حالت آرایه ما به‌صورت زیر خواهد بود:

"sina", "behnam", "mohammad"

نکته مهم: اگر قصد حذف آیتمی از آرایه نداشته باشیم آن وقت چه کنیم؟ در این صورت عدد دوم را 0 می‌گذاریم! تنها وقتی که قصد حذف آیتمی از آرایه داریم باید عدد بدهیم! 

اگر در متد splice جای عدد دوم را خالی بگذاریم، تمامی آيتم‌هایی که بعد از عدد اول قرار دارند حذف خواهند شد. برای مثال در زیر، از شماره اول، یعنی اولین آیتم آرایه فرآیند اسپلایس را شروع کرده‌ایم و تمامی موارد بعدی را حذف کرده‌ایم: 

var friends = ["ali", "sina", "behnam", "mohammad"];

var onlyAli = fruits.splice(1);

در این حالت آرایه ما به‌صورت زیر خواهد بود:

"ali"

اضافه کردن آیتم‌های جدید به کمک متد splice:

متد splice تنها برای حذف آیتم‌ها از آرایه نیست! در واقع این متد می‌تواند برای افزودن آیتم به آرایه نیز به‌ کار گرفته شود. فرض کنید همچنان ما یک آرایه به نام friends مشابه زیر داریم و می‌خواهیم آیتم gholam را بین sina و behnam قرار دهیم. 

var friends = ["ali", "sina", "behnam", "mohammad"];

پارامترهای مورد نیاز ما برای این کار همانند مواقعی که قصد حذف یک آیتم داریم، چند مورد هستند:

پارامتر اول:‌ از کدام شماره قصد اضافه کردن آیتم به آرایه داریم.

پارامتر دوم: آیا موردی از آیتم‌های آرایه باید حذف شود و سپس آیتم‌های جدید اضافه شوند؟ اگر قصد حذف هیچ آیتمی را نداشته باشیم، این پارامتر را صفر می‌گذاریم؛ در غیر این صورت تعداد آیتم‌هایی را که می‌خواهیم حذف شوند، قرار می‌دهیم.

پارامتر سوم: هر چه بعد از پارامتر دوم نوشته می‌شود به‌عنوان آیتم جدید به آرایه افزوده خواهد شد. این مورد اختیاری است و زمانی که نمی‌خواهیم چیزی به آرایه اضافه شود آن را نمی‌نویسیم.

در زیر برای افزودن آيتم gholam بین sina و behnam موارد زیر را نوشته‌ایم. 

friends.splice(1,0,"gholam");

در این حالت آرایه ما به‌صورت زیر خواهد بود:

"ali", "sina", "behnam", "mohammad"

در مثال بعدی می‌خواهیم هم کار حذف و هم کار اضافه را با هم انجام دهیم! برای مثال آیتم behnam را حذف و دو آیتم جدید به نام‌های behrouz و reza را قبل از آیتم mohammad وارد کنیم. برای این کار:

friends.splice(2,1,"behrouz","reza");

در اینجا از آیتم شماره دوم (behnam با احتساب اینکه شماره آیتم‌ها در آرایه‌ها از صفر آغاز می‌شود)، یک آیتم (عدد دوم در مثال بالا) را حذف و به‌جای آن دو مقدار جدید به آیتم‌های آرایه در این نقطه اضافه کرده‌ایم.

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

"ali", "sina", "behrouz", "reza", "mohammad"

متد ()Slice

گاهی می‌خواهیم از آرایه فعلی، یک آرایه جدید بسازیم! در این حالت از متد اسلایس استفاده می‌کنیم. این متد چیزی از آرایه اصلی حذف نمی‌کند؛ بلکه یک آرایه جدید تشکیل می‌دهد.

var friends = ["ali", "sina", "behrouz", "reza", "mohammad"];

var newFriends = friends.slice(2);

خروجی newFriends به‌صورت زیر خواهد بود؛ همانطور که می‌بینید خود آیتم شماره ۲ یعنی behrouz نیز شامل آیتم‌های آرایه جدید می‌شود.

"behrouz", "reza", "mohammad"

سخن پایانی

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