آرایه JS

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

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

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

let person1 = "Amir";
let person2 = "Ali";
let person3 = "Reza";
document.getElementById('demo').innerHTML = person1 + ' , ' + person2 + ' , ' + person3;

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

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

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

let person = ["Amir", "Ali", "Reza"];
document.getElementById('demo').innerHTML = person;

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

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

let person = ["Ehsan", "Benz", 30, Date.now()];
document.getElementById('demo').innerHTML = person;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const person = ["Ehsan", "Eslami", 31];
document.getElementById("demo").innerHTML = person[0];

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

const person = {firstName:"Ehsan", lastName:"Eslami", age:31};
document.getElementById("demo").innerHTML = person['firstName'];

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

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

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

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

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

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

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

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

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

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

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

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

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

const persons = [
    [
        'ehsan',
        'eslami',
        '30',
    ], [
        'mahsa',
        '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 persons = ["Ehsan",  "Ali" , "Reza"];
persons = ["Amir", "Parsa"];  //  ارور

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

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

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

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

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

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

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