آموزش جاوا اسکریپت – کار با آرایه ها در جاوا اسکریپت

آرایه چیست؟

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

ایجاد آرایه جدید

در جاوا اسکریپت برای ایجاد آرایه از کلاس Array استفاده می‌کنیم. آرایه در جاوا اسکریپت به عنوان یک شیء در نظر گرفته می‌شود. برای ایجاد یک شیء (از نوع آرایه) از کد زیر استفاده می‌کنیم:

var aTemp = new Array();

چنانچه از تعداد عناصر آرایه اطلاع داشته باشیم، می‍توانیم کد دستوری را به صورت زیر بنویسیم:

var aTemp = new Array(20);

برای مقداردهی خانه‌های آرایه باید طبق دستور زیر عمل کنیم؛ برای مثال در کد زیر با اضافه کردن یک عنصر جدید، به صورت خودکار به تعداد خانه‌ها اضافه می‌شود.

var nColors = new Array();
nColors[0] = "blue";
nColors[1] = "red";
nColors[2] = "green";

نکته: به اعدادی که در انتهای نام آرایه نوشته می‌شود و با آن می‌توان به مقدار مشخص دسترسی پیدا کرد، ایندکس (index) می‌گویند. مقدار index در آرایه‌ها از صفر [۰] شروع می‌شود. در واقع صفر اولین عنصر و یک [۱] دومین عنصر می‌باشد.

درصورتی که مقادیر داخل خانه‌ها را از قبل می‌دانیم باید به صورت زیر بنویسیم:

var nColors = new Array("gray", "brown", "yellow");

و یا به این صورت:

var nColors = ["gray", "brown", "yellow"];

بدست آوردن طول آرایه

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

برای مثال به تکه کد زیر توجه کنید:

var nColors = new Array("gray", "brown", "yellow");
alert(nColors.length);

//result 3

var nSeason = new Array();
nSeason[0] = "spring";
nSeason[1] = "summer";
nSeason[2] = "autumn";
nSeason[3] = "winter";
alert(nSeason.length);

//result 4

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

پاسخ این است؛ چون خانه‌ها از رقم صفر شروع می‌شود (نه از یک) بنابراین همیشه تعداد کل عناصر موجود در آرایه، یک واحد بیشتر از آخرین واحد خواهد بود. بدین صورت که در مثال بالا آخرین واحد سه [۳] می‌باشد ولی در حقیقت چهار واحد داریم.

در صورتی که یک یا چند خانه خالی باشد، جاوا اسکریپت این خانه‌ها را با مقدار null پر خواهد کرد و این خانه‌ها نیز شمرده می‌شوند. در جاوا اسکریپت، حداکثر خانه‌هایی که یک آرایه می‌تواند داشته باشد ۴۲۹۴۹۶۷۲۹۵ واحد است!

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

• پاورپوینت جاوا اسکریپت ES6 — کلیک کنید.

دسترسی به عناصر آرایه

برای دسترسی به هر یک از عناصر آرایه می‌توانیم از تکه کد زیر استفاده کنیم. برای دسترسی به اولین عنصر تنها کافیست به جای عدد مورد نظر صفر قرار دهیم:

var nColors = new Array("gray", "brown", "yellow");
alert(nColors[2]);

//result "yellow"

برای دسترسی به آخرین عنصر باید شماره آخرین واحد را بدانیم. اما در صورتی که تعداد خانه‌ها خیلی زیاد باشد، دانستن آخرین واحد تقریبا غیرممکن است.

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

var nColors = new Array("red", "blue", "black");
alert(nColors.length-1);

//result "black"

تبدیل آرایه به رشته

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

var aColors = ["red", "cyan", "gray"];
alert(aColors.toString());
alert(aColors.valueOf());
alert(aColors.toLocaleString());

//result red, cyan, gray

همانطور که می‌بینید خروجی هر سه متد برابر است.

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

var aColors = ["red", "cyan", "gray"];

alert(aColors.join(","));

//result "red,cyan,gray"


alert(aColors.join("-hi-"));

//result "red-hi-cyan-hi-gray"


alert(aColors.join("$$"));

//result "red$$cyan$$gray"

همانطور که می‌بینید داخل متد ()join. باید یک جدا کننده بنویسید. این جدا کننده می‌تواند حتی یک فاصله باشد. به این صورت که باید داخل پارانتز دو کوتیشن مارک (“”) گذاشته و داخل آن تنها یک فاصله بگذاریم. به مثال زیر توجه کنید:

var aColors = ["Hello", "world", "!"];
alert(aColors.join(" "));

//result "Hello world !"

نکته: در صورتی که داخل متد هیچ جداکننده‌ای نوشته نشود، خروجی برنامه به همان صورت اصلی خواهد بود.

تبدیل رشته به آرایه

اگر یک رشته‌ای داشته باشیم که توسط یک جدا کننده از هم جدا شده‌اند، و قصد داشته باشیم این رشته را به آرایه تبدیل کنیم، آیا امکان پذیر است؟

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

var aColors = "red$ cyan$ gray";
var aColors = aColors.split("$");
alert(aColors);

//result red, cyan, gray

این جدا کننده می‌تواند حتی فاصله باشد. در صورتی که هیچ جدا کننده ای داخل کوتیشن مارک (“”) تعریف نشده باشد، این متد رشته را به آرایه ای تبدیل می‌کند که هر عنصر آن دارای یک کاراکتر از رشته مورد نظر است. به مثال زیر توجه کنید:

var aColors = "red$cyan$gray";
var aColors = aColors.split("");
alert(aColors);

//result r,e,d,$,c,y,a,n,$,g,r,a,y

نکته: در صورتی که داخل متد هیچ جداکننده ای نوشته نشود، همان رشته اصلی چاپ خواهد شد.

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

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

var aColors = ["red", "cyan", "gray"];
var aColors2 = aColors.concat("pink", "purple");

alert(aColors2.toString());

//result red, cyan, gray, pink, purple

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

• آموزش جاوا اسکریپت – کار با رشته ها در جاوا اسکریپت — کلیک کنید.

برگرداندن عناصر خاصی از آرایه

در جاوا اسکریپت تابعی به نام ()slice. وجود دارد که معنی عمومی آن “تکه” است! وظیفه این تابع در آرایه جداسازی بخشی از آرایه و برگرداندن آن است. عناصرهای جدا شده در یک آرایه جدید قرار می‌گیرند. این متد تغییری در آرایه اصلی ایجاد نمی‌کند. این متد دو پارامتر به نام‌های from و until دارد. متد ()slice. دو آرگومان می‌گیرد و از خانه آرگومان اول تا قبل از آرگومان دوم را به آرایه جدیدی تبدیل می‌کند. در صورتی که فقط آرگومان اول مشخص شود، این متد عناصر را از آرگومان اول تا انتها را برمی‌گرداند. به مثال‌های زیر توجه کنید:

var aColors = ["red", "green", "blue", "yellow", "purple"];
var aTemp = aColors.slice(1, 4);
alert(aTemp.toString());

//result green blue, yellow

تبدیل آرایه ها به پشته و صف

آرایه ها در جاوا اسکریپت چندین متد مختلف دارند. یکی از جذابترین ویژگی‌ها در کار با آرایه‌ها در جاوا اسکریپت امکان تبدیل کردن آرایه‌ها به نوع دیگری از ساختمان داده‌ها مثل stack و queue است.

از متدهای ()push. و ()pop. و ()shift. و ()unshift. برای حذف و اضافه کردن عناصر از ابتدا و انتهای آرایه استفاده می‌شود.

کاربردهای هرکدام از این متدها به صورت زیر است :

• pop : از آخر آرایه به مقدار یک عنصر را حذف میکند.
• push : به آخر آرایه یک عنصر جدید اضافه میکند.
• shift : از اول آرایه به مقدار یک عنصر را حذف میکند.
• unshift : به اول آرایه یک عنصر جدید اضافه میکند.

برای درک بهتر متد ()pop. به مثال زیر توجه کنید:

var aLanguage = ["Persian", "Turkish", "English"];

var vItem = aLanguage.pop();
alert(vItem);
alert(aLanguage.toString());

//result English
//result Persian, Turkish

مثال برای متد ()push. :

var aLanguage = ["Persian", "Turkish", "English"];

aLanguage.push("French");
alert(aLanguage);

//result Persian, Turkish, English, French

مثال برای متد ()shift. :

var aLanguage = ["Persian", "Turkish", "English"];
var vItem = aLanguage.shift();
alert(vItem);

//result Persian

مثال برای متد ()unshift. :

var aLanguage = ["Persian", "Turkish", "English"];

aLanguage.unshift("French");
alert(aLanguage.toString());

//result French, Persian, Turkish, English

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

برای مرتب سازی عناصر آرایه‌ها در جاوا اسکریپت از دو متد استفاده می‌شود. متد ()reverse. و ()sort.

متد ()reverse. برای عکس کردن عناصر در آرایه استفاده می‌شود. مثال:

var aCar = ["BMW", "Benz", "Honda"];

aCar.reverse();
alert(aCar.toString());

//result Honda, Benz, BMW

متد ()sort. عناصر آرایه را به صورت صعودی و بر اساس مقدارشان مرتب می‌کند. بدیهی است که در این صورت عناصر آرایه بر حسب کدهای کاراکتری شان مرتب خواهند شد. برای مثال:

var aCar = ["Honda", "BMW", "Benz"];

aCar.sort();
alert(aCar.toString());

//result BMW, Benz, Honda

سخن آخر درباره کار با آرایه ها در جاوا اسکریپت

در این پست از آموزش آرایه ها در جاوا اسکریپت با مفاهیم آرایه و کاربرد آرایه در جاوا اسکریپت آشنا شدیم. متوجه شدیم که آرایه متغیر مهمی در برنامه نویسی است و کاربردهای فراوانی دارد. در پست بعدی در رابطه با کار با رشته ها در جاوا اسکریپت صحبت خواهیم کرد. منتظر نظرات و پیشنهادات شما عزیزان هستیم. موفق و پیروز باشید.