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

درود جاوااسکریپتی‌ها! توی این قسمت می‌خوایم با یکی از پراستفاده‌ترین ویژگی‌های جاوااسکریپت آشنا بشیم: آرایه یا Array

توی این قسمت یاد می‌گیریم که:

• آرایه چیه؟
• چطوری یک آرایه بسازیم؟
• ایندکس چیه؟
• چطوری به اعضای آرایه دسترسی داشته باشیم؟
• چطوری به آرایه عضو اضافه کنیم؟
• چطوری مقدار عضوی رو تغییر بدیم؟
• چطوری تعداد اعضای آرایه رو بدست بیاریم؟
• نوع آرایه چیه؟
• مقایسه آرایه‌ها
• حلقه‌ها و آرایه‌ها

آرایه (Array) چیه؟ 🤔

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

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

const item1 = 'Tea';
const item2 = 'Banana';
const item3 = 'Bread';
const item4 = 'Salt';
// ...

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

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

چطوری یک آرایه بسازیم؟

ما با استفاده از یک جفت براکت مربعی [] (Square Brackets) یک آرایه می‌سازیم و داخل اونها مقدارها رو قرار می‌دیم:

const items = [];

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

const items = ['Tea', 'Banana', 'Bread', 'Salt'];

حالا تونستیم مثالی که ابتدای این پست بررسی کردیم رو با آرایه‌ها بازنویسی کنیم. همونطور که می‌بینیم هر عضو با کاما , جدا شده. الان متغیر items یک لیست شامل اقلام خرید هست. کافیه با این تک لیست بریم خرید 🛍

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

const complex = [
  1,
  true,
  null,
  function() {},
  "string",
  {},
  [1, 2],
]

ایندکس (Index) چیه؟

ایندکس یک عدد هست که نشون‌دهنده موقعیت هر عضو توی آرایه هست. هر عضو یک ایندکس منحصر به فرد داره. آرایه زیر رو در نظر بگیرید:

const items = ['a', 'b', 'c', 'd'];

توی این آرایه:

• اولین عضو یعنی a ایندکسی برابر با 0 داره
• دومین عضو یعنی b ایندکسی برابر با 1 داره
• آخرین عضو یعنی d ایندکسی برابر با 3 داره

پس باید بدونیم که شماره ایندکس‌ها از عدد 0 شروع میشه. یعنی ایندکس اولین عضو هر آرایه برابر 0، دومین عضو برابر 1 و ... . با این قوانین، نتیجه می‌گیریم که اگه آرایه‌ای n عضو داشته باشه، شماره ایندکس آخرین عضو برابر با n - 1 هست.

چطوری به اعضای آرایه دسترسی داشته باشیم؟

ما با دونستن ایندکس هر عضو می‌تونیم به صورت زیر به اون عضو دسترسی داشته باشیم:

array[index];

برای مثال توی آرایهٔ پایین، ایندکس اولین عضو 0 هست. پس می‌تونیم به صورت items[0] به اولین عضو دسترسی داشته باشیم:

const items = ['Tea', 'Banana', 'Bread', 'Salt'];

alert(items[0]); // Tea
alert(items[3]); // Salt

اگه ایندکسی وجود نداشته باشه undefined می‌گیریم:

const array = ['a'];

alert(array[4]); // undefined

اگه خود آرایه رو بذاریم توی تابع alert، حالت رشته‌ای آرایه برای ما نمایش داده میشه:

const items = ['Tea', 'Banana', 'Bread', 'Salt'];

alert(items); // Tea,Banana,Bread,Salt

چطوری به آرایه عضو اضافه کنیم؟

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

const items = ['a', 'b', 'c'];

>> items.push('d');

alert(items); // a,b,c,d

چطوری عضوی رو به اول آرایه اضافه کنیم؟

یک متد دیگه داریم به اسم unshift که ورودی خودش رو به ابتدای آرایه اضافه می‌کنه:

const items = ['a', 'b', 'c'];

>> items.unshift('d');

alert(items); // d,a,b,c

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

چطوری مقدار عضوی رو تغییر بدیم؟

با دونستن شماره ایندکس یک عضو خاص می‌تونیم به صورت زیر مقدار اون عضو رو تغییر بدیم:

const items = ['a', 'b', 'c'];

>> items[2] = 'd';

alert(items); // a,b,d

چطوری تعداد اعضای آرایه رو بدست بیاریم؟

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

const items = ['a', 'b', 'c'];

alert(items.length); // 3

با توجه به این، نتیجه می‌گیریم که شماره ایندکس آخرین عضو آرایه برابر با length - 1 هست.

نوع یک آرایه چیه؟

اگه از یک آرایه typeof بگیریم:

const array = [1, 2];

alert(typeof array); // object

می‌بینیم که به ما object برمی‌گردونه! پس آرایه‌ها توی جاوااسکریپت نوع خاصی از آبجکت‌ها هستن.

Array.isArray([1, 2]); // true
Array.isArray({});     // false
Array.isArray(1);      // false

مقایسه آرایه‌ها

توی قسمت آبجکت‌ها بررسی کردیم که دو آبجکت با ظاهر یکسان با هم برابر نیستن. همین قانون برای آرایه‌ها هم صدق می‌کنه. چون گفتیم که آرایه‌ها هم نوعی آبجکت هستن:

const a = [1, 2];
const b = [1, 2];

alert(a === b); // false

برای اینکه دو متغیر a و b با هم برابر باشن، هر دو باید رفرنس‌های یکسانی توی حافظه داشته باشن که به این صورت امکان‌پذیر هست:

const a = [1, 2];
const b = a;

alert(a === b); // true

با توجه به کد بالا، اگه آرایه b رو تغییر بدیم، این تغییر توی آرایه a هم اعمال میشه:

const a = [1, 2];
const b = a;

b.push(3);

alert(a); // 1,2,3

حلقه‌ها و آرایه‌ها

حلقه‌ها و آرایه‌ها دو دوست جدایی‌ناپذیر هر برنامه‌ای هستن. تقریباً هر جایی که حلقه وجود داره، یک آرایه هم هست. فرض کنیم آرایه‌ای داریم به صورت زیر:

const alpha = ['a', 'b', 'c'];

اگه بخوایم همه اعضای آرایه alpha رو نمایش بدیم شاید راهی که به ذهنمون برسه این باشه:

alert(alpha[0]); // a
alert(alpha[1]); // b
alert(alpha[2]); // c

خب اینجا کارمون راحت بود. اما اگه آرایه alpha صدها عضو داشته باشه چطور؟ باید صدها بار کد بالا رو تکرار کنیم که کار درستی به حساب نمیاد. اینجا حلقه‌ها به کارمون میان.

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

const alpha = ['a', 'b', 'c'];

for (let i = 0; i < alpha.length; i++) {
  alert(alpha[i]);
}

اینجا ابتدا یک شمارنده i درست کردیم. توی قسمت شرط حلقه گفتیم که تا زمانی که مقدار شمارنده از طول آرایه کمتر بود، کار توی حلقه رو ادامه بده و در پایانِ هر تکرار، 1 واحد به شمارنده اضافه کن. با این کار، حتی اگه آرایه هزار عضو داشته باشه، حلقه‌ای که نوشتیم تغییری نمی‌کنه که باعث میشه حجم کدها کمتر و خوانایی اون بیشتر بشه 👌

پیمایش روی آرایه‌های چندبعدی

به عنوان یک مثال دیگه، فرض کنیم آرایه‌ای داریم که خودش شامل چندین آرایه میشه:

const binaries = [
  [1, 2],
  [3, 4],
  [5, 6],
];

به آرایه‌هایی که شامل مقدارهای آرایه‌ای هستن می‌گیم آرایه‌های چندبعدی. اگه بخوایم همه اعضای آرایه‌ها داخلی رو کنار هم نشون بدیم (1,2,3,4,5,6)، باید از حلقه‌های تو در تو استفاده کنیم؛ یعنی حلقه‌‌هایی که داخل یک حلقه دیگه نوشته میشن:

const binaries = [
  [1, 2],
  [3, 4],
  [5, 6],
];

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

دکمه ► رو بزنید و خروجی رو ببینید. پیشنهاد می‌کنم توی کد بالا حفاری و کاوش کنین تا متوجه بشین چه اتفاق‌هایی افتاد.

خب دوستان این هم از آرایه‌های جاوااسکریپت. یاد گرفتیم که آرایه چی هستن و کجا به کارمون میان. برای ادامه آموزش به قسمت بعدی برید. روزتون خوش 😉✌️