آرایه‌ها در جاوااسکریپت

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

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

تعریف آرایه در جاوا اسکریپت

فرض کنید متغیری به نام myArray داریم که مقدار آن یک آرایه شامل یک رشته با مقدار "Sokan"، یک عدد با مقدار 1 و مقدار true است. برای تعریف یک آرایه، باید از براکت‌های باز و بسته [] استفاده کرده و مقادیر موردنظر را داخل آن قرار دهیم. این مقادیر با کاما , از یکدیگر جدا می‌شوند. بنابراین ساختار این آرایه در JavaScript به‌صورت زیر خواهد بود:  

const myArray = ["sokan", 1 ,true];

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

const myArrayEmpty = [];

به این معناست که مقدار متغیر یک آرایه است، اما هنوز هیچ مقداری در آن مشخص نشده است.

شباهت و تفاوت آرایه‌ها و آبجکت‌ها

آرایه‌ها از برخی جهات مشابه آبجکت‌ها (Objects) هستند، زیرا امکان ذخیره چندین مقدار مختلف درون یک متغیر را فراهم می‌کنند. با این حال، تفاوت اصلی آن‌ها در این است که در آرایه‌ها نیازی به انتخاب نام برای هر مقدار نیست، در حالی که در آبجکت‌ها، هر مقدار دارای یک کلید یا نام مشخص است.

استفاده از const برای تعریف آرایه‌ها

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

آرایه‌ها در جاوااسکریپت از چه نوع داده‌ای هستند؟

برای آنکه بدانیم آرایه‌ها از چه نوع هستند، از دستور typeof استفاده می‌کنیم:

console.log(typeof myArray);  // "object"

خروجی دستور  typeof myArray مقدار "object" را برمی‌گرداند، که نشان می‌دهد آرایه‌ها در جاوا اسکریپت نوعی خاص از آبجکت‌ها هستند؛ با این تفاوت که به‌جای استفاده از Name، از index برای دسترسی به مقادیر استفاده می‌کنیم.   
اما سوال این است که چگونه می‌توانیم تشخیص دهیم که یک متغیر آرایه است یا آبجکت؟

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

بررسی آرایه بودن یک متغیر با استفاده از isArray و instanceof

در جاوا اسکریپت برای بررسی اینکه آیا یک متغیر آرایه است یا نه، یکی از ساده‌ترین روش‌ها استفاده از متد ()Array.isArray است. این متد می‌تواند به راحتی نوع داده‌ای متغیر را شناسایی کند.

برای استفاده از این متد، کافی است متغیر موردنظر را به‌عنوان آرگومان داخل ()Array.isArray قرار دهیم. اگر مقدار true برگشت داده شود، یعنی متغیر ما یک آرایه است. بنابراین برای مثال این آموزش (آرایه‌ی myArray) داریم:

console.log(Array.isArray(myArray));  // true

اما یک راهکار دیگر و کلی‌تر برای بررسی نوع داده‌ای، استفاده از instanceof است:   

console.log(myArray instanceof Array);  // true

که اینجا نیز مقدار true رو به ما برمی‌گرداند.

از این متد می‌شود برای بررسی انواع دیگر مثل String و ... هم استفاده کرد. مثلا:  

console.log(myArray instanceof String);  // false

و اینجا false را نمایش می‌دهد.

دسترسی به اعضای آرایه - ایندکس‌ها

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

برای مثال، در آرایه بالا:

• مقدار "Sokan" دارای ایندکس 0 است.
• مقدار 1 دارای ایندکس 1 است.
• مقدار  true دارای ایندکس 2 است.

از طریق این ایندکس‌ها می‌توان به مقدار هر یک از اعضای آرایه دسترسی پیدا کرد.

مثال عملی دسترسی به اعضای آرایه با ایندکس

در مثال این آموزش، myArray به یک آرایه با سه عضو اختصاص یافته است. برای دسترسی به عضو دوم که ایندکس آن ۱ است، نام آرایه را آورده و در ادامه شماره ایندکس مورد نظر را داخل براکت می‌آوریم:

console.log(myArray[1]);  // 1

خروجی این کد مقدار 1 را که عضو دوم با ایندکس ۱ از آرایه است، نمایش می‌دهد.

ویرایش آرایه‌ها در جاوا اسکریپت

همان‌طور که اشاره کردیم، آرایه‌ها یک نوع داده non-primitive هستند و پس از تعریف، قابل تغییر هستند. برای تغییر اعضای آرایه، کافی است از ایندکس مربوطه استفاده کرده و مقدار جدید را به آن اختصاص دهیم.

فرض کنید که در آرایه‌ی myArray می‌خواهیم عضو سوم یعنی ایندکس 2 را تغییر دهیم. برای انجام این کار، کافی است ایندکس مربوطه را انتخاب کرده و مقدار جدید را به آن اختصاص دهیم.  

myArray[2] = "academy";
console.log(myArray);  // ["sokan", 1, "academy"]

خروجی این log برابر خواهد بود با: ['sokan', 1 , 'academy']

 👈 مقدار ایندکس 2 از true به academy تغییر کرد.

متدها و پراپرتی‌های آرایه‌ها در جاوا اسکریپت

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

پراپرتی length

یکی از پراپرتی‌های مهمی که به هر آرایه اختصاص داده می‌شود، پراپرتی length است. این پراپرتی به شما تعداد اعضای آرایه را نشان می‌دهد:

const myArray = ["sokan", 1 ,true];
console.log(myArray.length);  // 3

مقدار length  همیشه یک عدد است که تعداد کل اعضای موجود در آرایه را مشخص می‌کند. برای آرایه myArray این مقدار به صورت عدد 3 برگردانده می‌شود.

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

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

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

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

متد ()pop و حذف کردن عضو از انتهای آرایه

متد ()pop وظیفه دارد که آخرین عضو آرایه را حذف کند. علاوه بر این، می‌تواند مقدار حذف‌شده را به‌عنوان نتیجه برمی‌گرداند.

const myArray = ["sokan", 1 ,true];
myArray.pop();
console.log(myArray);  // ["sokan", 1]

نتیجه: [sokan', 1']

👈 ویژگی‌های مهم متد ()pop:

• حذف آخرین عضو آرایه.
• برگشت مقدار عضو حذف‌شده.
• تغییر طول آرایه پس از حذف عضو.

متد ()push و افزودن عضو به انتهای آرایه

متد ()push در جاوا اسکریپت برای اضافه کردن یک یا چند عضو به انتهای آرایه استفاده می‌شود. این متد به‌طور مستقیم عضو جدید را به آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند.   

const myArray = ["sokan", 1 ,true];
myArray.push("academy");
console.log(myArray);  // ["sokan", 1, true, "academy"]

این متد academy ، push را به آخر myarray اضافه کرده و به ما نمایش می‌دهد و طول آرایه را از 3 به 4 تغییر می‌دهد:  ['sokan', 1 ,true ,'academy']

متدهای ()shift و ()unshift

دو متد ()shift و ()unshift دقیقاً مشابه pop و push عمل می‌کنند، اما روی اولین عضو آرایه!

shift مشابه pop عمل می‌کند:

const myArray = ["sokan", 1 ,true];
myArray.shift();
console.log(myArray);  // [1, true]

در خروجی این log دیگر مقدار sokan را نخواهیم دید.

unshift مشابه push عمل می‌کند و طول آرایه جدید را برمی‌گرداند که ممکن است در بعضی اوقات به کارمون بیاد:

const myArray = ["sokan", 1, true];
let result = myArray.unshift("academy");  //["academy", "sokan", 1, true]

و خروجی میشود: [academy", "sokan", 1, true"]

آرایه تو در تو (Nested Arrays) چیست؟

آرایه‌های تو در تو مشابه به آبجکت‌های تو در تو هستند. وقتی که یک یا چند عضو از آرایه‌ها خودشان آرایه یا حتی آبجکت باشند، این حالت آرایه تو در تو یا Nested Array به وجود می‌آید.

آرایه تو در تو یعنی آرایه‌ای که یکی از اعضای آن یا چندین عضو آن خود آرایه‌های دیگری را شامل می‌شوند. مثلا فرض کنید اینجا آرایه myArray تشکیل شده باشه از :

const myArray = [[1, 2, 3], { name: "ali", age: 20 }, "Nested Array"];

مثال و نکات دسترسی چند مرحله‌ای

در جاوا اسکریپت وقتی که یک آرایه درون یک آرایه دیگر قرار می‌گیرد، برای دسترسی به اعضای داخلی آن، باید از ایندکس‌ها به‌صورت چند مرحله‌ای استفاده کنیم. 

const myArray = [[1, 2, 3], { name: "ali", age: 20 }, "Nested Array"];
console.log(myArray[1].name);  // "ali"

این ایندکس‌ها به شما این امکان را می‌دهند که به اعضای آرایه‌های تو در تو دسترسی پیدا کنید.   
نتیجه: ali   
می‌بینیم که مقدار ali را اینجا به دست آوردیم!

برای دسترسی به مقادیر داخل این آرایه‌ی تو در تو هم مانند بالا می‌توانیم انجام بدیم:   

const myArray = [[1, 2, 3], { name: "ali", age: 20 }, "Nested Array"];
console.log(myArray[1].name);  // "ali"
console.log(myArray[0][2]);   // 3

تمرین

1. یک فانکشن بنویسید، به عنوان مثال با نام ()addToArray،
2. یک آرگومان رشته‌ای به آن بدهید، به عنوان مثال: "?what is your name"،
3. پرامپتی باز شود با متنی که به عنوان آرگومان به فانکشن داده شده،
4. جواب را از کاربر گرفته و آن را در یک آرایه ذخیره کنید،
5. و هر بار که ()addToArray صدا زده می‌شود، مجدد مقدار جدید  به آن آرایه اضافه شود.

✨ توجه: تمرینات دوره، در مخزن گیت سکان آکادمی بارگذاری شده‌اند و شما می‌توانید به راحتی به آن‌ها دسترسی داشته باشید و کد‌های خود را با کدهای مدرس دوره مقایسه کنید. برای مشاهده مخزن می‌توانید اینجا کلیک کنید.

جمع‌بندی

در این آموزش به معرفی آرایه در جاوا اسکریپت پرداختیم. آرایه در جاوااسکریپت یک نوع آبجکت و از داده‌ی non-primitive است؛ یعنی پس از تعریف، قابل تغییر و ویرایش است و برای کپی کردن یک متغیر با محتوای آرایه در یک متغیر دیگر، با هدف تولید آرایه جدید، نمی توان از انتساب (assignment operator) استفاده کرد. 

مشابه object، آرایه یا Array نیز می تواند یک مجموعه از چندین مقدار از انواع داده‌های موجود باشد؛ اما تفاوت آن در این است که اعضای آرایه نیازی به name ندارند و برای دسترسی به آنها باید از index هر عضو استفاده کرد. با این وجود، آرایه یک نوع خاص از آبجکت است؛ در نتیجه یک سری ویژگی و متد برای نوع آرایه در نظر گرفته شده است تا بعضی اطلاعات مربوط به هر آرایه را نظیر طول آرایه، بتوان به دست آورد و یا عملیات مرتب کردن، جست و جو و ویرایش روی اعضای یک آرایه انجام داد.

در این قسمت، ابتدا به نحوه تعریف یک آرایه پرداختیم، سپس چگونگی دسترسی به اعضای آن و تغییر محتوای هر عضو را بررسی کردیم و پس از آن مباحث آرایه های تودرتو، متدهای عمومی (مانند shift ، push ، pop و unshift) ، ویرایش آرایه و ویژگی عمومی یک آرایه را آموزش دادیم.

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