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

از ویکی کد
پرش به ناوبری پرش به جستجو

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

محتویات

مثال

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"
];


Using the JavaScript Keyword new

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

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

مثال

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


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

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

عبارت زیر موجب دسترسی به اولین عنصر آرایه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

Array methods are covered in the next chapters.

متدهای آرایه‌ در فصل بعدی توضیح داده شده‌اند.

ویژگی length

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

مثال

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


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

مثال

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) استفاده کنیم.

جاوااسکریپت از آرایه‌های 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

منابع آموزشی

الگو:منو افقی جاوااسکریپت