بررسی آرایه (Array) در جاوااسکریپت

آرایه ها یا Arrays در جاوااسکریپت در واقع یک نوع متغیر برای نگهداری داده ها می باشند، فقط با این تفاوت که آرایه ها میتونن در لحظه بیش از چندین داده رو نگهداری کنند.

فرض می‌کنیم می‌خوایم چندین متغیر با چندین مقدار ایجاد نماییم، خب یه روش اینه که بیایم و دونه دونه متغیرهارو تعریف و مقدار بدیم بهشون : ( مثه دستور زیر )

const name1 = &quotAli"
const name2 = &quotHassan"
const name3 = &quotHossein"

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

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];

پس دیگه بدونید آرایه ها می‌تونن در لحظه چندین مقدار رو نگهداری کنند، و در نهایت ما می‌تونیم به این مقادیر دسترسی پیدا کنیم و آنها را به نمایش درآوریم.




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

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

خب برای ایجاد یا تعریف آرایه ها در زبان جاوا اسکریپت چندین روش وجود دارد که این روش ها به شرح زیر می باشند :

  • تعریف در یک عبارت ( ساده ترین روش ) (بهینه ترین روش ) ( روش پیشنهادی )
  • تعریف با استفاده از کلمه کلیدی New




تعریف در یک عبارت ( ساده ترین روش )

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

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];




تعریف با استفاده از کلمه کلیدی New

چه در این روش یا روش قبلی هیچ فرقی ندارند و در عمل یکی هستند ولی خب کلا استفاده از new پیشنهاد نمیشه و باعث میشه سرعت اجرای برنامه کاهش پیدا کنه و از طرفی این روش خوانایی ضعیف تری نسبت به روش قبلی داره.

const names = new Array(&quotAli&quot , &quotHassan&quot , &quotHossein&quot);




نحوه فراخوانی یا نمایش آیتم‌های آرایه

خب ما در مثال های بالا فقط آرایه‌ها رو ایجاد و یا تعریف کردیم و اگه توجه کنید در مثال‌های بالا هیچی در خروجی نمایش داده نمی‌شد چون ما فقط آرایه‌ها رو تعریف کردیم.

حال می‌خوایم یاد بگیریم که چجوری می‌تونیم آیتم‌ها ( یا درکل همون مقادیر موجود در آرایه‌ها ) رو در خروجی به نمایش در آوریم.

برای دسترسی به آیتم‌ها ( یا هم می‌تونیم بگیم خانه‌های ) یک آرایه ما باید شناسه یا شماره ایندکس Index اون آیتم / خانه رو وارد کنیم، که این شماره ایندکس از 0 شروع میشه تا دیگه هرچقدر آیتم در آرایه وجود داشته باشه.

در جاوااسکریپت شماره ایندکس همیشه از ۰ شروع میشه.

مثال شماره ۱ : دسترسی به اولین خانه / آیتم آرایه و نمایشش در خروجی:

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
console.log(names[0]);


مثال شماره ۲ : دسترسی به اولین آیتم آرایه که با New تعریف شده هست ( نحوه فراخوانی با مثال بالایی هیچ فرقی نمیکنه و یکی هستن )

const names = new Array(&quotAli&quot , &quotHassan&quot , &quotHossein&quot);
console.log(names[0]);


مثال شماره ۳ : نمایش یکجای تمامی آیتم های یک آرایه – روش اول

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot]; 
console.log(names);

توضیح مثال بالا :

خب در مثال های شماره ۱ یا ۲ یاد گرفتیم که چجوری میشه به آیتم های آرایه دسترسی پیدا کرد، یاد گرفتیم که باید شماره ایندکس ( که از ۰ شروع میشه تا هرچقدر که آیتم باشه ) اون آیتم رو وارد کنیم . خب باشه اوکی دیگه کاری به این نداریم.

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

یاهم می‌تونیم همانند مثال پایینی ( مثال شماره ۴ ) آیتم هارو با استفاده از حلقه for در خروجی به نمایش در آوریم.


مثال شماره ۴ : نمایش یکجای تمامی آیتم های یک آرایه – روش دوم

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];

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




نحوه تغییر دادن مقادیر آرایه‌ها

خب دوستان در ادامه‌ی آموزش کار با آرایه‌ها یا Arrays در جاوااسکریپت می‌خوایم یاد بگیریم که چجوری می‌تونیم آیتم‌ها یا در واقع مقادیر یک آرایه رو تغییر ( ویرایش / آپدیت ) کنیم.

ما می‌تونیم هر لحظه که خواستیم مقدار یک آیتم رو تغییر بدیم ( یا آپدیت کنیم ) و دیگه اون مقدار جدید در خروجی نمایش داده میشه، و مقدار قبلیش نادیده گرفته میشه.

مثال شماره ۱ : تغییر دادن مقدار / آیتم اول از یک آرایه

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
names[0] = 'Amir';

console.log(names[0]);




نحوه دسترسی به اولین و آخرین آیتم آرایه

خب برای دسترسی به اولین آیتم که می‌دونید دیگه ، باید از شماره ایندکس 0 استفاده کنیم ولی خب بنظر شما برای آخرین آیتم باید چکار کنیم؟

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

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

متد length بطور کلی طول ( تعداد عددی ) آیتم هارو بدست میاره، مثلا میگه فلان آرایه ۵ آیتم داره – حال ما می‌تونیم با همین متد کاری کنیم که به آخرین آیتم دسترسی پیدا کنیم.

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
const result = names[names.length - 1];

console.log(result);




نحوه اضافه کردن آیتم جدید به آرایه

به راحتی و با استفاده از متد ()push می‌تونیم مقادیر ( آیتم ) جدید به آرایه اضافه کنیم. توجه داشته باشید که مقادیر جدید به آخرین خانه آرایه اضافه می‌شود.

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
names.push('Arash');

console.log(names);




نحوه حذف کردن آیتم از آرایه

ما از ۲ روش میتونیم آیتم های یک آرایه رو حذف کنیم که این روش ها بصورت زیر می باشد :

  • روش اول : استفاده از کلمه کلیدی delete ( میتونیم شماره ایندکس بدیم بهش حذف کنه )
  • روش دوم : استفاده از متد ()pop ( آخرین آیتم رو حذف میکنه )

مثال شماره ۱ : روش اول » با استفاده از کلمه کلیدی delete می‌تونیم به راحتی آیتم های یک آرایه رو حذف کنیم.

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
delete names[0]; // حذف آیتم اول
delete names[1]; // حذف آیتم دوم

console.log(names);


مثال شماره ۲ : روش دوم » استفاده از متد ()pop

const names = [&quotAli&quot , &quotHassan&quot , &quotHossein&quot];
names.pop();

console.log(names);


نکات و توضیحات

  • آرایه ها در واقع یک متغیر هستند برای نگهداری چندین مقدار بصورت همزمان
  • با استفاده از شماره ایندکس می‌تونیم به آیتم های آرایه دسترسی داشته باشیم
  • شماره ایندکس همیشه از ۰ شروع میشه
  • برای نمایش تمامی آیتم‌های یک آرایه ساده ترین روش اینه که نام همون آرایه رو به خروجی بفرستیم
  • با استفاده از متد length می‌تونیم طول یک آرایه رو بدست بیاریم
  • با استفاده از متد ()push می‌تونیم آیتم جدید به آرایه اضافه کنیم
  • با استفاده از ()pop می‌تونیم آخرین آیتم از آرایه رو حذف کنیم