آرایه‌ها

از موتو کد، دانشنامهٔ برنامه‌نویسی

آرایه‌های جاوا اسکریپت برای ذخیرهٔ انواع مختلف داده در یک متغیر استفاده می‌شود. [۱]

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه

یک آرایه چیست؟[ویرایش | ویرایش]

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

اگر شما لیستی از آیتم‌ها را دارید (برای مثال، لیستی از نام اتومبیل‌ها) ذخیرهٔ نام اتومبیل‌ها در یک متغیر به صورت زیر خواهد بود:

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

اما، اگر شما بخواهید که در لیست آیتم‌های خود به وسیلهٔ یک حلقه جستجو کنید و نام یک اتومبیل به خصوص را بیابید به چه شکل می‌بایست اینکار را کنید؟ و چه می‌شود اگر به جای نام ۳ اتومبیل، شما ۳۰۰ نام اتومبیل داشتید؟

راه حل این مشکل استفاده ازآرایه است!

یک آرایه می‌تواند مقادیر زیادی را تحت عنوان یک نام نگه داری کند، و شما می‌توانید به مقادیر آن با شماره یک اندیس دسترسی پیدا کنید.

ایجاد یک آرایه[ویرایش | ویرایش]

استفاده از حالت کلی یک آرایه ساده‌ترین روش برای ساختن یک آرایه در جاوا اسکریپت است.

شیوهٔ تعریف:

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

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


فضاهای خالی و فاصلهٔ بین خطوط مهم نیستند. تعریف یک آرایه می‌تواند در چندین خط صورت بگیرد:

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


 نوشتن علامت ویرگول (Comma) بعد از آخرین عنصر (همانند "BMW") برای مرورگرها ناسازگار است.

در مرورگر اینترنت اکسپلور نسخه ۸ و نسخه‌های قدیمی‌تر موجب بروز خطا خواهد شد.

استفاده از کلمهٔ کلیدی new در جاوا اسکریپت[ویرایش | ویرایش]

مثال زیر، هم یک آرایه می‌سازد و هم آن را مقداردهی می‌کند:

مثال[ویرایش | ویرایش]

var cars = new Array("Saab", "Volvo", "BMW");


مشاهدهٔ نتیجه


دو مثال بالا دقیقاً یک کار را انجام می‌دهد. نیازی نیست که از new Array() استفاده کنید.

برای سادگی بیشتر، خوانایی بالاتر و سرعت بیشتر اجرا از روش اول (تعریف آرایه با شیوه و Syntax رسمی) استفاده کنید.

دسترسی به عناصر یک آرایه[ویرایش | ویرایش]

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

عبارت زیر موجب دسترسی به اولین عنصر آرایه cars می‌شود:

var name = cars[0];

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


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

اندیس صفر [1] به عنصر اول ارایه اشاره دارد . اندیس یک [0] به عنصر دوم اشاره دارد .

تغییر مقدار یک عنصر در آرایه[ویرایش | ویرایش]

عبارت زیر مقدار اولین عنصر در آرایه cars را تغییر می‌دهد :

cars[0] = "Opel";

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


دسترسی به تمام آرایه[ویرایش | ویرایش]

با جاوا اسکریپت، شما می‌توانید به وسیلهٔ نام آرایه به تمام عناصر آرایه دسترسی داشته باشید:

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


آرایه ها نوعی از اشیاء (object) هستند[ویرایش | ویرایش]

آرایه‌ها نوع به خصوصی از اشیاء (object) هستند. عملگر typeof در جاوا اسکریپت مقدار "object" را برای آرایه‌ها بازمی‌گرداند.

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

آرایه‌ها از اعداد برای دسترسی به عناصرشان استفاده می‌کنند. در مثال زیر، عبارت person[0] مقدار John راباز می‌گرداند:

آرایه:[ویرایش | ویرایش]

var person = ["John", "Doe", 46];


مشاهدهٔ نتیجه


اشیاء (objects) از نام برای دسترسی به عناصرشان استفاده می‌کنند. در این مثال person.firstName عبارت John را باز می‌گرداند:

شیء:[ویرایش | ویرایش]

var person = {firstName:"John", lastName:"Doe", age:46};


مشاهدهٔ نتیجه


عناصر آرایه می‌توانند شیء (object) باشند[ویرایش | ویرایش]

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

به همین دلیل، شما می‌توانید متغیرهایی با نوع داده‌های متفاوت را در یک آرایه داشته باشید.

شما می‌توانید اشیا را درون یک آرایه داشته باشید. شما می‌توانید توابع را در یک آرایه داشته باشید. شما می‌توانید درون یک آرایه، یک آرایه دیگر داشته باشید:

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

ویژگی ها و متدهای آرایه[ویرایش | ویرایش]

قدرت واقعی آرایه‌های جاوا اسکریپت ویژگی‌ها و متدهای تعریف شده برای آرایه‌ها است:

مثال[ویرایش | ویرایش]

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays
متدهای آرایه‌ در فصل بعدی توضیح داده شده‌اند.

ویژگی length[ویرایش | ویرایش]

ویژگی length یک آرایه طول آرایه (تعداد عناصر یک آرایه) را بازمی‌گرداند.

مثال[ویرایش | ویرایش]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;   // the length of fruits is 4


مشاهدهٔ نتیجه


ویژگی length همیشه یک واحد از بیشترین اندیس یک آرایه، بیشتر است.

دسترسی به اولین عنصر یک آرایه[ویرایش | ویرایش]

مثال[ویرایش | ویرایش]

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];


مشاهدهٔ نتیجه


دسترسی به آخرین عنصر یک آرایه[ویرایش | ویرایش]

مثال[ویرایش | ویرایش]

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];


مشاهدهٔ نتیجه


استفاده از حلقه برای دسترسی به عناصر یک آرایه[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var 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() استفاده کنید:

مثال[ویرایش | ویرایش]

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

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

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


مشاهدهٔ نتیجه


اضافه کردن به عناصر یک آرایه[ویرایش | ویرایش]

ساده‌ترین روش برای وارد کردن یک عنصر جدید در یک آرایه، استفاده از متد push() است:

مثال[ویرایش | ویرایش]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits


مشاهدهٔ نتیجه


عنصر جدید را می‌توان با استفاده از ویژگی length نیز به آرایه اضافه کرد:

مثال[ویرایش | ویرایش]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    // adds a new element (Lemon) to fruits


مشاهدهٔ نتیجه


هشدار!

اضافه کردن عناصر با اندیس‌های بزرگ می‌تواند موجب ایجاد «فضاهای خالی» تعریف نشده در یک آرایه شود:

مثال[ویرایش | ویرایش]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    // adds a new element (Lemon) to fruits


مشاهدهٔ نتیجه


آرایه های Associative[ویرایش | ویرایش]

بسیاری از زبان‌های برنامه‌نویسی از اندیس‌های نامگذاری شده پشتیبانی می‌کنند.

آرایه‌ها با اندیس‌های نامگذاری شده، آرایه‌های Associative (یا هش) نامیده می‌شوند.

جاوا اسکریپت از آرایه‌ها با اندیس نامگذاری شده پشتیبانی نمی‌کند.

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

مثال[ویرایش | ویرایش]

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;     // person.length will return 3
var y = person[0];         // person[0] will return "John"


مشاهدهٔ نتیجه


هشدار !!

اگر شما از اندیس‌های نامگذاری شده استفاده کنید، جاوا اسکریپت آرایه شما را از نو به عنوان یک شیء استاندارد تعریف می‌کند.

بعد از این امر، برخی از متدها و ویژگی‌های آرایه ممکن است نتایج نادرست تولید کنند.

مثال[ویرایش | ویرایش]

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;     // person.length will return 0
var y = person[0];         // person[0] will return undefined


مشاهدهٔ نتیجه


تفاوت بین آرایه ها و اشیاء (objects)[ویرایش | ویرایش]

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

در جاوا اسکریپت، اشیاء (objects) از اندیس‌های نامگذاری شده استفاده می‌کنند.

آرایه‌ها نوعی از اشیاء (objects) هستند که از اندیس‌های عددی استفاده می‌کنند.

چه زمانی از آرایه استفاده کنیم. چه زمانی از اشیاء (objects) استفاده کنیم.[ویرایش | ویرایش]

جاوا اسکریپت از آرایه‌های associative پشتیبانی نمی‌کند.

شما می‌بایست زمانی که می‌خواهید نام عناصر به صورت رشته‌ای (متنی) باشد از اشیاء (objects) استفاده کنید.

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

از استفاده از دستور new Array() پرهیز کنید[ویرایش | ویرایش]

هیچ نیازی نیست که از متد سازنده آرایه جاوا اسکریپت یعنی new Array() استفاده کنید.

به جای آن از [ ] استفاده کنید.

هر دو تکه کد متفاوت زیر یک آرایه جدید خالی با نام points ایجاد می‌کنند.

var points = new Array();     // Bad
var points = [];              // Good


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

var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good


مشاهدهٔ نتیجه


کلمهٔ کلیدی new تنها موجب پیچیده‌تر شدن کد می‌شود. همچنین می‌تواند موجب بروز برخی از نتایج یا خطاهای ناخواسته شود

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

چه اتفاقی می‌افتد اگر من یک عنصر را پاک کنم؟

var points = new Array(40);  // Creates an array with 40 undefined elements !!!!!


مشاهدهٔ نتیجه


چطور یک آرایه را تشخیص دهیم[ویرایش | ویرایش]

مهم‌ترین سؤال این است: من چطور می‌توانم بفهمم یک متغیر، یک آرایه است؟

مشکل این است که عملگر typeof برای آرایه‌ها عبارت "object" را به عنوان خروجی بازمی‌گرداند.

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

typeof fruits;    // returns object


مشاهدهٔ نتیجه


عملگر typeof مقدار object را بازمی‌گرداند زیرا که یک آرایه در جاوا اسکریپت یک شیء یا object نیز است.

راه حل اول:[ویرایش | ویرایش]

ECMAScript 5 برای حل این مشکل یک متد جدید تحت عنوان Array.isArray() تعریف کرده‌است:

Array.isArray(fruits);   // returns true


مشاهدهٔ نتیجه


مشکلی که در این روش وجود دارد این است که ECMAScript 5 در مرورگرهای قدیمی پشتیبانی نمی‌شود.

راه حل دوم :[ویرایش | ویرایش]

برای حل این مشکل شما می‌توانید تابع isArray() خودتان را تعریف کنید:

function isArray(x) {
  return x.constructor.toString().indexOf("Array") > -1;
}


مشاهدهٔ نتیجه


تابع فوق، در صورتی که آرگومان ورودی آن یک آرایه باشد مقدار true را بازمی‌گرداند.

و یا به صورت دقیق‌تر: تابع فوق در صورتی که prototype آرگومان ورودی شامل کلمه "Array" باشد مقدار True را بازمی‌گرداند.

راه حل سوم:[ویرایش | ویرایش]

عملگر instanceof در صورتی که عملوند اول که همان شیء ما است از عملوند دوم که همان سازندهٔ ما است ساخته شده باشد مقدار true را بازمی‌گرداند.

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

fruits instanceof Array;   // returns true


مشاهدهٔ نتیجه


تمرینات جاوا اسکریپت[ویرایش | ویرایش]

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی[ویرایش]