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

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

آرایه ها

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

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

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


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

Saab,Volvo,BMW

آرایه چیست؟

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

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

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

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

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

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

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

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


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


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

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

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

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

<p id=&quotdemo&quot></p>


var cars = new Array(&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot);
document.getElementById(&quotdemo&quot) = cars;

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

Saab,Volvo,BMW

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

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

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

var name = cars[0];

<p id=&quotdemo&quot></p>


var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];
document.getElementById(&quotdemo&quot) = cars[0];

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

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

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

cars[0] = &quotOpel"

<p id=&quotdemo&quot></p>


var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];
cars[0] = &quotOpel"
document.getElementById(&quotdemo&quot) = cars;

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

Opel,Volvo,BMW

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

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

<p id=&quotdemo&quot></p>


var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];
document.getElementById(&quotdemo&quot) = cars;

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

Saab,Volvo,BMW

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

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

<p id=&quotdemo&quot></p>


var person = [&quotJohn&quot, &quotDoe&quot, 46];
document.getElementById(&quotdemo&quot) = person[0];

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

John

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

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

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

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

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

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

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

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

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

<p id=&quotdemo&quot></p>


var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
document.getElementById(&quotdemo&quot) = fruits.length;

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

4

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

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

<p id=&quotdemo&quot></p>


var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
var first = fruits[0];
document.getElementById(&quotdemo&quot) = first;

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

Banana

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

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

<p id=&quotdemo&quot></p>


var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
var last = fruits[fruits.length-1];
document.getElementById(&quotdemo&quot) = last;

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

Mango

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

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

var fruits, text, fLen, i;
fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
fLen = fruits.length;

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

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

var fruits, text;
fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];

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

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

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

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

var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
fruits.push(&quotLemon&quot);

منتظر نظرات خوب شما هستم (لایک یادتون نره)