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

خلاصه آموزش:

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

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

در این درس، ابتدا به نحوه تعریف یک آرایه می پردازیم، سپس چگونگی دسترسی به اعضای آن و تغییر محتوای هر عضو را بررسی می کنیم. پس از آن مباحث آرایه های تودرتو، متدهای عمومی ویرایش آرایه و ویژگی عمومی یک آرایه را توضیح می دهیم.

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

آموزش کامل متنی:

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

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

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

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

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

const myArrayEmpty = [];

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

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

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

دسترسی به اعضای آرایه با استفاده از ایندکس

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

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

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

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

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

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

console.log(typeof myArray);

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

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

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

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

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

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

console.log(myArray instanceof Array);

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

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

console.log(myArray instanceof String);

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

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

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

نحوه دسترسی به اعضای آرایه با استفاده از ایندکس در عمل

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

console.log(myArray[1]);

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

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

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

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

myArray[2] = "academy";
console.log(myArray);

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

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

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

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

پراپرتی length

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

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

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

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

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

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

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

متدهای ()pop و ()push

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

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

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

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

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

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

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

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

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

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

این متد push، academy را میاره آخر 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);

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

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

تعریف آرایه تو در تو (Nested Arrays)

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

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

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

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

بریم نتیجه را ببینیم

میبینیم که به ما شماره 3 را به ما برمیگرداند.