آرایه‌ها در جاوا اسکریپت

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

آرایه‌ها

از آرایه‌ها در جاوا اسکریپت برای ذخیره سازی چندین مقدار در یک متغیر استفاده می‌شود:

12345<p id="demo"></p>
 
var cars = ["Saab", "Volvo", "BMW"]; 
document.getElementById("demo") = cars; 
</script

در نمونه مثال بالا آرایه ای با سه مقدار تعریف شده است، خروجی نمونه مثال بالا به شکل زیر است:

1Saab,Volvo,BMW

آرایه چیست؟

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

123var car1 = "Saab"; 
var car2 = "Volvo"; 
var car3 = "BMW"; 

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

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

برای ایجاد یک آرایه می توانید از قاعده نوشتاری زیر استفاده کنید:

1var array_name = [item1, item2, ...];

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

12345<p id="demo"></p> 
 
var cars = ["Saab", "Volvo", "BMW"]; 
document.getElementById("demo") = cars;
 

می‌توان آرایه بالا را به شکل زیر نیز تعریف کرد (در این صورت خوانایی برنامه بیشتر خواهد شد:

12345var cars = [ 
    "Saab",
    "Volvo",
    "BMW" 
 ]; 

استفاده از کلمه کلیدی new در جاوا اسکریپت

در نمونه مثال زیر با استفاده از کلمه new یک آرایه را تعریف کرده و مقادیری را به آن انتساب داده ایم:

12345<p id="demo"></p>

var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo") = cars; 
 

خروجی نمونه مثال بالا به شکل زیر است:

1Saab, Volvo, BMW

در مثال‌های بالا دو روش تعریف آرایه را به شما یاد دادیم. با استفاده از هر دو روش می‌توان آرایه‌ها را ایجاد کرد. ولی برای سادگی می‌توان از روش اول (بدون کلمه new) استفاده نمود.

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

میتوان به عناصر یک آرایه با استفاده از اعداد index دسترسی داشت. در نمونه مثال زیر مقدار اولین عنصر از آرایه cars برگردانده میشود:

1var name = cars[0];

12345 <p id="demo"></p>
 
 var cars = ["Saab", "Volvo", "BMW"];
 document.getElementById("demo") = cars[0];
  

نکته : مقدار index در آرایه ها از صفر شروع می‌شود. در واقع [0] اولین عنصر و [1] دومین عنصر را نشان میدهد.

تغییر عناصر یک آرایه

در نمونه مثال زیر مقدار اولین عنصر آرایه cars تغییر یافته است:

1cars[0] = "Opel";

123456<p id="demo"></p>  

var cars = ["Saab", "Volvo", "BMW"]; 
cars[0] = "Opel";
document.getElementById("demo") = cars;
  

خروجی نمونه مثال بالا به شکل زیر است:

1Opel, Volvo, BMW

دسترسی به همه مقادیر یک آرایه

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

12345<p id="demo"></p>
 
var cars = ["Saab", "Volvo", "BMW"]; 
document.getElementById("demo") = cars;
 

خروجی نمونه مثال بالا به شکل زیر است:

1Saab, Volvo, BMW

آرایه‌ها Object هستند

آرایه ها نوع خاصی از Object ها هستند، اگر عملگر typeof را بر روی آرایه‌ها به کار ببریم، مقدار "object" را برای ما بر می‌گرداند. آرایه‌ها در جاوا اسکریپت برای دسترسی به عناصر خود از اعداد استفاده می‌کنند. در نمونه مثال زیر [person[0 مقدار John را برمیگرداند‌:

12345<p id="demo"></p> 

var person = ["John", "Doe", 46]; 
document.getElementById("demo") = person[0]; 
 

خروجی نمونه مثال بالا به شکل زیر است:

1John

عناصر یک آرایه میتوانند Object باشند

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

میتوان در یک آرایه از توابع هم استفاده کرد:

123myArray[0] = Date.now; 
myArray[1] = myFunction; 
myArray[2] = myCars; 

پروپرتی‌ها و متدهای یک آرایه

در نمونه مثال زیر با استفاده از پروپرتی length میتوان تعداد خانه‌های موجود در آرایه را به دست آورد. همچنین با استفاده ازمتد ()sort می‌توان آرایه را مرتب سازی کرد.

12 var x = cars.length;    // The length property returns the number of elements
 var y = cars.sort();     // The sort() method sorts arrays 

پروپرتی length در آرایه‌ها

با استفاده از پروپرتی length در یک آرایه می‌توان طول آن آرایه را به دست آورد (تعداد و مقداری که در آن آرایه وجود دارد:

1234<p id="demo"></p>

var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo") = fruits.length;
 

خروجی نمونه مثال بالا به شکل زیر است:

14

دسترسی به اولین عنصر از یک آرایه

با استفاده از [0] میتوان به اولین عنصر از آرایه دسترسی داشت:

123456<p id="demo"></p> 
 
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var first = fruits[0]; 
document.getElementById("demo") = first; 
 

خروجی نمونه مثال بالا:

1Banana

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

123456<p id="demo"></p> 

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length-1];
document.getElementById("demo") = last;
 

خروجی نمونه مثال بالا:

1Mango

پیمایش در بین عناصر یک آرایه

امن ترین راه برای پیمایش بین عناصر یک آرایه استفاده از حلقه "for" است:

123456789var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;  

text = "<ul>"; 
for (i = 0; i < fLen; i++) {  
    text += "<li>" + fruits[i] + "</li>";
} 
text += "</ul>"; 

همچنین می‌توان از تابع ()Array.forEach استفاده نمود:

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

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) { 
    text += "<li>" + value + "</li>";
 } 

افزودن به عناصر آرایه

آسان ترین راه برای اضافه کردن یک عنصر جدید به یک آرایه استفاده از متد push است:

12var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.push("Lemon");