گاهی در برنامه مان با لیستی از اقلام یا اصطلاحا آیتم ها مواجه هستیم مثل لیست محصولات در سبد خرید یا لیست رنگ های انتخاب شده توسط کاربر. برای ذخیره و نگهداری یک لیست، از آرایه استفاده می کنیم.
فرض کنید که می خواهیم لیست رنگ های انتخاب شده توسط کاربر را ذخیره و نگهداری کنیم. مطابق کد زیر متغیری به نام selectedColors تعریف کنید. یادآوری می کنم نام هاییکه برای متغیرها انتخاب می کنید حتما توصیفی و معنادار باشند:
let selectedColors = [];
مقدار [ ] را اصطلاحا یک Array Literal گویند. ما بین [ ] عناصر آرایه قرار می گیرند. آرایه selectedColors را مطابق زیر مقداردهی اولیه کنید و سپس یک لاگ از آن بگیرید:
let selectedColors = ['red', 'blue']; console.log(selectedColors);
حالا اگر به کنسول مرورگرتان مراجعه کنید آرایه selectedColors را در خروجی مشاهده خواهید نمود. بر روی علامت مثلثی شکل سمت چپ آرایه در کنسول کلیک کنید تا مقدار آرایه در خروجی به صورت مبسوط نمایش داده شود:
اگر دقت کنید در کنار هر آیتم ذخیره شده در آرایه یک شاخص (اندیس/index) عددی می بینید. این شاخص شماره خانه ای از آرایه که آیتم در آن قرار گرفته است را نشان می دهد. شماره خانه های یک آرایه از عدد صفر شروع می شود بنابراین:
نکته: شماره/اندیس اولین خانه هر آرایه برابر صفر است.
احتمالا می پرسید این اندیس ها به چه کار می آیند؟ از اندیس ها برای دستیابی به آیتم های ذخیره شده در یک آرایه استفاده می شود مثلا اگر بخواهیم اولین آیتم آرایه selectedColors را در خروجی نمایش دهیم به صورت زیر عمل می کنیم:
console.log(selectedColors[0]);
اگر به کنسول مروگر بروید مقدار red را در خروجی خواهید دید.
سایز (Length) یک آرایه مقداری پویاست یعنی به موازات حذف/اضافه آیتم به آن، سایز/طول آن نیز تغییر می یابد. تا بدینجا طول آرایه selectedColors برابر با 2 می باشد. حالا اگر بخواهیم آیتم سومی را به آن اضافه کنیم، می نویسیم:
selectedColors[2] = 'green';
چون شماره گذاری خانه های آرایه از صفر شروع می شود بنابراین شماره خانه سوم آرایه برابر با 2 خواهد بود.
در پست مفاهیم پایه جاوا اسکریپت - نوع های داده ای، گفت شد که جاوا اسکریپت یک زبان برنامه نویسی پویاست به این معنی که نوع داده ای متغیرها در زمان اجرا و براساس مقدارشان تعیین می شود. نوع داده ای آیتم هاییکه در یک آرایه قرار می گیرند نیز پویاست و می تواند با یکدیگر متفاوت باشد و برخلاف سایر زبان های برنامه نویسی که تمامی عناصر یک آرایه بایستی هم نوع باشند، در جاوا اسکریپت آیتم هایی با نوع های داده ای متفاوت را می توان در یک آرایه ذخیره نمود. بر همین اساس شما می توانید مثلا مقدار خانه سوم آرایه selectedColors را به آیتمی با نوع داده ای متفاوت از مابقی آیتم ها تغییر دهید مثلا آیتمی با نوع داده ای Number:
selectedColors[2] = 1; console.log(selectedColors);
به لحاظ فنی در جاوا اسکریپت، آرایه در حقیقت یک آبجکت است. برای اثبات این موضوع کافیست تا از آرایه selectedColors یک typeof بگیرید:
console.log(typeof selectedColors);
می بینید که در خروجی کنسول مرورگر مقدار object نمایش داده می شود. حالا که هر آرایه یک آبجکت است پس حتما دارای یک سری property هم هست اما بر خلاف آبجکت مثال person که در پست مفاهیم پایه جاوا اسکریپت - آبجکت ایجاد کردیم، این property ها را ما صراحتا برای آرایه تعریف نمی کنیم بلکه هربار که آرایه ای تعریف می کنیم خودش به طور خودکار آن ها را به طریقی از جایی به ارث می برد. آینده که به موضوع prototype ها پرداختم درباره نحوه ی این ارث بری نیز توضیحات لازم را بیان خواهم نمود. برای مشاهده لیست property ها و متدهای یک آرایه کافیست نام آرایه موردنظر را نوشته و مقابل آن کاراکتر نقطه را درج کنیم تا لیست آن ها برایمان نمایش داده شود مثل زیر:
بنابراین برای دسترسی به property های یک آرایه می توانیم از روش Dot Notation استفاده کنیم. به عنوان مثال خصوصیت length، طول/سایز آرایه را نشان می دهد یعنی تعداد عناصر ذخیره شده در آرایه:
console.log(selectedColors.length);
مقدار 3 را در خروجی مشاهده خواهید نمود. در آینده راجع به انواع عملیات قابل اجرا بر روی یک آرایه به طور مفصل صحبت خواهم کرد اما برای آشنایی با آرایه به عنوان یکی از مفاهیم پایه جاوا اسکریپت همین حد کفایت می کند. خلاصه اینکه آرایه یک ساختار داده ای (Data Structure) می باشد که از آن برای ذخیره و نگهداری لیستی از آیتم ها استفاده می شود.
در مقاله بعدی فصل دوم دوره آموزش جاوا اسکریپت برای مبتدی ها، به موضوع زیر خواهیم پرداخت :
