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

Array (اَرِی) یکی از اصلی‌ترین بخش‌های هر زبان برنامه‌نویسی است به طوری که اگر بخواهیم مجموعه‌ای از داده‌ها را در کنار یکدیگر ذخیره سازیم، از آرایه استفاده خواهیم کرد.

در آموزش آشنایی با مفهوم متغیر در زبان برنامه‌نویسی جاوااسکریپت، راجع به متغیرهایی صحبت کردیم که دارای محتوای جدا و مستقل بودند. مثلاً متغیر "var myName = "Sahand یا متغیر عددی var firstNum = 7 همگی دارای یک محتوای مستقل از سایرین هستند اما برخی اوقات پیش می‌آید که می‌خواهیم تعدادی آیتم را در کنار یکدیگر و در یک مجموعه نگهداری کنیم که برای نمونه داریم:

- لیست خواننده‌های مورد علاقه
- لیست زبان‌های برنامه‌نویسی که بلد هستیم
- لیست برترین فیلم‌های سال
- لیست تاریخ تولد افراد خانواده
- لیست خرید هفتگی
- لیست کارهای روزانه
- لیست اهدافی که برای سال جدید برای خود تعیین می‌کنیم و ... 

اگر بخواهیم با استفاده از متغیرها چنین لیست‌هایی را ایجاد کنیم، باید هر کدام از آن‌ها را تک به تک در یک متغیر جداگانه تعریف کنیم چرا که متغیرها فقط می‌توانند یک داده را در خود ذخیره کنند. برای مثال، لیست خرید هفتگی ما به صورت زیر در خواهد آمد:

var item1 = "Bread";
var item2 = "Coke";
var item3 = "Cheese";
var item4 = "Rice";
var item5 = "Chocolate";

شاید این روش در کوتاه‌مدت و در برنامه‌های بسیار کوچک کاربرد داشته باشد اما مطمئناً پس از مدتی با مشکل مواجه خواهیم شد. مثلاً فرض کنید که بخواهیم این لیست خرید هفتگی را بر اساس حروف الفبا مرتب کنیم (کاری دشوار و زمان‌بر که در آن ضریب خطای ما هم بالا خواهد رفت.) زبان جاوا اسکریپت و البته هر زبان برنامه‌نویسی دیگری به ما اجازه می‌دهد که لیستی از داده ها را در کنار یکدیگر و در زیر چتر یک متغیر خاص ذخیره کنیم که تحت عنوان Array یا «آرایه» شناخته می‌شوند.

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

قوانین ساخت آرایه‌ها
هر آرایه از چند Element (عضو) تشکیل شده است و هر عضو در یک آرایه دارای نام اختصاصی خودش است که با نام آرایه به همراه عدد اندیس آن عضو داخل علائم [ ] نشان داده می‌شود.  آرایه‌ها برای شناسایی زیرمجموعه‌های خود به هر کدام از عضوها یک عدد اختصاص می‌دهند که به این عدد Index (اندیس) گفته می‌شود.

برای آنکه بهتر بتوانیم این موضوع را متوجه شویم، ابتدا یک آرایه می‌سازیم. برای ساختن یک آرایهٔ جدید، جاوااسکریپت دو راه پیش روی ما می‌گذارد:

- ساخت آرایه به روش Literal Notation 
- استفاده از کلیدواژهٔ new در کنار آبجکت ()Array

ساده‌ترین روش برای ساخت آرایه در جاوااسکریپت اصطلاحاً Literal Notation نامیده می‌شود به این شکل که در یک وهله تمامی المنت‌ها را ایجاد کنیم. به طور مثال، آرایهٔ لیست خرید هفتگی را می‌توان به صورت به یک آرایه تبدیل کرد:

var myArray = ["Bread", "Coke", "Cheese", "Rice", "Chocolate"];

این روش هیچ نیازی به کلیدواژهٔ خاصی ندارد و صرفاً با قرار دادن علائم [] می‌توانید آرایهٔ مد نظر خود را بسازید. به علاوه، این روش دارای تعداد کلمات و کد کمتری است و زمانی که بخواهید کدهای جاوااسکریپت خود را به مرتب‌ترین و ساده‌ترین شکل ممکن بنویسید، حذف هر تکهٔ کوچک از کد می‌تواند تأثیرگذار باشد. حال اگر بخواهیم اندیس‌های آرایه فوق را بهتر متوجه شویم، می‌توان آن‌ها را به صورت زیر متصور شد:

myArray[0] = "Bread";
myArray[1] = "Coke";
myArray[2] = "Cheese";
myArray[3] = "Rice";
myArray[4] = "Chocolate";

در این آرایه، عضو یا اِلِمنتی که در شمارهٔ ایندکس صفر قرار دارد دارای مقدار Bread است و عضوی با اندیس چهار مقدار Chocolate را در خود ذخیره کرده است. همین آرایه را می‌توان با استفاده از آبجکتی به اصطلاح Built-in در زبان جاوااسکریپت تحت عنوان ()Array ایجاد کرد:

var myArray = new Array("Bread", "Coke", "Cheese", "Rice", "Chocolate");

همان‌طور که در کد فوق ملاحظه می‌شود، ابتدا با استفاده از کلیدواژهٔ var و انتخاب یک نام برای آرایهٔ خود همچون myArray این آرایه را ایجاد کرده سپس یک علامت = قرار دادیم و از کلیدواژهٔ new که برای ساخت یک آبجکت جدید به کار می رود استفاده نموده و ()Array را نوشته و مقادیر مد نظر خود را با استفاده از کاما از یکدیگر مجزا کرده و برایش در نظر گرفته‌ایم.

همانند هر متغیر دیگری، آرایه‌ها هم می‌توانند هر اسمی که ما بخواهیم داشته باشند (البته تا زمانی که خلاف قوانین نام‌گذاری جاوااسکریپت مثلاً استفاده از کلمات رزروشده‌ای مثل function یا if نباشند.) بدین ترتیب، با انتخاب تنها یک اسم برای آرایه، می‌توانیم لیست تقریباً نامحدودی از داده‌ها را در داخل آن ذخیره کنیم. در عین حال، محدودیتی برای تعداد اعضای قابل‌ذخیره در یک آرایه وجود دارد به طوری که هر آرایه می‌تواند نهایتاً 4/294/967/295 المنت را در خود نگاه دارد.

در کنار قوانین نام‌گذاری، آرایه‌ها چند قانون و خصوصیت دیگر دارند که باید با آن‌ها آشنا باشیم. اول اینکه بر خلاف ریاضیات روزمره که شمارش خود را از یک آغاز می‌کنیم، اندیس‌ها در آرایه‌ها از صفر شروع می‌شوند (به بیانی دیگر، اولین عضو آرایه اندیس صفر دارد و دومین عضو اندیس یک را در اختیار دارد و به همین ترتیب تا انتها پیش می‌رود. پس به خاطر داشته باشید که برای مثال [myArray[3 در حقیقت عضو چهارم آرایه است نَه عضو سوم آن!) و دوم هم اینکه آرایه می‌تواند هر دیتا تایپی را در خودش ذخیره سازد.

آشنایی با انواع دیتا تایپ‌هایی که می‌توان در آرایه‌ها ذخیره کرد
هر عضور آرایه می‌تواند هر نوع داده‌ای که بخواهد را در خود نگاه دارد (برای آشنایی بیشتر با دیتا تایپ‌ها، به به آموزش آشنایی با انواع Data Type در زبان برنامه‌نویسی جاوااسکریپت مراجعه نمایید.) همچنین امکان ذخیرهٔ یک آرایه درون آرایه‌ای دیگر هم وجود دارد مضاف بر اینکه می‌توان فانکشن‌ها و آبجکت‌ها را نیز به عنوان یک عضور درون آرایه‌ای ذخیره کرد که با این تفاسیر تقریباً داده‌ای باقی نمی‌ماند که نتوانیم آن را درون آرایه بریزیم! علاوه بر امکان ذخیرهٔ هر نوع داده‌ای در یک آرایه، می‌توانیم انواع مختلف داده را در کنار هم داخل یک آرایه داشته باشیم به طوری که برای مثال داریم:

var item = new Array(); //or we can use var item = [];
item[0] = "Havij";
item[1] = 6 + 8;
item[2] = 9;
item[3] = item[2] * item[1];

همین‌طور که می‌بینیم، تمامی این داده‌ها داخل آرایه‌ای با نام item ذخیره شده‌اند. به عبارتی، ابتدا به ساکن یک آرایه تعریف کرده‌ایم تحت عنوان item که خالی است (برای ساخت آرایه همان طور که ملاحظه می شود، هم می توان از آبجکت ()Array استفاده کرد و هم از یک جفت علامت [] استفاده نمود.) سپس تک‌تک اندیس‌های آرایهٔ خود را مقداردهی کرده‌ایم.

عضو اول با اندیس صفر استرینگ Havij را در خود ذخیره کرده، عضور دوم با اندیس یک جمع دو عدد را در خود نگاه داشته و عضو سوم هم صرفاً حاوی یک دادهٔ عددی است. همچنین المنت آخر که عضو چهارم با اندیس سه است در حقیقت یک نوع فانکشن کوچک است که مقادیر دو عضو دیگر را ضرب کرده و جواب آن را در خود ذخیره کرده است.

چگونه اطلاعات را در آرایه ذخیره کنیم؟
زمانی که یک آرایه ایجاد می‌کنیم، می‌توان در همان ابتدا و زمان ساخت مقادیری نیز داخل آن قرار داد (مانند مثال‌های بالا) اما امکان اضافه کردن مقادیر در زمان‌های بعد نیز وجود دارد و می‌توان در ابتدا یک آرایه‌ٔ خالی ایجاد کرده و در آینده آن را مقداردهی کنیم. اضافه کردن اِلِمنت‌ها یا مقادیر به یک آرایه دقیقاً مانند ساختن و یا ویرایش کردن متغیرها است با این تفاوت که برای قرار دادن یک مقدار جدید در آرایه باید اندیس محل قرارگیری آیتمی که می‌خواهیم بسازیم یا ویرایش کنیم را نیز مشخص کنیم. در مثال زیر، یک آرایهٔ خالی ساخته‌ایم سپس مقادیر دلخواه‌مان را به آن اضافه نموده‌ایم:

var peopleList = [];
peopleList [0] = "Bill Gates";
peopleList [1] = "Steve Jobs";

بدین ترتیب این مقادیر به صورت پشت‌سرهم در آرایهٔ peopleList ذخیره می‌شوند چرا که شمارهٔ اندیس آن‌ها پشت‌سرهم است. در عین حال، همیشه مجبور نیستیم که ترتیب این اعداد را در زمان افزودن مقادیر رعایت کنیم به طوری که مثلاً در همین آرایه می‌توان آیتمی را در اندیس سیزده اضافه کرد:

peopleList [13] = "Sahand";

اکنون که شمارهٔ اندیس‌های دو تا دوازده را پشت سر گذاشته و مقدار خود را در اندیس سیزده قرار داده‌ایم، خانه‌های بین دو تا سیزده دارای فضای خالی خواهند بود. 

حال اگر بخواهیم اندازهٔ آرایه peopleList را مشاهده کنیم، با کمال تعجب خواهیم دید که از نظر جاوااسکریپت اندازهٔ این آرایه برابر با چهارده است:

peopleList.length; //returns 14

length یکی از فانکشن‌های اصطلاحاً Built-in (از پیش تعریف شده) در جاوااسکریپت است که این وظیفه را دارا است تا تعداد اندیس‌های یک آرایه را شمارش کند. با آنکه ما مقادیری در خانه‌های دو الی دوازده قرار ندادیم اما جاوااسکریپت برای محاسبهٔ اندازهٔ این آرایه با استفاده از دستور length به آخرین اندیسی که در آن اطلاعات ثبت شده نگاه می‌کند و تعداد اِلِمنت‌های قرار داده شده در آرایه را نمی‌شمارد!

نه تنها می‌توان یک آرایه را به عنوان یک اِلِمنت در داخل آرایه‌ای دیگر ذخیره کرد، بلکه می‌توان چند آرایه را در کنار همدیگر نیز ایجاد نمود که به این آرایهٔ جدیدی که چندین آرایه را به صورت هم‌زمان در کنار هم دارد، Multidimensional Array (آرایهٔ چند بُعدی) می‌گویند. برای ایجاد این نوع از آرایه‌ها، فقط کافی است تا به ازای هر بُعد یا آرایهٔ جدیدی که اضافه می‌کنیم، یک جفت [] جدید نیز بگذاریم. به بیانی دیگر:

var listOfLists [0][0];

شاید در ابتدای راه تصور کردن آرایه‌های چندبُعدی کمی دشوار باشد اما بهتر است این‌گونه به آرایه‌های چندبُعدی نگاه کنید که هر بُعد از این آرایه یک لیست جداگانه است و این لیست‌ها همگی در زیر پرچم یک آرایهٔ بزرگ‌تر که شامل همهٔ آن‌ها می‌شود قرار دارند. برای مثال، لیست‌های زیر را در نظر بگیریم:

1. فصل‌ها
1.1. بهار
1.2. تابستان
1.3. پاییز
1.4. زمستان
2. رنگ‌ها
2.1. آبی
2.2. سبز
2.3. قرمز
3. وضعیت هوا
3.1. آفتابی
3.2. ابری
3.3. بارانی

فرض کنیم که این سه لیست را در یک مجموعه به نام ourWorld قرار داده‌ایم. هر کدام از لیست‌ فصل‌ها، رنگ‌ها و وضعیت هوا خود یک آرایهٔ جداگانه بوده و چند زیرمجموعه دارد، اما آرایهٔ بزرگ‌تر که این آرایه‌های کوچک‌تر را در داخل خود جای می‌دهد یک آرایهٔ چند بُعدی یا Multidimensional Array نامیده می‌شود به طوری که تکه کد زیر این آرایه را ایجاد می‌کند:

var ourWorld = [[], [], []];
ourWorld[0][0] = "Seasons";
ourWorld[0][1] = "Spring";
ourWorld[0][2] = "Summer";
ourWorld[0][3] = "Fall";
ourWorld[0][4] = "Winter";
ourWorld[1][0] = "Colors";
ourWorld[1][1] = "Blue";
ourWorld[1][2] = "Green";
ourWorld[1][3] = "Red";
ourWorld[2][0] = "Weather";
ourWorld[2][1] = "Sunny";
ourWorld[2][2] = "Cloudy";
ourWorld[2][3] = "Rainy";

در اولین خط از این کد، به جای آنکه مانند آرایه‌های تک‌بُعدی از یک جفت [] خالی استفاده کنیم، سه جفت [] خالی را در داخل [] اصلی قرار داده‌ایم که بدین ترتیب یک آرایهٔ چند‌بُعدی (براکت‌های بیرونی) خواهیم داشت که سه آرایهٔ دیگر (براکت‌های درونی) را شامل می‌شود. به بیانی ساده‌تر، هر کدام از جفت براکت‌های خالی نشانگر یک آرایهٔ درونی هستند که در آینده مقداردهی خواهند شد.

اکنون که آرایهٔ چندبُعدی خود (در این مثال، دوبُعدی) را ایجاد کرده‌ایم، شروع به مقداردهی می‌کنیم اما پیش از این کار بیایید ساختار این آرایهٔ چندبُعدی را بررسی کنیم. شمارهٔ زیرمجموعه‌های این آرایه مثل تمامی آرایه‌های دیگر از صفر شروع می‌شود و به همین خاطر اولین آرایهٔ درونی (لیست فصل‌ها) در اندیس صفر یا همان خانهٔ اول قرار می‌گیرد:

ourWorld[0][0] = "Seasons";

این خانه که در بُعد یا لایهٔ اول قرار گرفته، یک سرگروه برای مقادیر «بهار»، «تابستان»، «پاییز» و «زمستان» محسوب می‌شود؛ پس اگر بخواهیم زیرمجموعه‌های فصل‌ها را نیز وارد کنیم، می‌بایست یک لایه پایین‌تر رفته و بُعد جدیدی ایجاد کنیم:

ourWorld[0][1] = "Spring";
ourWorld[0][2] = "Summer";
ourWorld[0][3] = "Fall";
ourWorld[0][4] = "Winter";

در این قسمت، به جای آنکه اندیس براکت اول (از سمت چپ) را زیاد کنیم، اندیس براکت دوم را به ترتیب اضافه می‌کنیم تا در حقیقت به لایهٔ دوم یا به عبارتی «زیرمجموعه‌های لایهٔ بالاتر» دسترسی پیدا کنیم. همین روال تا پایان کد ادامه پیدا کرده و سرگروه‌ها به همراه زیرمجموعه‌های‌شان به ترتیب تعریف شده‌اند (پس از آنکه آرایهٔ درونی Seasons را ایجاد کردیم، باید به سراغ آرایهٔ درونی بعدی یعنی Colors برویم که برای این کار، اندیس براکت‌های اولی از سمت چپ یک واحد افزایش پیدا می‌کند. این کار ما را به ابتدای آرایهٔ جدید می‌برد و از همین روی اندیس زیرمجموعه‌ها (براکت‌های دوم) نیز باید از اول یا همان صفر شروع شود.)

حال اگر بخواهیم یکی از آرایه‌های درونی را به همراه تمام زیرمجموعه‌هایش صدا بزنیم، باید صرفاً شمارهٔ اندیس سرگروه یا همان لایهٔ اول را فراخوانی کنیم:

console.log(ourWorld[0]); //returns ["Seasons", "Spring", "Summer", "Fall", "Winter"]

همان‌طور که مشاهده می‌کنید، آرایهٔ Seasons و اعضایش داخل آرایهٔ اصلی یعنی ourWorld ذخیره شده‌اند و با فراخوانی اندیس آرایهٔ درونی، زیرمجموعه‌های آن نیز نمایش داده می‌شوند.

در اغلب اوقات هدف از ایجاد یک آرایه آن است که در آینده به زیرمجموعه‌هایش دسترسی داشته باشیم و آن‌ها را اصطلاحاً Call یا «فراخوانی» کنیم. فراخوانی اعضای یک آرایه دقیقاً همانند نحوهٔ مقداردهی اعضای آن است؛ بدین شکل که نام آرایهٔ اصلی را می‌نویسیم سپس به کمک براکت‌ها و شمارهٔ اندیس عضوی که در نظر داریم آن را فراخوانی می‌کنیم. مثلاً برای آنکه به سومین عضو آرایه‌ای به اسم myArray دسترسی پیدا کنیم، باید نام آن را نوشته سپس داخل براکت‌های جلوی آن شمارهٔ اندیس دو را وارد کنیم چرا که با شروع شدن شمارش اندیس‌ها از صفر، عضو سوم برابر عدد دو خواهد بود:

myArray[2];

اگر آرایهٔ اصلی ما یک آرایه چندبُعدی (Multidimensional) بود، برای آنکه به اعضای درونی‌تر دسترسی پیدا کنیم باید یک جفت براکت دیگر اضافه کنیم. در حقیقت، در ازای هر بُعد از آرایه یک جفت براکت نیز به جلوی نام آن اضافه خواهد شد. برای نمونه، در آرایهٔ ourWorld که یک آرایهٔ دوبُعدی بود، برای آنکه به رنگ «قرمز» در داخل مجموعهٔ رنگ‌ها دسترسی پیدا کنیم، باید به شکل زیر عمل کنیم:

ourWorld[1][3];

در اینجا، براکت‌های اول نشان‌دهندهٔ بُعد اول آرایه هستند که شامل Seasons ،Colors و Weather می‌شوند و جفت براکت‌های دوم، که بُعد دوم آرایه را تشکیل می‌دهند، یک لایه پایین‌تر را هدف قرار می‌دهند که شامل تمامی زیرمجموعه‌های لایه‌های بالاتر می‌شوند.

بدین ترتیب، تکه کد بالا به جاوااسکریپت دستور می‌دهد که از میان آرایه‌های درونی، آرایهٔ Colors را انتخاب کند که با [1] هدف قرار داده می‌شود سپس به سراغ زیرمجموعهٔ Red از آن آرایه برود که با [3] هدف قرار داده شده است. 

اکنون برای آنکه با کاربرد آرایه‌ها کمی بیشتر آشنا شویم، بیایید یک آرایهٔ جدید با مقادیر یا اعضای عددی ایجاد کنیم:

var myNumbers = [22, 44, 77, 99];

از آنجایی که این آرایه تنها یک بُعد دارد، برای فراخوانی اعضای آن نیز تنها از یک جفت براکت استفاده می‌کنیم. در این آرایه چهار عضو مختلف وجود دارد که بدین ترتیب اولین عضو شمارهٔ اندیس صفر و آخرین عضو شمارهٔ اندیس سه را در اختیار خواهند داشت (شمارهٔ اندیس اعضای یک آرایه به صورت پیش‌فرض یک شماره از شمارش اعداد طبیعی کمتر است مگر آنکه خودمان دستور دهیم که شمارش از عدد یک آغاز شود.) حال می‌توانیم با کدهای زیر اعضای آرایهٔ myNumbers را فراخوانی کنیم:

myNumbers[0]; //returns 22
myNumbers[1]; //returns 44
myNumbers[2]; //returns 77
myNumbers[3]; //returns 99

حال پرسش اینجا است که «اگر در داخل براکت‌ها از شمارهٔ اندیسی استفاده کنیم که در محدودهٔ آرایه وجود ندارد، چه اتفاقی خواهد افتاد؟» مثلاً با اینکه این آرایه چهار عضو بیشتر ندارد، شمارهٔ اندیس شش چه چیزی را باز خواهد گرداند:

myNumbers[6]; //returns undefined

همان‌طور که انتظار می‌رود، مفسر جاوااسکریپت به ما می‌گوید که این عضو تعریف نشده یا به عبارتی undefined است. 

از آنجایی که آرایهٔ myNumbers فقط شامل اعضای عددی می‌شود، می‌توانیم از جاوااسکریپت بخواهیم که تمامی اعضای داخل این آرایه را با هم جمع کرده و به ما نشان دهد. ابتدا بیایید فرض کنیم که جاوااسکریپت این کار را برای ما انجام داده و جواب را نیز محاسبه کرده است. این جواب باید در محلی یا متغیری ذخیره شود تا بتوان آن را به کاربر نشان داد چرا که راه ارتباطی جاوااسکریپت با ما از طریق همین ابزار است و به همین دلیل قبل از آنکه محاسبات جمع را شروع کنیم، یک متغیر ساخته سپس از جاوااسکریپت می‌خواهیم که محاسبات را در داخل همین متغیر انجام دهد و جوابش را نیز در داخل همان متغیر ذخیره کند:

var totalSum = myNumbers[0] + myNumbers[1] + myNumbers[2] + myNumbers[3];

در اینجا باید دقت کنیم که در داخل براکت‌ها، خودِ مقدار مد نظر را ننویسیم. تکه کد بالا عملیات ریاضیاتی 99 + 77 + 44 + 22 را انجام داده و نتیجهٔ آن را در متغیر totalSum ذخیره می‌کند. اکنون برای مشاهدهٔ نتیجهٔ کار، کافی است از totalSum بخواهیم که مقدار خود را برای ما آشکار کند:

totalSum; //returns 242

منظور از Property چیست؟
پراپرتی در یک آرایه به نوعی همان خصوصیات و جزئیات آرایه است که اطلاعاتی را دربارهٔ کلیت آرایه در اختیارمان می‌گذارد و امکان افزودن قابلیت‌هایی به آن را نیز فراهم می‌کند. در زبان جاوااسکریپت برای آنکه بتوان با پراپرتی‌های یک آرایه کار کرد، باید با استفاده از روشی به نام Dot Notation آن‌ها را فراخوانی کرد. شاید نام این روش کمی گیج‌کننده باشد اما استفاده از آن بسیار آسان است؛ ابتدا نام آرایه را می‌نویسیم، سپس یک نقطه در جلوی آن می‌گذاریم سپس نام پراپرتی را می‌آوریم:

myArray.property;

در ادامه، لیست پراپرتی‌های پرکاربردی که آرایه‌ها در زبان جاوااسکریپت می‌توانند داشته باشند را آورده‌ایم:

به کمک پراپرتی prototype می‌توانیم متدها یا پراپرتی‌های جدیدی به آرایه اضافه کنیم. به طور مثال، فرض کنیم که آرایه‌ای به شکل زیر در اختیار داریم:

var myArray = ["banana", "apple", "orange", "watermelon"];

در کد بالا آرایه‌ای ساخته‌ایم تحت عنوان myArray که شامل تعدادی نام میوه است. اکنون می‌خواهیم متدی برای این آرایه طراحی کنیم که بتواند تمامی حروف اعضای آرایه را به حروف بزرگ تبدیل کند سپس این متد به عنوان یک پراپرتی جدید برای آرایهٔ مد نظرمان تعریف شود. در چنین شرایطی، باید از پراپرتی prototype استفاده کنیم:

Array.prototype.goUp =
    function() {
        for (i = 0; i < this.length; i++) {
	    this[i] = this[i].toUpperCase();
        }
    };

تکه کد بالا یک متد جدید با استفاده از پراپرتی prototype ایجاد می‌کند بدین صورت که یک پراپرتی جدید به نام goUp ایجاد شده سپس با استفاده از یک نقطه این پراپرتی را در آرایهٔ myArray به کار می‌بریم. با استفاده از حلقهٔ for تک‌تک حروف اعضای آرایه را خوانده سپس به کمک فانکشن پیش‌فرض جاوااسکریپت تحت عنوان ()toUpperCase آن‌ها را به حروف بزرگ تبدیل کرده‌ایم. نحوهٔ اِعمال این پراپرتی هم به صورت زیر خواهد بود:

myArray.goUp();

حال تمامی حروف اعضای این آرایه به حروف بزرگ تبدیل شده‌اند و اگر اعضای آرایه را فراخوانی کنیم خواهیم داشت:

console.log(myArray); //returns ["BANANA", "APPLE", "ORANGE", "WATERMELON"]

پراپرتی constructor فانکشن سازندهٔ یک آبجکت را به عنوان خروجی اعلام می‌کند (البته باید توجه داشته باشیم که خروجی این پراپرتی اشاره به فانکشن سازندهٔ اصلی دارد نه اسم آن فانکشن که امکان دارد نامی دلخواه از طرف دولوپر باشد.) برای آنکه بهتر این پراپرتی را درک کنیم، بهتر است آن را در قالب یک مثال به کار ببریم:

myArray.constructor; //returns function Array() { [native code] }

پراپرتی constructor همواره خروجی مشابهی خواهد داشت بدین معنا که اگر این پراپرتی را برای متغیرهای عددی استفاده کنید، به جای ()Array در خروجی بالا، عبارت ()Number نمایش داده می شود و باقی عبارات دقیقاً یکسان خواهند بود. 

اساساً کاربرد پراپرتی constructor آن است که یک متغیر را بررسی کرده و ماهیت آن را به ما اعلام کند. در اینجا، خروجی کد به ما می‌گوید که آرایهٔ myArray با استفاده از فانکشن ()Array ایجاد شده و به همین دلیل، یک آرایه است. این پراپرتی زمانی کاربرد خواهد داشت که بخواهیم از نوع و ماهیت یک متغیر اطمینان پیدا کنیم یا در پروسهٔ تأیید اطلاعات از آن استفاده کنیم. 

اما پرکاربردترین پراپرتی جاوااسکریپت، پراپرتی length است که می‌تواند تعداد اعضای آرایه را به ما اعلام کرده یا آنکه تعدادشان را به مقداری خاص محدود کند به طوری که برای نمونه داریم:

var myArray = ["one", "two", "three", "four"];
myArray.length; //returns 4
myArray.length = 2;
myArray.length; //returns 2
console.log(myArray); //returns ["one", "two"]

در این تکه کد، ابتدا یک آرایه با چهار عضو ایجاد کرده‌ایم و زمانی که برای اولین بار از جاوااسکریپت می‌خواهیم تا تعداد اعضای این آرایه را به ما نشان دهد (خط دوم)، عدد 4 نمایش داده می‌شود سپس با استفاده از همان پراپرتی length به جاوااسکریپت می‌گوییم که ماکزیمم تعداد اعضای آرایهٔ myArray باید 2 باشد (خط سوم) و بدین ترتیب زمانی که برای دومین بار تعداد اعضای آرایه را از جاوااسکریپت می‌خواهیم، می‌بینیم که این عدد به 2 کاهش پیدا کرده است و در نهایت اگر اعضای آرایه را چاپ کنیم، متوجه خواهیم شد که فقط دو عضو در این آرایه باقی مانده و سایرین حذف شده‌اند به این دلیل که اگر محدودیتی برای آرایه تعیین نکنیم، آرایه به همان میزان که در آن عضو ایجاد شود بزرگ خواهد شد اما زمانی که با استفاده از پراپرتی length آرایه را مجبور می‌کنیم که فقط به تعداد مشخصی عضو داشته باشد، آن وقت اعضای اضافی از آرایه حذف می‌شوند.

در اینجا، آرایه در ابتدا چهار عضو three ،two ،one و four که همهٔ آن‌ها استرینگ هستند را در اختیار داشت اما زمانی که تعداد اعضای آرایه با استفاده از پراپرتی length محدود شد، فقط دو عضو اول یعنی one و two باقی ماندند تا شرط ما برقرار شود و اندازهٔ آرایه (یا همان تعداد اعضای آن) به 2 کاهش یابد.

آن سوی ماجرا زمانی اتفاق می‌افتد که شما با استفاده از پراپرتی length تعداد اعضای مجاز برای آرایه را بیشتر از مقدار فعلی آن قرار دهید:

var myArray = ["one", "two", "three", "four"];
myArray.length; //returns 4
myArray.length = 10;
myArray.length; //returns 10

در این مورد، آرایهٔ ما در ابتدا دارای چهار عضو بود که پراپرتی length نیز همین موضوع را اعلام می کند (خط دوم) اما زمانی که به آرایه اجازه می‌دهیم تا حداکثر ده عضو را در خود نگهداری کند، یکسری خانه‌ٔ اضافی در آرایه ایجاد می‌شوند؛ هر چند که عضوی در داخل آن‌ها قرار نگرفته باشد و به عبارتی undefined باشند.

به‌کارگیری متدها
متدهای مرتبط با آرایه‌ها در زبان جاوااسکریپت که گاهی اوقات Array Functions نیز نامیده می‌شوند، می‌توانند راهی آسان برای کار با آرایه‌ها و تغییر اطلاعات درون آن‌ها برای ما فراهم کنند. 

سینتکس یا دستورات مورد نیاز برای استفاده از متدها با توجه به هر متد و کاربرد آن متفاوت است. با وجود این، برای دسترسی به کاربرد هر یک از متدهای مرتبط با آرایه‌ها باید از همان روش Dot Notation که در بخش پراپرتی‌ها استفاده می‌کردیم بهره بگیریم. در جدول زیر، برخی از رایج‌ترین متدهای مرتبط با آرایه‌ها در زبان جاوااسکریپت را به همراه توضیح‌شان آورده‌ایم:

اکنون برای آنکه با این متدها بیشتر آشنا شویم، در ادامه برخی از آن‌ها که نیاز به توضیح اضافی دارند را با ذکر مثال بررسی می‌کنیم.

همان‌طور که گفته شد، از متد ()concat برای به هم چسباندن دو آرایه استفاده می‌شود به طوری که برای نمونه داریم:

var fruits = ["Banana", "Orange", "Apple"];
var drinks = ["Milk", "Water", "Juice"];
fruits.concat(drinks); //returns ["Banana", "Orange", "Apple", "Milk", "Water", "Juice"]

در اینجا پس از ایجاد آرایه‌های fruits و drinks با استفاده از متد ()concat آرایهٔ اول را به آرایه دوم چسباندیم (توجه داشته باشید که مقادیر آرایهٔ دوم در انتهای آرایهٔ اول اضافه شده‌اند.) اگر در این روش متد ()concat را بر روی آرایهٔ دوم اِعمال می‌کردیم، عکس این عمل اتفاق می‌افتاد؛ یعنی مقادیر آرایهٔ دوم در ابتدا قرار گرفته و مقادیر آرایهٔ اول در انتهای آن‌ها اضافه می‌شدند.

متد ()every شرطی که ما برای آن تعیین می‌کنیم را بر روی تک‌تک اعضای آرایه بررسی می‌کند و اگر همهٔ اعضای آرایه شرط در نظر گرفته شده را داشته باشند، خروجی true را نمایش می‌دهد اما حتی اگر یکی از اعضاء شرط ذکرشده را رعایت نکرده باشد، خروجی false خواهد بود:

var ages = [32, 33, 38, 14];
function checkAdult(age) {
    return age >= 18;
}
ages.every(checkAdult); //returns false

فرض کنیم که آرایهٔ ages حاوی چهار نفر است که همگی آن‌ها به جز یک نفر، بالای هجده سال هستند. حال می‌خواهیم شرط داشتن سن قانونی (بالای هجده سال) را بر روی اعضای این آرایه بررسی کنیم. فانکشن ()checkAdult بررسی می‌کند که آیا عدد مورد بررسی بیشتر یا مساوی با هجده است. در واقع، با استفاده از متد ()every می‌توان این فانکشن را بر روی تک‌تک اعضای آرایه بررسی کرد و از آنجایی که یکی از این افراد دارای چهارده سال سن است و شرط برای وی برقرار نیست، از همین روی خروجی این متد false خواهد بود (متد ()some نیز همانند ()every عمل می‌کند اما تفاوت آن‌ها در این است که در متد ()some اگر حتی یک عضو از اعضای آرایه دارای شرط گفته شده باشد، خروجی این متد true خواهد بود و نیازی نیست که حتماً تمامی اعضاء شرط را رعایت کنند.)

متد ()filter تا حدودی مشابه ()every عمل می‌کند به طوری که در آن شرطی که تعیین می‌کنیم بر روی تک‌تک اعضای آرایه بررسی می‌شود و در نهایت تمامی اعضایی که شرط گفته شده را داشتند در یک آرایهٔ جداگانه قرار می‌گیرند. در حقیقت، تفاوت این متد با ()every آن است که ()filter به ما خواهد گفت که از میان اعضای آرایه کدام‌یک شرط مورد نظر ما را دارند و آن‌ها را برای‌مان گلچین می‌کند:

var ages = [32, 33, 38, 14];
function checkAdult(age) {
    return age >= 18;
}
ages.filter(checkAdult); //returns [32, 33, 38]

همان‌طور که مشاهده می‌کنید، تنها سه عضو از آرایهٔ ages شرط گفته شده (بالای هجده سال) را داشتند و پس از اِعمال متد ()filter بر روی این آرایه، سه عضو مد نظر در آرایه‌ای جداگانه به عنوان خروجی نمایش داده می‌شوند.

از متد ()indexOf زمانی استفاده می‌شود که بخواهیم اندیس یکی از اعضای آرایه را بیابیم. برای این کار، باید نام اِلِمنت مورد نظر را به عنوان ورودی به این متد بدهیم سپس این متد داخل آرایه جستجو می‌کند و شمارهٔ اندیس اولین موقعیتی که عبارت ما در آنجا یافت شود را نمایش می‌دهد:

var company = ["microsoft", "google", "apple", "google"];
company.indexOf("google"); //returns 1

آرایهٔ بالا شامل چهار عضو است که البته «google» در آن دو بار تکرار شده است؛ یک بار در اندیس شمارهٔ یک و بار دیگر در اندیس شمارهٔ سه (به خاطر داشته باشید که در آرایه‌های جاوااسکریپت شمارش صفر شروع می‌شود.) حال فرض کنید که می‌خواهیم نام کمپانی گول را در این آرایه جستجو کنیم و در صورت وجود، مکان آن در آرایه را نیز بفهمیم. برای این کار، متد ()indexOf را فراخوانی کرده و سپس عبارت «google» را به عنوان آرگومان ورودی وارد می‌کنیم سپس این متد اعضای آرایه را به ترتیب بررسی می‌کند و به محض برخورد به اولین نتیجه، شمارهٔ اندیس آن را نمایش می‌دهد (در اینجا با آنکه عبارت google دو بار تکرار شده، اما متد ()indexOf تنها به اولین مکان آن اهمیت می‌دهد و به همین دلیل خروجی آن اندیس شمارهٔ یک است.)

همچنین به خاطر داشته باشید اگر در این مثال به جای google، عبارت Google (با حرف اولِ بزرگ) را جستجو می‌کردیم، ()indexOf هیچ مورد متناظری را پیدا نمی‌کرد و مقدار 1- را نمایش می‌داد زیرا همان‌طور که قبلاً گفته شد، زبان جاوااسکریپت به بزرگی و کوچکی حروف حساس است.

متد ()lastIndexOf دقیقاً همانند ()indexOf عمل می‌کند با این تفاوت که به جای اندیس اولین موقعیت یافت‌شده از عبارت مد نظر، آخرین اندیس را ریترن می‌کند:

var company = ["microsoft", "google", "apple", "google"];
company.lastIndexOf("google"); //returns 3

جستجوی عبارت «google» در این آرایه دو موقعیت را شامل می‌گردد؛ یکی اندیس شمارهٔ یک و دیگری اندیس شمارهٔ سه اما بر خلاف متد قبلی، ()lastIndexOf آخرین موقعیت یافت‌شده، یعنی اندیس سه، را به عنوان خروجی نمایش می‌دهد.

متد ()join تمامی اعضای یک آرایه را به استرینگ تبدیل کرده سپس آن‌ها را پشت‌سرهم و در قالب یک استرینگ بزرگ‌تر چاپ می‌کند:

var myArray = ["Banana", 2, "Orange"];
myArray.join();  //returns "Banana,2,Orange"

آرایهٔ myArray دارای سه عضو متفاوت شامل عدد و متن است که با اِعمال متد ()join بر روی این آرایه، ابتدا تمامی اعضاء به استرینگ تبدیل شده سپس به یکدیگر چسبانده می‌شوند و به شکل یک استرینگ بزرگ نمایش داده می‌شوند. توجه داشته باشید که این متد برای جداسازی اعضاء در استرینگ نهایی، به طور پیش‌فرض از ویرگول استفاده می‌کند اما می‌توان برای اهداف خاصی از جداکنندهٔ دلخواه خود استفاده کرد. برای این کار، باید جداکنندهٔ دلخواه را در داخل دابل‌کوتیشن و به صورت زیر قرار داد:

myArray.join("*");

در چنین شرایطی، خروجی به صورت زیر خواهد بود:

myArray.join("*"); //returns "Banana*2*Orange"

برای درک بهتر سازوکار متد ()pop بهتر است نگاهی به مثال زیر بیندازیم:

var fruits = ["Banana", "Orange", "Apple"];
fruits.pop(); //returns "Apple"
console.log(fruits); //returns ["Banana", "Orange"]

آخرین عضو آرایهٔ fruits استرینگی است تحت عنوان «Apple» که با اِعمال متد ()pop بر روی آرایهٔ مذکور این استرینگ حذف می‌شود و بلافاصله نمایش داده می‌شود؛ سپس اگر از جاوااسکریپت بخواهیم که آرایهٔ fruits را به ما نشان بدهد، خواهیم دید که عضو آخر به کلی حذف شده است.

متد ()push مقادیر جدیدی را به انتهای آرایه می‌افزاید سپس طول آرایهٔ جدید را نمایش می‌دهد:

var fruits = ["Banana", "Orange"];
fruits.push("Apple", 7); //returns 4
console.log(fruits); //returns ["Banana", "Orange", "Apple", 7]

داخل پرانتزهای متد ()push باید مقادیری که می‌خواهیم به آرایه اضافه کنیم را تایپ کنیم. در این مثال، ما دو مقدار «Apple« و «7» را به آرایه اضافه کردیم که یکی از آن‌ها استرینگ و دیگری عدد است. برای جداسازی مقادیر در زمان افزودن نیز از ویرگول یا کاما در میان آن‌ها استفاده می‌کنیم. همان‌طور که می‌بینید، به محض اضافه کردن مقادیر، خروجی چهار نمایش داده می‌شود که در حقیقت طول جدید آرایه (یا تعداد اعضای آن) است. اگر لیست اعضای آرایه را نیز فراخوانی کنیم، خواهیم دید که همهٔ مقادیر درخواستی به درستی اضافه شده‌اند.

برای درک بهتر کارکرد متد ()reduce بهتر است ابتدا مثال زیر را بررسی کنیم:

var numbers = [10, 23, 55, 2];
function getSum(total, num) {
    return total + num;
}
numbers.reduce(getSum); //returns 90
console.log(numbers); //returns [10, 23, 55, 2];

برای استفاده از این متد بر روی یک آرایه، نیاز به یک فانکشن داریم که بتواند بر روی آرایهٔ ما کاربرد داشته باشد. در مثال بالا، آرایهٔ numbers تماماً از اعداد تشکیل شده و فانکشن ()getSum نیز با جمع اعداد با یکدیگر، مجموع کلی چند عدد را محاسبه می‌کند به طوری که نیازمندی‌های لازم برای استفاده از متد ()reduce را در اختیار داریم.

اساساً وظیفهٔ این متد آن است که با اِعمال فانکشن داده‌شده بر روی تک‌تک اعضای آرایه، آن را به یک مقدار واحد تبدیل کند. در اینجا، فانکشن ()getSum به کمک متد ()reduce می‌تواند دو عدد از یک مجموعه را به ترتیب خوانده، آن‌ها را با یکدیگر جمع کند و در متغیری تحت عنوان total ذخیره کند. سپس به سراغ عدد بعدی می‌رود و آن را با مقدار فعلی total جمع می‌کند و نتیجهٔ حاصله را مجدداً در total ذخیره می‌کند. این کار تا زمانی که دیگر عدد جدیدی برای جمع کردن وجود نداشته باشد ادامه پیدا می کند و در نهایت تنها یک عدد باقی می‌ماند که آن هم مجموع تمام اعداد داده‌شده به این فانکشن است.

پس از اتمام کار، متد ()reduce مقدار نهایی را به عنوان خروجی نمایش می‌دهد که در این مثال، عدد نود است. با این حال اگر لیست اعضای آرایه را فراخوانی کنیم، متوجه خواهیم شد که متد ()reduce تغییری در آرایهٔ اصلی ایجاد نمی‌کند و اعضای آن بدون تغییر باقی مانده‌اند (تفاوت این متد با ()reduceRight در آن است که متد ()reduce کار خود را از سمت چپ و اندیس صفر آغاز می کند اما ()reduceRight کار خود را از انتها به ابتدا شروع می‌کند.)

متد ()reverse ترتیب اعضای یک آرایه را برعکس کرده و خروجی را نمایش می‌دهد:

var fruits = ["Banana", "Orange", "Apple"];
fruits.reverse(); //returns ["Apple", "Orange", "Banana"]

متد ()shift اولین عضو یک آرایه را حذف کرده و همان عضو را به عنوان خروجی نمایش می‌دهد:

var fruits = ["Banana", "Orange", "Apple"];
fruits.shift(); //returns "Banana"
console.log(fruits); //returns ["Orange", "Apple"] 

متد ()slice قسمتی از آرایه را انتخاب کرده سپس آن را به عنوان یک آرایهٔ جدید در خروجی نمایش می‌دهد. این متد نیازمند دو ورودی است؛ اولین ورودی آدرس شروع یا مبداً است و دومین ورودی آدرس پایان یا مقصد است:

var colors = ["Blue", "Green", "Purple", "White"];
colors.slice(1, 3); //returns ["Green", "Purple"]
console.log(colors); //returns ["Blue", "Green", "Purple", "White"]

آرایهٔ colors دارای چهار عضو است و همان‌طور که گفتیم، متد ()slice به دو ورودی نیازمند است که هر دوی آن‌ها آدرس یا شمارهٔ اندیس اعضای آرایهٔ مد نظر هستند. در مثال فوق، اولین ورودی عدد یک است که مکان عضو «Green» را مشخص می‌کند و دومین ورودی عدد سه است که مکان عضو «White» را نشان می‌دهد. حال متد ()slice اعضای میان مبداً و مقصد را انتخاب کرده و در قالب آرایه‌ای جدید به عنوان خروجی نمایش می‌دهد. البته باید به این نکته دقت کرد که عضو مقصد (یعنی اندیس سه) در اینجا انتخاب نمی‌شود و اعضای پیش از آن مد نظر خواهند بود.)

به کمک متد ()splice می‌توان مقادیری را در هر قسمت از آرایه اضافه یا حذف کرد. این متد به سه ورودی جداگانه نیاز دارد؛ ورودی اول اندیس شروع، ورودی دوم تعداد اعضاء برای حذف و ورودی سوم مقادیری است که قرار است اضافه شوند:

var colors = ["Blue", "Green", "Purple", "White"];
colors.splice(2, 0, "Red", "Yellow"); //returns []
console.log(colors); //returns ["Blue", "Green", "Red", "Yellow", "Purple", "White"]

در این مثال، متد ()splice بر روی آرایهٔ colors اِعمال شده است. اولین ورودی این متد (عدد دو) می‌گوید که از اندیس دوم آرایه یا به عبارتی خانهٔ متعلق به «Purple» باید کار را آغاز کرد و ورودی دوم، یعنی عدد صفر، به این متد می‌گوید که هیچ عضوی حذف نشود. سپس ورودی‌های سوم و چهارم که «Red» و «Yellow» هستند همگی به این آرایه اضافه خواهند شد و بدین ترتیب، متد ()splice اندیس دو را پیدا می کند و کار خود را از آن مکان آغاز می‌کند و از آنجایی که نیاز به حذف اعضاء نیست (به عبارت دیگر، ورودی دوم صفر است)، دو عضو جدید از همان ابتدای اندیس شماره دو به آرایه اضافه می‌شوند.

از آنجایی که هیچ عضوی حذف نشده، پس در زمان فراخوانی این متد هیچ خروجی‌ای نیز نمایش داده نخواهد شد اما در صورت فراخوانی لیست اعضاء، متوجه می‌شویم که دو عضو جدید از اندیس دوم به بعد به این آرایه اضافه شده و «Purple» و «White» را به جلو رانده‌اند. 

حال به منظور درک شرایط خاص‌تر، مثال زیر را در نظر بگیرید:

var colors = ["Blue", "Green", "Purple", "White"];
colors.splice(1, 3); //returns ["Green", "Purple", "White"]
console.log(colors); //returns ["Blue"]

در این مورد، متد ()splice از اندیس شمارهٔ یک آغاز شده و به تعداد سه عضو از آرایه را حذف می‌کند که در نتیجه خانهٔ ابتدایی یا «Green» انتخاب می‌شود و از همان نقطه به بعد سه عضو حذف می‌گردند. پس از اتمام اجرای متد نیز اعضای حذف‌شده به عنوان خروجی نمایش داده می‌شوند. همان‌طور که مشاهده می‌کنید، این متد می‌تواند آرایهٔ اصلی را تغییر دهد و اکنون فقط یک عضو «Blue» در آرایه باقی مانده است.

متد ()unshift مقادیر جدیدی را به ابتدای آرایه می‌افزاید در صورتی که متد ()push مقادیر جدید را به انتهای آرایه اضافه می‌کند. لازم به یادآوری است که این متد نیز مانند ()push پس از افزودن مقادیر جدید طول آرایهٔ جدید را به عنوان خروجی نمایش می‌دهد:

var fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Lemon", "Kiwi"); //returns 5
console.log(fruits); //returns ["Lemon", "Kiwi", "Banana", "Orange", "Apple"]

جمع‌بندی
در این آموزش کلیاتی را در ارتباط با آرایه‌ها در زبان برنامه‌نویسی جاوااسکریپت بیان کردیم اما آنچه مسلم است اینکه مبحث آرایه‌ها به مراتب گسترده‌تر از آنچه که بیان شد بوده و نیازمند مطالعهٔ‌ بیشتر است.