آرایه‌های JavaScript

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

مثال

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

خودتان امتحان کنید

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

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

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

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

اما اگر بخواهید همه‌ی خودروها را مرور کنید و یک مقدار خاص پیدا کنید؟ اگر نه سه برند خودرو بلکه سیصد برند باشد؟

راه‌حل این است که آرایه را بگیریم!

آرایه می‌تواند مقدارهای زیادی را در یک نام نگه دارد و همچنین می‌توان از طریق شمارنده‌ی نشانه‌گذاری به این مقدارها دسترسی داشت.

ایجاد آرایه

استفاده از متن آرایه، ساده‌ترین روش برای ایجاد آرایه‌های JavaScript است.

قانون:

var array-name = [item1, item2, ...];

مثال

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

خودتان امتحان کنید

فضاها و خط‌کشی‌ها مهم نیستند. تعریف می‌تواند در چند خط باشد:

مثال

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

خودتان امتحان کنید

لطفاً در انتهای آخرین عنصر، کاما ننویسید (مثلاً "BMW",).

ممکن است مشکلات سازگاری بین مرورگرها وجود داشته باشد.

از کلمه‌ی کلیدی JavaScript استفاده می‌شود

مثال زیر نیز یک آرایه ایجاد می‌کند و به آن ارزش‌ها را می‌دهد:

مثال

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

خودتان امتحان کنید

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

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

عنصر آرایه را می‌بینیم

ما از طریق ارجاع بهشماره‌ی نشانه‌گذاری (شماره‌ی زیر)برای مراجعه به یک عنصر آرایه استفاده می‌شود.

این جمله مقدار اولین عنصر cars را می‌گیرد:

var name = cars[0];

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

cars[0] = "Opel";

مثال

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

خودتان امتحان کنید

[0] اولین عنصر آرایه است. [1] دومین است. شمارنده آرایه از 0 شروع می‌شود.

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

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

cars[0] = "Opel";

مثال

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

خودتان امتحان کنید

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

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

مثال

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

خودتان امتحان کنید

آرایه اشیاء است

آرایه نوع خاصی از اشیاء هستند. در JavaScript از آرایه‌ها به عنوان اشیاء استفاده می‌شود typeof عملگرها "object" را برمی‌گردانند.

اما، بهترین روش توصیف آرایه‌های JavaScript به عنوان آرایه است.

استفاده از آرایهاعدادبرای دسترسی به "عناصر" آن. در این مثال،person[0] Bill را برگردانید:

آرایه:

var person = ["Bill", "Gates", 62];

خودتان امتحان کنید

اشیاء استفاده می‌کنندنامبرای دسترسی به "اعضای" آن. در این مثال،person.firstName Bill را برگردانید:

اشیاء:

var person = {firstName:"Bill", lastName:"Gates", age:19};

خودتان امتحان کنید

عناصر آرایه می‌توانند اشیاء باشند

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

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

شما می‌توانید در آرایه‌ها اشیاء را ذخیره کنید. شما می‌توانید در آرایه‌ها توابع را ذخیره کنید. شما حتی می‌توانید آرایه‌ها را در آرایه ذخیره کنید:

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

ویژگی‌ها و روش‌های آرایه

قدرت واقعی آرایه‌های JavaScript در ویژگی‌ها و روش‌های آن‌ها نهفته است:

مثال

var x = cars.length;   // متغیر length تعداد عناصر را برمی‌گرداند
var y = cars.sort();   // روش sort() آرایه را مرتب می‌کند

ما در فصل بعدی در مورد روش‌های آرایه‌ها یاد خواهیم گرفت.

متغیر length

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

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // طول آرایه fruits برابر با 4 است

خودتان امتحان کنید

length متغیر همیشه بزرگتر از بالاترین شاخص آرایه (محدودیت بالایی) است.

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

مثال

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

خودتان امتحان کنید

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

مثال

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

خودتان امتحان کنید

بررسی عناصر آرایه

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

مثال

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

خودتان امتحان کنید

شما همچنین می‌توانید از 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");                // یک عنصر جدید (Lemon) به fruits اضافه می‌شود

خودتان امتحان کنید

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

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // یک عنصر جدید (Lemon) به fruits اضافه می‌شود

خودتان امتحان کنید

اخطار!

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

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // یک عنصر جدید (Lemon) به fruits اضافه می‌شود

خودتان امتحان کنید

آرایه مرتبط

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

آرایه‌هایی که شاخص‌های نام‌گذاری شده دارند به عنوان آرایه‌های مرتبط (یا هش) شناخته می‌شوند.

جاوااسکریپت پشتیبانی نمی‌شودنام‌گذاری شاخص استفاده شوند.

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

مثال

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 3 را برمی‌گرداند
var y = person[0];              // person[0] "Bill" را برمی‌گرداند

خودتان امتحان کنید

اخطار!

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

پس، تمامی روش‌ها و ویژگی‌های آرایه‌ها غیرمتعارف خواهند بود.

مثال:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length به 0 بازمی‌گردد
var y = person[0];              // person[0] به undefined بازمی‌گردد

خودتان امتحان کنید

تفاوت بین آرایه و اشیاء

در JavaScript،آرایهاستفاده می‌شودشمارنده‌های عددی.

در JavaScript،اشیاءاستفاده می‌شودشمارنده‌های نام‌گذاری شده.

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

چه زمانی از آرایه استفاده می‌کنیم و چه زمانی از اشیاء؟

  • JavaScript آرایه‌های مرتبط را پشتیبانی نمی‌کند
  • اگر می‌خواهید نام عناصرزبان (متن)باید ازاشیاء.
  • اگر می‌خواهید نام عناصراعدادباید ازآرایه.

از new Array() خودداری کنید

لازم نیست از سازنده آرایه‌های داخلی JavaScript استفاده کنید new Array().

لطفاً از [] به جای آن!

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

var points = new Array();         // بدتر
var points = [];                  // بهتر

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

var points = new Array(40, 100, 1, 5, 25, 10); // بدتر
var points = [40, 100, 1, 5, 25, 10];          // بهتر

خودتان امتحان کنید

new کلمات کلیدی تنها باعث پیچیدگی کد می‌شوند. همچنین می‌توانند نتایج غیرمنتظره‌ای ایجاد کنند:

var points = new Array(40, 100);  // آرایه‌ای با دو عنصر (40 و 100) ایجاد می‌شود

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

var points = new Array(40);       // آرایه‌ای با 40 عنصر تعریف نشده ایجاد می‌شود！！！

خودتان امتحان کنید

چگونه می‌توان آرایه را شناسایی کرد

مشکل رایج این است: چگونه می‌توانم بفهمم که یک متغیر آرایه است یا خیر؟

مشکل در عملگرهای JavaScript است typeof بازمی‌گردد به "object":"

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // بازمی‌گردد به object

خودتان امتحان کنید

运算符 typeof 返回 "object"، زیرا آرایه‌های JavaScript به عنوان اشیاء در نظر گرفته می‌شوند.

راه‌حل 1:

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

Array.isArray(fruits);     // بازمی‌گردد به true

خودتان امتحان کنید

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

راه‌حل 2:

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

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

خودتان امتحان کنید

اگر پارامتر یک آرایه باشد، این تابع همیشه بازمی‌گردد به true.

یا توضیح دقیق‌تر است: اگر کلمه "Array" در پروتوتایپ اشیاء وجود دارد، بازمی‌گردد به true.

راه‌حل 3:

اگر اشیاء توسط سازنده داده شده، instanceof عملگر بازمی‌گردد به true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // بازمی‌گردد به true

خودتان امتحان کنید