آرایه JS

آرایه یا Array، قطاری از متغیر ها است. به عبارت دیگر آرایه می تواند چندین متغیر را در یک متغیر ذخیره کند.

const persons = ["Amir", "Ali", "Reza"];

فرض کنید می خواهیم برنامه ای بنویسیم که در آن نام 3 شاگرد کلاس را در 3 متغیر ذخیره و آن را چاپ کنیم.

let person1 = "Amir";
let person2 = "Ali";
let person3 = "Reza";

اگر بخواهیم از این برنامه برای کلاس دیگری با تعداد 100 شاگرد استفاده کنیم چه کار باید بکنیم؟

می توانیم 100 متغیر تعریف و همه را چاپ کنیم. ولی روش بهتر و راحت تر استفاده از آرایه است.

آرایه می تواند مجموعه ای از متغیر ها را در خود ذخیره کند. و برنامه ما را انعطاف پذیر تر کند.

let persons = ["Amir", "Ali", "Reza"];

نکته: آرایه‌ها می‌توانند انواع مختلف داده‌ها مانند numbers، string، object و ... را ذخیره کنند.

آرایه ها می توانند object را نیز در خود ذخیره کنند. همانطور که در کد زیر می بینید شیء تاریخ را در آرایه ذخیره کرده ایم.

let person = ["Ehsan", "Benz", 30, Date.now()];

برای ساخت آرایه در JS، از براکت - [ ] استفاده می کنیم.

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

نکته: برای ساخت آرایه، هر مقدار را با کاما ( , ) از هم جدا می کنیم.

در هر سه نمونه کد زیر آرایه، شامل سه متغیر رشته ای است.

const persons = ["Amir", "Ali", "Reza"];

const persons = [
  "Amir",
  "Ali",
  "Reza"
];

const persons = [];
persons[0]= "Amir";
persons[1]= "Ali";
persons[2]= "Reza";

در Javascript می توان با استفاده از نام آرایه ،کل آرایه نمایش داد.

const persons = ["Amir", "Ali", "Reza"];
document.getElementById("demo").innerHTML = persons;

نکته: آرایه توالی از متغیر ها است.

 هر خانه آرایه، دارای یک شماره برای دسترسی به مقدار آن خانه است. که به آن ایندکس (index) گفته می شود.

نکته: ایندکس آرایه از 0 شروع می شود.

برای فراخوانی یک خانه آرایه، باید از نام آرایه به همراه ایندکس آن خانه استفاده کرد.

const persons = ["Amir", "Ali", "Reza"];
persons[1]; // Ali

برای دسترسی به اولین خانه آرایه، از ایندکس 0 استفاده می کنیم.

const persons = ["Amir", "Ali", "Reza"];
persons[0]; // Amir

با استفاده از ویژگی length در ادامه نام آرایه می توان تعداد خانه های آرایه را بدست آورد.

const persons = ["Amir", "Ali", "Reza"];
let len = persons.length; // 3

در نمونه کد بالا، طول آرایه، 3 است. اما ایندکس های آرایه شامل:

• ایندکس 0: Amir
• ایندکس 1: Ali
• ایندکس 2: Reza

است. به عبارت دیگر آخرین ایندکس آرایه برابر طول آرایه منهای یک است.

نکته: همیشه ایندکس اولین خانه آرایه 0 است. ولی چون آرایه ها، طول متفاوتی دارند، ایندکس خانه آخر آنها یکسان نیست.

برای دسترسی به آخرین خانه آرایه، از فرمول طول آرایه منهای یک (array.length - 1) استفاده می کنیم.

const persons = ["Amir", "Ali", "Reza"];
persons[persons.length - 1]; // Reza

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

const persons = ["Amir", "Ali", "Reza"];
persons[0] = "Ehsan"; // خانه صفرم ویرایش شد

کاربرد اصلی آرایه در استفاده از ویژگی ها و متد ها است.

persons.length; //  تعداد خانه های آرایه را نمایش می دهد 
persons.push("Ehsan"); //  افزودن المان جدید به آرایه
persons.sort(); //  آرایه را مرتب می کند

نکته: برای اطلاعات بیشتر به آموزش متدهای آرایه JS مراجعه کنید.

نکته: برای اطلاعات بیشتر به آموزش متدهای جستجو آرایه JS مراجعه کنید.

نکته: برای اطلاعات بیشتر به آموزش متدهای مرتب سازی آرایه JS مراجعه کنید.

با استفاده از متد push() می توان المان جدیدی به انتها آرایه اضافه کرد.

const persons = ["Amir", "Ali", "Reza"];
persons.push("Ehsan"); //  افزودن المان جدید

همچنین می‌توان با استفاده از ویژگی length، مقدار جدیدی را به آرایه اضافه کرد.

const persons = ["Amir", "Ali", "Reza"];
persons[persons.length] = "Ehsan"; 

نکته: آخرین ایندکس آرایه با فرمول array.length - 1 بدست می آید. بنابراین ایندکس جدید که هنوز ساخته نشده است را می توان با فرمول array.length بدست آورد.

نکته: با اضافه کردن المان جدید با ایندکس بالاتر، یک حفره undefined در آرایه ایجاد می شود. برای درک بهتر نمونه کد زیر را مشاهده کنید.

const persons = ["Amir", "Ali", "Reza"];
persons[10] = "Ehsan"; 

با استفاده از عملگر typeof می توان نوع متغیر را برگرداند. اما عملگر typeof وقتی روی آرایه اعمال شود، object برگردانده می شود.

const persons = ["Amir", "Ali", "Reza", "Ehsan"];
typeof persons;

نکته: در JS آرایه نوعی object است. و نوع داده ای به نام آرایه وجود ندارد.

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

const persons = ["Amir", "Ali", "Reza", "Ehsan"];
Array.isArray(persons);

با استفاده از عملگر instanceof نیز می توان تشخیص داد آیا شیء آرایه هست یا خیر.

const persons = ["Amir", "Ali", "Reza", "Ehsan"];
persons instanceof Array;

نکته: عملگر instanceof معمولاً برای اطمینان از نوع داده، قبل از انجام عملیات استفاده می‌شود.

همانطور که در بخش بالا دیدید با عملگر typeof متوجه شدیم آرایه نوع خاصی از شیء است.

اما تفاوت آرایه با شیء چیست؟

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

const person = ["Ehsan", "Eslami", 31];
person[0];  // Ehsan

اشیا از ایندکس غیر عددی (حروف و عدد) برای دسترسی به خانه های خود استفاده می کنند.

const person = {firstName: "Ehsan", lastName: "Eslami", age: 31};
person['firstName'];  // Ehsan

نکته: آرایه ها نوع خاصی از اشیاء هستند که ایندکس عددی دارند. در واقع در JS آرایه جفتی (assocative array) وجود ندارد. و آرایه جفتی همان object در نظر گرفته می شود. 

نکته: ساختار جفتی یا assocative در واقع ساختار نام: مقدار (name: value) است. مثلا در CSS تمام ویژگی ها از ساختار جفتی پیروی می کنند.

حلقه ها می توانند یک کار را به تعداد مشخص شده تکرار کنند.

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

حلقه for  یکی از پرکاربرد ترین حلقه های تکرار در اکثر زبان برنامه نویسی است. 

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

for (let i=0; i<persons.length; i++) {
    persons[i];
}

یکی دیگر از حلقه ها، حلقه Array.forEach() است.

persons.forEach(function (value) {
    value;
});

نکته: برای اطلاعات بیشتر به آموزش متدهای تکرار آرایه JS مراجعه کنید.

نکته: برای اطلاعات بیشتر به آموزش حلقه ها JS مراجعه کنید.

آرایه ها می توانند، اشیاء و آرایه ها را به صورت تو در تو (nested) ذخیره کنند.

برای دسترسی به آرایه های داخل آرایه، می توان از ایندکس آن به صورت تودرتو استفاده کرد.

برای درک بهتر به نمونه کد زیر توجه کنید.

const persons = [
    [ // persons[0]
        'ehsan', // persons[0][0]
        'eslami',
        '30',
    ], [ // persons[1]
        'mahsa', // persons[1][0]
        'fallah',
        '25',
    ]
];

persons[0][0];  //  ehsan
persons[1][0];  //  mahsa
persons[1][2];  //  25

const persons = [
    {
        'name': 'ehsan',
        'family': 'eslami',
        'age': '30',
    }, {
        'name': 'mahsa',
        'family': 'fallah',
        'age': '25',
    }
];

persons[0]['name'];  //  ehsan
persons[1]['name'];  //  mahsa
persons[1]['age'];  //  25

در بیشتر موارد برای ساخت آرایه از const استفاده می شود.

نکته: همانطور که قبلا گفته شد، داده const ثابت است و غیر قابل تغییر به همین دلیل در نمونه کد زیر ارور دریافت می کنیم.

const persons = ["Ehsan", "Ali", "Reza"];
persons = ["Amir", "Parsa"];  //  ارور

const persons = ["Ehsan", "Ali", "Reza"]; 
persons[0] = "Parsa";  //  تغییر مقدار آرایه
persons.push("Iman");  //  اضافه کردن مقدار به آرایه

نکته: برخلاف تصور، هنگامی که یک آرایه با const ایجاد می کنیم، مقادیر آرایه قابل تغییر هستند و حتی می توانیم به آرایه، المان های جدید اضافه کنیم.

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

• نمی توانیم آرایه را مقداردهی مجدد (reassignment) کنیم.
• نمی توانیم آرایه را بازتعریف (redeclare) کنیم.

ولی می توانیم:

• المان آرایه را ویرایش کنیم.
• المان جدید به آرایه اضافه کنیم.