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

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

آرایه (Array) در جاوااسکریپت ساختاری است که به ما اجازه می‌دهد چندین مقدار را در یک متغیر ذخیره کنیم. آرایه‌ها یکی از مهم‌ترین ساختارهای داده در جاوااسکریپت هستند و تقریباً در تمام پروژه‌های واقعی، از وب‌سایت‌های ساده تا برنامه‌های پیچیده، کاربرد دارند.

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

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

آرایه مجموعه‌ای از چند مقدار است که در یک متغیر ذخیره می‌شوند.

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

در اینجا متغیر fruits شامل سه مقدار است:

Apple
Banana
Orange

بدون آرایه مجبور بودیم بنویسیم:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Orange";

اما استفاده از آرایه بسیار ساده‌تر است:

let fruits = ["Apple", "Banana", "Orange"];

بنابراین می‌توان گفت:

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

ساخت آرایه

ساده‌ترین روش ایجاد آرایه استفاده از براکت [] است:

let numbers = [10, 20, 30, 40, 50];

همچنین می‌توانیم یک آرایه خالی ایجاد کنیم:

let users = [];

بعداً می‌توانیم اطلاعات را به آن اضافه کنیم.

آرایه می‌تواند انواع مختلف داده داشته باشد

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

مثلاً:

let data = [
    "Ali",
    25,
    true,
    10.5
];

در این آرایه:

• "Ali" یک String است.

• 25 یک Number است.

• true یک Boolean است.

• 10.5 یک Number است.

با این حال، در پروژه‌های واقعی معمولاً بهتر است آرایه‌ها ساختار منطقی و مشخصی داشته باشند.

Index در آرایه چیست؟

هر عنصر آرایه یک شماره دارد که به آن Index گفته می‌شود.

نکته بسیار مهم این است که شماره‌گذاری آرایه از صفر شروع می‌شود.

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

ساختار آن:

Index:    0        1         2
          ↓        ↓         ↓
Value:  Apple    Banana    Orange

بنابراین:

fruits[0] → Apple
fruits[1] → Banana
fruits[2] → Orange

این موضوع یکی از اولین نکاتی است که هنگام کار با Array باید به‌خوبی یاد بگیرید.

دسترسی به عنصر آرایه

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

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);

خروجی:

Apple

برای عنصر دوم:

console.log(fruits[1]);

خروجی:

Banana

برای عنصر سوم:

console.log(fruits[2]);

خروجی:

Orange

تغییر مقدار یک عنصر

عناصر آرایه قابل تغییر هستند.

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

fruits[1] = "Mango";

console.log(fruits);

خروجی:

["Apple", "Mango", "Orange"]

در اینجا مقدار Index شماره ۱ را تغییر دادیم.

تعداد عناصر آرایه با length

برای فهمیدن تعداد عناصر یک آرایه از ویژگی length استفاده می‌کنیم.

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.length);

خروجی:

3

مثال دیگر:

let numbers = [10, 20, 30, 40, 50];

console.log(numbers.length);

خروجی:

5

آخرین عنصر آرایه

چون Index از صفر شروع می‌شود، آخرین عنصر همیشه در Index زیر قرار دارد:

array.length - 1

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[fruits.length - 1]);

خروجی:

Orange

این روش بسیار کاربردی است، چون لازم نیست Index آخر را به‌صورت دستی بدانیم.

اضافه کردن عنصر با push

برای اضافه کردن یک عنصر به انتهای آرایه از push() استفاده می‌کنیم.

let fruits = ["Apple", "Banana"];

fruits.push("Orange");

console.log(fruits);

خروجی:

["Apple", "Banana", "Orange"]

می‌توانیم چند مقدار را نیز اضافه کنیم:

fruits.push("Mango", "Grapes");

حذف آخرین عنصر با pop

متد pop() آخرین عنصر آرایه را حذف می‌کند.

let fruits = ["Apple", "Banana", "Orange"];

fruits.pop();

console.log(fruits);

خروجی:

["Apple", "Banana"]

pop() علاوه بر حذف عنصر، مقدار حذف‌شده را نیز برمی‌گرداند.

let fruits = ["Apple", "Banana", "Orange"];

let removedFruit = fruits.pop();

console.log(removedFruit);

خروجی:

Orange

اضافه کردن عنصر به ابتدای آرایه با unshift

برای اضافه کردن یک عنصر به ابتدای آرایه از unshift() استفاده می‌کنیم:

let fruits = ["Banana", "Orange"];

fruits.unshift("Apple");

console.log(fruits);

خروجی:

["Apple", "Banana", "Orange"]

حذف اولین عنصر با shift

متد shift() اولین عنصر آرایه را حذف می‌کند:

let fruits = ["Apple", "Banana", "Orange"];

fruits.shift();

console.log(fruits);

خروجی:

["Banana", "Orange"]

مانند pop()، متد shift() نیز مقدار حذف‌شده را برمی‌گرداند.

خلاصه متدهای اصلی اضافه و حذف

پیمایش آرایه با for

یکی از مهم‌ترین کارها هنگام استفاده از آرایه، پیمایش عناصر آن است.

برای این کار می‌توانیم از حلقه for استفاده کنیم.

let fruits = ["Apple", "Banana", "Orange"];

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

خروجی:

Apple
Banana
Orange

در اینجا:

i = 0

از اولین عنصر شروع می‌کنیم.

شرط:

i < fruits.length

باعث می‌شود تا زمانی که i از تعداد عناصر کمتر است، حلقه ادامه پیدا کند.

و:

fruits[i]

عنصر مربوط به Index فعلی را دریافت می‌کند.

چرا از i < length استفاده می‌کنیم؟

فرض کنید آرایه ما سه عنصر دارد:

let fruits = ["Apple", "Banana", "Orange"];

طول آرایه:

3

اما Indexها:

0
1
2

بنابراین باید بنویسیم:

i < fruits.length

نه:

i <= fruits.length

اگر از <= استفاده کنیم، در آخر به fruits[3] می‌رسیم که وجود ندارد.

تغییر تمام عناصر با حلقه

می‌توانیم با حلقه تمام عناصر آرایه را تغییر دهیم.

مثلاً:

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
    numbers[i] = numbers[i] * 2;
}

console.log(numbers);

خروجی:

[2, 4, 6, 8, 10]

جستجو در آرایه با indexOf

برای پیدا کردن Index یک مقدار می‌توانیم از indexOf() استفاده کنیم.

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.indexOf("Banana"));

خروجی:

1

اگر مقدار وجود نداشته باشد:

console.log(fruits.indexOf("Mango"));

خروجی:

-1

بنابراین -1 نشان می‌دهد مقدار موردنظر پیدا نشده است.

بررسی وجود عنصر با includes

اگر فقط می‌خواهیم بدانیم یک مقدار در آرایه وجود دارد یا خیر، includes() گزینه ساده‌ای است.

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.includes("Banana"));

خروجی:

true

اما:

console.log(fruits.includes("Mango"));

خروجی:

false

تبدیل آرایه به متن با join

متد join() عناصر آرایه را به یک String تبدیل می‌کند.

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.join(", "));

خروجی:

Apple, Banana, Orange

می‌توانیم جداکننده دیگری نیز مشخص کنیم:

console.log(fruits.join(" - "));

خروجی:

Apple - Banana - Orange

جدا کردن بخشی از آرایه با slice

متد slice() برای گرفتن بخشی از آرایه استفاده می‌شود.

مثلاً:

let fruits = ["Apple", "Banana", "Orange", "Mango"];

let result = fruits.slice(1, 3);

console.log(result);

خروجی:

["Banana", "Orange"]

نکته مهم این است که Index شروع شامل می‌شود، اما Index پایان شامل نمی‌شود.

یعنی:

Start → included
End   → excluded

حذف یا جایگزینی با splice

متد splice() می‌تواند عناصر آرایه را حذف، اضافه یا جایگزین کند.

مثلاً:

let fruits = ["Apple", "Banana", "Orange"];

fruits.splice(1, 1);

console.log(fruits);

خروجی:

["Apple", "Orange"]

در اینجا:

splice(1, 1)

یعنی:

• از Index شماره ۱ شروع کن.

• یک عنصر حذف کن.

اضافه کردن عنصر با splice

می‌توانیم بدون حذف عنصر، مقدار جدیدی اضافه کنیم:

let fruits = ["Apple", "Orange"];

fruits.splice(1, 0, "Banana");

console.log(fruits);

خروجی:

["Apple", "Banana", "Orange"]

در اینجا:

splice(1, 0, "Banana")

یعنی از Index شماره ۱ شروع کن، صفر عنصر حذف کن و "Banana" را اضافه کن.

مرتب‌سازی آرایه با sort

برای مرتب‌سازی عناصر از sort() استفاده می‌کنیم.

مثلاً:

let fruits = ["Orange", "Apple", "Banana"];

fruits.sort();

console.log(fruits);

خروجی:

["Apple", "Banana", "Orange"]

اما هنگام مرتب‌سازی اعداد باید دقت بیشتری داشته باشیم.

مثلاً:

let numbers = [10, 2, 30, 5];

numbers.sort();

console.log(numbers);

ممکن است نتیجه‌ای مطابق انتظار عددی نداشته باشد، زیرا رفتار پیش‌فرض sort() عناصر را به‌صورت متنی مقایسه می‌کند.

برای مرتب‌سازی عددی صعودی:

numbers.sort((a, b) => a - b);

خروجی:

[2, 5, 10, 30]

جزئیات Arrow Function و Callbackها را در ادامه دوره با جزئیات بیشتری بررسی خواهیم کرد.

reverse برای برعکس کردن آرایه

متد reverse() ترتیب عناصر را برعکس می‌کند.

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);

خروجی:

[5, 4, 3, 2, 1]

for...of برای پیمایش آرایه

جاوااسکریپت روش ساده دیگری برای پیمایش آرایه دارد: for...of.

مثال:

let fruits = ["Apple", "Banana", "Orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

خروجی:

Apple
Banana
Orange

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

تفاوت for معمولی و for...of

روش معمولی:

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

روش for...of:

for (let fruit of fruits) {
    console.log(fruit);
}

اگر به Index نیاز داشته باشیم، for معمولی می‌تواند مناسب‌تر باشد.

اگر فقط می‌خواهیم مقدار هر عنصر را دریافت کنیم، for...of خواناتر است.

آرایه و شرط if

می‌توانیم آرایه را با شرط‌ها ترکیب کنیم.

مثلاً:

let numbers = [10, 15, 20, 25, 30];

for (let number of numbers) {

    if (number > 20) {
        console.log(number);
    }
}

خروجی:

25
30

در این مثال از دو مفهوم مهم قبلی استفاده کرده‌ایم:

• حلقه

• شرط

مثال کاربردی: محاسبه مجموع قیمت‌ها

فرض کنید قیمت چند محصول را داریم:

let prices = [100000, 250000, 300000, 150000];

let total = 0;

for (let price of prices) {
    total += price;
}

console.log(total);

خروجی:

800000

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

مثال کاربردی: پیدا کردن بزرگ‌ترین عدد

فرض کنید:

let numbers = [15, 42, 8, 73, 21];

let max = numbers[0];

for (let number of numbers) {

    if (number > max) {
        max = number;
    }
}

console.log(max);

خروجی:

73

در این مثال ابتدا اولین عنصر را به‌عنوان بزرگ‌ترین مقدار در نظر گرفتیم و سپس بقیه عناصر را بررسی کردیم.

مثال کاربردی: شمارش اعداد زوج

let numbers = [10, 15, 22, 31, 40, 55];

let count = 0;

for (let number of numbers) {

    if (number % 2 === 0) {
        count++;
    }
}

console.log(count);

خروجی:

3

سه عدد زوج در آرایه وجود دارد.

آرایه تو در تو (دو بعدی)

یک آرایه می‌تواند شامل آرایه‌های دیگری نیز باشد.

مثلاً:

let numbers = [
    [1, 2, 3],
    [4, 5, 6]
];

در این حالت:

console.log(numbers[0]);

خروجی:

[1, 2, 3]

برای دسترسی به عدد ۵:

console.log(numbers[1][1]);

خروجی:

5

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

کپی کردن آرایه

هنگام کار با آرایه‌ها باید با مفهوم Reference نیز آشنا شویم.

مثلاً:

let numbers = [1, 2, 3];

let otherNumbers = numbers;

otherNumbers.push(4);

console.log(numbers);

خروجی:

[1, 2, 3, 4]

چرا آرایه اصلی نیز تغییر کرد؟

زیرا numbers و otherNumbers به همان آرایه اشاره می‌کنند.

برای ساخت یک کپی مستقل می‌توانیم از Spread Operator استفاده کنیم:

let numbers = [1, 2, 3];

let otherNumbers = [...numbers];

otherNumbers.push(4);

console.log(numbers);
console.log(otherNumbers);

خروجی:

[1, 2, 3]
[1, 2, 3, 4]

Spread Operator را در بخش جاوااسکریپت مدرن با جزئیات بیشتری بررسی خواهیم کرد.

اشتباهات رایج در کار با آرایه‌ها

۱. فراموش کردن اینکه Index از صفر شروع می‌شود

اشتباه:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[1]);

اگر انتظار داشته باشید Apple نمایش داده شود، اشتباه است.

Index اول:

0 → Apple
1 → Banana
2 → Orange

۲. دسترسی به Index ناموجود

let fruits = ["Apple", "Banana"];

console.log(fruits[10]);

نتیجه:

undefined

چون چنین Indexای وجود ندارد.

۳. استفاده اشتباه از <=

اشتباه:

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

بهتر است بنویسیم:

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

۴. اشتباه گرفتن push و unshift

push به انتها اضافه می‌کند:

fruits.push("Mango");

unshift به ابتدا اضافه می‌کند:

fruits.unshift("Mango");

۵. اشتباه گرفتن pop و shift

pop از انتها حذف می‌کند.

shift از ابتدا حذف می‌کند.

نکات مهم برای کار با Array

هنگام کار با آرایه‌ها این موارد را به خاطر بسپارید:

• Index آرایه از صفر شروع می‌شود.

• length تعداد عناصر را مشخص می‌کند.

• push() به انتها اضافه می‌کند.

• pop() از انتها حذف می‌کند.

• unshift() به ابتدا اضافه می‌کند.

• shift() از ابتدا حذف می‌کند.

• includes() وجود یک مقدار را بررسی می‌کند.

• indexOf() محل یک مقدار را پیدا می‌کند.

• slice() بخشی از آرایه را استخراج می‌کند.

• splice() برای حذف، اضافه یا جایگزینی عناصر استفاده می‌شود.

• for و for...of برای پیمایش آرایه کاربرد دارند.

تمرین‌های عملی

تمرین ۱

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

تمرین ۲

آرایه‌ای شامل چند عدد ایجاد کنید و مجموع تمام اعداد را محاسبه کنید.

مثلاً:

let numbers = [10, 20, 30, 40];

تمرین ۳

برنامه‌ای بنویسید که تعداد اعداد زوج یک آرایه را محاسبه کند.

تمرین ۴

یک آرایه از نام چند شهر ایجاد کنید و بررسی کنید آیا "Istanbul" در آرایه وجود دارد یا خیر.

از includes() استفاده کنید.

تمرین ۵

یک آرایه از پنج عدد ایجاد کنید، سپس:

1. عدد اول را حذف کنید.

2. یک عدد جدید به انتهای آرایه اضافه کنید.

3. آرایه نهایی را نمایش دهید.

تمرین ۶

بزرگ‌ترین عدد یک آرایه را بدون استفاده از Math.max() پیدا کنید.

تمرین چالشی

آرایه زیر را در نظر بگیرید:

let numbers = [12, 7, 25, 4, 18, 31, 9];

برنامه‌ای بنویسید که:

1. تعداد عناصر را نمایش دهد.

2. مجموع عناصر را محاسبه کند.

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

4. بزرگ‌ترین عدد را پیدا کند.

5. کوچک‌ترین عدد را پیدا کند.

6. فقط اعداد زوج را نمایش دهد.

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

جمع‌بندی

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

یاد گرفتیم:

• آرایه چیست.

• چگونه یک Array ایجاد کنیم.

• Index چگونه کار می‌کند.

• چرا Index از صفر شروع می‌شود.

• چگونه به عناصر آرایه دسترسی پیدا کنیم.

• چگونه مقدار یک عنصر را تغییر دهیم.

• چگونه تعداد عناصر را با length به دست آوریم.

• چگونه با push() و unshift() عنصر اضافه کنیم.

• چگونه با pop() و shift() عنصر حذف کنیم.

• چگونه آرایه را با حلقه پیمایش کنیم.

• چگونه با indexOf() جستجو کنیم.

• چگونه با includes() وجود یک عنصر را بررسی کنیم.

• چگونه با slice() بخشی از آرایه را دریافت کنیم.

• چگونه با splice() عناصر را حذف یا اضافه کنیم.

• چگونه آرایه‌ها را مرتب و معکوس کنیم.

• چگونه از for...of استفاده کنیم.

• چگونه آرایه را با شرط‌ها و حلقه‌ها ترکیب کنیم.

• مفهوم ساده Reference در آرایه‌ها چیست.

• چگونه یک کپی مستقل از آرایه ایجاد کنیم.

آرایه‌ها یکی از پایه‌های اصلی جاوااسکریپت هستند و در پروژه‌های واقعی تقریباً همیشه با آن‌ها سروکار خواهید داشت.