جاوا اسکریپت به زبان ساده: جلسه چهاردهم - آرایه (بخش اول)

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

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

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

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

varname1 =ldquo;alirdquo;

varname2=ldquo;rezardquo;

varname3 =ldquo;mohammadrdquo;

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

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

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

vararray-name= [item1,item2, ...];

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

varFriends = [ldquo;alirdquo;, ldquo;rezardquo;, = ldquo;mohammadrdquo;]؛

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

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

varbestFriend = Friends[0];

طول آرایه:

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

varfreinds = ["mohammad","ali","mohsen","sina"];

fruits.length;

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

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

if( arrayName.length !=0) {

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

}

متدهای Array:

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

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

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

arrayName.methodName()

متد ()toString

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

varfreinds = ["ali", "sina", "behnam", "mohammad"];

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

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

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

متد ()join

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

varfreinds = ["ali", "sina", "behnam", "mohammad"];

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

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

ali * sina * behnam *mohammad

متد ()pop

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

varfruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();

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

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

varfreinds = ["ali", "sina", "behnam", "mohammad"];

varmyLastFreind = fruits.pop();

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

متد ()Push

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

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

varfreinds = ["ali", "sina", "behnam", "mohammad"];

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

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

varfreinds = ["ali", "sina", "behnam", "mohammad", "gholam"];

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

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

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

varfriends = ["ali", "sina", "behnam", "mohammad"];

friends[0] ="mohsen";

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

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

متد ()splice

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

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

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

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

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

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

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

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

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

varfriends = ["ali", "sina", "behnam", "mohammad"];

friends.splice(2,1);

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

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

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

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

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

varfriends = ["ali", "sina", "behnam", "mohammad"];

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

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

"sina", "behnam", "mohammad"

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

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

varfriends = ["ali", "sina", "behnam", "mohammad"];

varonlyAli = fruits.splice(1);

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

"ali"

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

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

varfriends = ["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

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

varfriends = ["ali", "sina", "behrouz", "reza", "mohammad"];

varnewFriends = friends.slice(2);

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

"behrouz", "reza", "mohammad"

سخن پایانی

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