درس دهم- آرایه‌ها و حلقه for in
آرایه‌ها در جاوا اسکریپت
آرایه یک نوع متغیر مخصوص است که برای نگهداری مقادیر متفاوت در یک زمان کاربرد دارد. در تعریف دیگر شاید بتوان گفت که آرایه، متغیری با چند خانه است که توسط آن می‌شود مقدارهای متفاوتی را نگهداری نمود. فرق یک آرایه با متغیرهای معمولی اینست که هر متغیر معمولی تنها می‌تواند یک مقدار را ذخیره کند در صورتی که هر آرایه خود به تنهایی می‌تواند چند مقدار را نگهداری کند. آرایه را می‌توان به سه شکل تعریف کرد.
آرایه از طریق روش یکم
در این روش ابتدا آرایه را با کمک کلمه کلیدی (new Array) تعریف کرده و بعد مقدار‌ها را بصورت جدا جدا و توسط شمارنده‌های هر خانه آرایه در آن قرار می‌دهیم.
var names = new Array() ;
names[0]="پیمان";
names[1]="پژمان";
names[2]="شهرام";
آرایه از طریق روش دوم
در این روش مانند روش یکم از عبارت کلیدی (new Array) استفاده می‌شود با این تفاوت که در این روش در همان ابتدای کار و در زمان تعریف آرایه مقدار‌ها را در آن قرار می‌دهیم.
var names = new Array("پیمان" , "پژمان" , "شهرام");
آرایه از طریق روش سوم
این روش بدون استفاده از کلمه کلیدی (new Array) عمل می‌کند اما مقدارهای داده شده باید در درون علامت‌های [و ] قرار بگیرند.
var names = [ "پیمان" , "پژمان" , "شهرام" ];
پیش از این، در درس استفاده از break (درس هشتم)، از این روش ساخت آرایه به صورت یک نمونه استفاده کردیم.
ساخت آرایه (طریق روش یکم)
برای ساخت و نسبت دادن داده‌ای به یک آرایه به شکل زیر عمل می‌کنیم:
var name = new Array(2) ;
names[0]="پیمان";
:name نامی است که برای آرایه انتخاب می‌کنیم.
:new Array کلمات کلیدی که یک آرایه ایجاد می‌کنند.
نکته: (2) Array، در صورت نوشتن عددی در داخل پرانتز تعداد خانه‌های آرایه مشخص می‌شود. اگر داخل پرانتز چیزی ننویسیم تعداد خانه‌ها را مشخص نکرده و خانه‌های آرایه به محض انتساب کردن مقادیر ساخته می‌شوند. در کد بالا ما یک آرایه با طول ۲ را ایجاد نموده‌ایم.
[0]: شمارنده آرایه عددی است که داخل براکت روبروی نام آرایه در زمان فراخوانی آن قرار می‌گیرد. این عدد از شماره 0 آغاز می‌شود و تعیین کننده خانه مشخصی از خانه‌های آرایه است.
نکته: تعداد خانه‌هایی (متغیرهایی) که هر آرایه می‌تواند ذخیره کند در دست سازنده آن آرایه است اما بهتر آنست که همیشه به میزان نیاز خود آنها را بسازیم تا از استفاده بی‌رویه حافظه جلوگیری کنیم.
روش‌های مقدار دادن به آرایه
برای مقدار دادن به آرایه باید به یکی از سه روش زیر عمل کنیم:
- روش یکم
var name = new Array(2) ;
name[0] = " پیمان " ;
name[1] = " پژمان " ;
در نمونه بالا ما یک آرایه با تعداد خانه ۲ ایجاد کرده‌ایم اگر دقت کنید متوجه می‌شوید که از دو شمارنده با عدد ۰ (به عنوان یکمین خانه) و عدد ۱ (به عنوان دومین خانه) برای ساخت دو متغیر استفاده شده است.
- روش دوم
var name = new Array("پیمان " , " پژمان ") ;
در روش دوم بیکباره آرایه تعریف شده و دو مقدار در آن ذخیره گشته است. به این ترتیب دو متغیر با شمارنده‌های ۰ و ۱ بطور خودکار ساخته می‌شوند.
- روش سوم
var names = [ "پیمان" , "پژمان" , "شهرام" ];
در روش سوم هم مانند روش دوم مقدار‌ها بیکباره در آن ریخته می‌شوند با این تفاوت که کلمه‌های کلیدی (new Array) حذف شده و علامت پرانتز جای خود را به علامت براکت می‌دهد.
چاپ کردن آرایه
برای چاپ مقداری مشخص در درون آرایه -با توجه به اینکه هر آرایه دارای مقادیر متفاوتی است- نیاز به دانستن و اشاره به شمارنده آن مقدار داریم. برای صدا زدن و چاپ مقدارهایی با شمارنده مشخص به شکل زیر عمل می‌کنیم:
document.write(name[0]) ;
document.write(name[1]) ;
همانطور که می‌بینید از نام آرایه همراه شمارنده داخل براکت برای چاپ کردن آنها استفاده شده است. این یعنی ما از ابتدا می‌دانیم کدام خانه را می‌خواهیم چاپ کنیم چرا که به شمارنده بخصوصی اشاره کرده‌ایم. در صورتی که بخواهیم به همه داده‌های درون آرایه دسترسی پیدا کنیم باید از حلقه بهره ببریم که در ادامه به آن خواهیم پرداخت.
برای درک بهتر کاربرد آرایه به کدهای زیر توجه بفرمایید:
<!DOCTYPE html>
<html> <body>
<script>
var name = new Array(2) ;
name[0] = prompt("نام خود را وارد کنید");
name[1] = prompt("نام خانوادگی خود را وارد کنید");
document.write("نام شما: " +name[0] + " " + name[1] + "<br>");
</script>
</body>
</html>
در نمونه کدهای بالا ابتدا یک آرایه با دو خانه (متغیر) تعریف شده، سپس از کاربر درخواست شده تا نام و نام خانوادگی خود را وارد کند. بعد مقادیر را در داخل خانه‌های آرایه ذخیره کرده و در آخر با اشاره به شمارنده هر خانه آنها را چاپ نموده‌ایم.
آرایه و for in
از حلقه for in در درس آبجکتها استفاده کردیم، حال می‌خواهیم این فن را در مورد آرایه‌ها هم بکار بریم. اجازه بدهید با یک نمونه شرح این مفهوم را شروع کنیم:
<!DOCTYPE html>
<html>
<body>
<script>
var name = new Array(2) ;
name[0] = prompt("نام خود را وارد کنید");
name[1] = prompt("نام خانوادگی خود را وارد کنید");
i =0
document.write( "نام شما" + " :") ;
for (x in name)
{
document.write( name[i] + " ") ;
i++ ;
}
</script>
</body>
</html>
در نمونه نوشته شده ابتدا آرایه‌ای با دو خانه ساخته شده و مقادیر نوشته شده توسط کاربر در آن قرار داده شده است. همانطور که پیداست برای چاپ مقادیر درون آرایه از حلقه بهره برده شده است. پیش از استفاده از حلقه، متغیری با نام i تعریف شده است که برای تغییر شمارنده به منظور دسترسی به همه خانه‌های آرایه، بکار برده شده است.
نکته: فراموش نکنید که برای دسترسی به مقادیر داخل آرایه نیاز به اشاره کردن به شمارنده هر مقدار داریم. در نمونه بالا به دلیل استفاده از حلقه این شمارنده را متغیری قرار داده‌ایم که با هر بار تکرار حلقه یک عدد به آن (i++) اضافه می‌شود.
نکته: به دلیل اینکه آرایه خود یک آبجکت است شما میتوانید هر نوع داده‌ای را در آن قرار دهید. بطور نمونه میتوانید یک آبجکت دیگر را درون آرایه قرار دهید و یا یک آرایه درون آرایه دیگر بگذارید.
نکته: آرایه هم مانند دیگر آبجکتها دارای ویژگی‌ها و متدهایی می‌باشد:
var x = name.length ;
متد length برای نشان دادن طول آرایه
var y = name.indexOf("پیمان") ;
ویژگی indexOf برای نشان دادن شمارنده مقدار یاد شده است.
تبدیل رشته به آرایه
برای تبدیل یک مقدار رشته‌ای به یک آرایه از متد «split» استفاده می‌کنیم:
txt = "a,b,c,d,e"
txt.split(","); //بین کاراکترها تبدیل توسط ویرگول
txt = "a b c d e"
txt.split(" "); // تبدیل توسط فضای خالی بین کاراکترها
txt = "a|b|c|d|e"
txt.split("|"); // تبدیل توسط دو خط عمودی
متد «split» از جمله متدهای آبجکت «رشته» است که با توجه به علامتی که کاراکترها یا جملات یک رشته را از هم تفکیک می‌دهد عمل می‌کند.
نمونه پایین شیوه کار با این متد را بهمراه سه علامتی که در بالا آمده نشان می‌دهد:
<!DOCTYPE html>
<html> <body>
<script>
txt1 = "a,b,c,d,e"
var text1 = txt1.split(","); //بین کاراکترها تبدیل توسط ویرگول
var i = 0 ;
for (x in text1) {
document.write(text1[i]) ;
i++ ;
}
document.write("<br />") ;
txt2 = "a b c d e"
var text2 = txt2.split(" "); // تبدیل توسط فضای خالی بین کاراکترها
var j = 0 ;
for (x in text2) {
document.write(text2[j]) ;
j++ ;
}
document.write("<br />") ;
txt3 = "a|b|c|d|e"
var text3 = txt3.split("|"); // تبدیل توسط دو خط عمودی
var k = 0 ;
for (x in text3) {
document.write(text3[k]) ;
k++ ;
}
document.write("<br />") ;
</script> </body> </html>
اگر به خروجی حلقه‌های استفاده شده برای چاپ داده‌ها دقت کنید متوجه می‌شوید که هر سه یک شکل خروجی داشته‌اند اما رشته‌های وارد شده هر کدام دارای یک نوع علامت (| یا فاصله یا ،) بوده‌اند. متد «split» در هر رشته این علامت‌ها را شناسایی کرده و هر کدام از حروف بین علامت‌ها را در داخل یک خانه آرایه قرار داده است.
با تشکر
ویکی سوال