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

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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

محتویات

مثال

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


یک آرایه چیست؟

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

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

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

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

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

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

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

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

شیوهٔ تعریف:

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

مثال

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

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

مثال

1 var cars = [
2   "Saab",
3   "Volvo",
4   "BMW"
5 ];

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

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

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

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

مثال

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

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

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

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

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

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

1 var name = cars[0];


مثال

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

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

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

تغییر مقدار یک عنصر در آرایه

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

1 cars[0] = "Opel";


مثال

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


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

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

مثال

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


آرایه ها نوعی از اشیاء (به انگلیسی: object) هستند

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

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

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

آرایه:

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

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

شیء:

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


عناصر آرایه می‌توانند شیء (به انگلیسی: object) باشند

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

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

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

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

ویژگی ها و متدهای آرایه

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

مثال

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

ویژگی length

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

مثال

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

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

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

مثال

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


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

مثال

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


استفاده از حلقه برای دسترسی به عناصر یک آرایه

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

مثال

1 var fruits, text, fLen, i;
2 fruits = ["Banana", "Orange", "Apple", "Mango"];
3 fLen = fruits.length;
4 
5 text = "<ul>";
6 for (i = 0; i < fLen; i++) {
7   text += "<li>" + fruits[i] + "</li>";
8 }
9 text += "</ul>";

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

مثال

 1 var fruits, text;
 2 fruits = ["Banana", "Orange", "Apple", "Mango"];
 3 
 4 text = "<ul>";
 5 fruits.forEach(myFunction);
 6 text += "</ul>";
 7 
 8 function myFunction(value) {
 9   text += "<li>" + value + "</li>";
10 }


اضافه کردن به عناصر یک آرایه

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

مثال

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

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

مثال

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

هشدار!

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

مثال

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


آرایه های Associative

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

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

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

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

مثال

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

هشدار !!

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

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

مثال

1 var person = [];
2 person["firstName"] = "John";
3 person["lastName"] = "Doe";
4 person["age"] = 46;
5 var x = person.length;     // person.length will return 0
6 var y = person[0];         // person[0] will return undefined


تفاوت بین آرایه ها و اشیاء (به انگلیسی: objects)

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

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

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

چه زمانی از آرایه استفاده کنیم. چه زمانی از اشیاء (به انگلیسی: objects) استفاده کنیم.

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

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

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

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

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

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

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

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



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

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

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

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

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

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


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

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

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

1 var fruits = ["Banana", "Orange", "Apple", "Mango"];
2 
3 typeof fruits;    // returns object

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

راه حل اول:

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

1 Array.isArray(fruits);   // returns true

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

راه حل دوم :

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

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

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

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

راه حل سوم:

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

1 var fruits = ["Banana", "Orange", "Apple", "Mango"];
2 
3 fruits instanceof Array;   // returns true

تمرینات جاوا اسکریپت

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


منابع آموزشی