آموزش رایگان جاوا اسکریپت (JavaScript)

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

4م مهر 1403 محراب حسن زاده
آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

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

 

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

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

 

ایجاد آرایه‌ها

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

استفاده از براکت‌های مربع []


const fruits = ['apple', 'banana', 'cherry'];

 

استفاده از سازنده Array


const fruits = new Array('apple', 'banana', 'cherry');

 

در اکثر موارد، استفاده از براکت‌های مربع روشی مرسوم‌تر و متداول‌تر است.

 

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

عناصر یک آرایه به وسیله اندیس (Index) قابل دسترسی هستند. اندیس‌ها در جاوا اسکریپت از صفر شروع می‌شوند، به این معنی که اولین عنصر آرایه اندیس 0 دارد، دومین عنصر اندیس 1، و به همین ترتیب ادامه می‌یابد.

دسترسی به عناصر با استفاده از اندیس‌ها


const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // Output: apple
console.log(fruits[2]); // Output: cherry

 

تغییر مقادیر عناصر آرایه

برای تغییر مقدار یک عنصر در آرایه، می‌توانید از اندیس آن استفاده کنید:


const fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'blueberry';
console.log(fruits); // Output: ['apple', 'blueberry', 'cherry']

 

متدهای متداول برای اصلاح آرایه‌ها

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

push()

این متد یک یا چند عنصر را به انتهای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند.


const fruits = ['apple', 'banana'];
fruits.push('cherry');
console.log(fruits); // Output: ['apple', 'banana', 'cherry']

 

pop()

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


const fruits = ['apple', 'banana', 'cherry'];
const lastFruit = fruits.pop();
console.log(lastFruit); // Output: cherry
console.log(fruits); // Output: ['apple', 'banana']

 

unshift()

این متد یک یا چند عنصر را به ابتدای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند.


const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
console.log(fruits); // Output: ['apple', 'banana', 'cherry']

 

shift()

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


const fruits = ['apple', 'banana', 'cherry'];
const firstFruit = fruits.shift();
console.log(firstFruit); // Output: apple
console.log(fruits); // Output: ['banana', 'cherry']

 

splice()

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

نحوه استفاده از splice():


const fruits = ['apple', 'banana', 'cherry', 'date'];
// حذف دو عنصر از اندیس 1 و اضافه کردن 'blueberry'
fruits.splice(1, 2, 'blueberry'); 
console.log(fruits); // Output: ['apple', 'blueberry', 'date']

 

در این مثال، splice() دو عنصر را از اندیس 1 حذف می‌کند (banana و cherry) و عنصر 'blueberry' را اضافه می‌کند.

slice()

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

نحوه استفاده از slice():


const fruits = ['apple', 'banana', 'cherry', 'date'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ['banana', 'cherry']

 

در این مثال، slice() عناصر از اندیس 1 تا (3-1) را برمی‌گرداند.

 

پیمایش آرایه‌ها

پیمایش آرایه‌ها به معنای اجرای یک تابع یا عملیات برای هر عنصر آرایه است.

استفاده از حلقه for


const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output:
// apple
// banana
// cherry

 

استفاده از حلقه forEach()

forEach() یک تابع را برای هر عنصر آرایه اجرا می‌کند.


const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// apple
// banana
// cherry

 

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

map()

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


const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

 

filter()

این متد آرایه‌ای از عناصری را که با شرط خاصی مطابقت دارند، برمی‌گرداند.


const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

 

reduce()

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


const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // Output: 10

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت
25م مرداد 1402

کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت

مطالعه بیشتر
آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی
5م آبان 1403

آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی

مطالعه بیشتر
کار با border و تنظیمات آن در CSS: مدیریت زوایای گرد با border-radius
9م آبان 1403

کار با border و تنظیمات آن در CSS: مدیریت زوایای گرد با border-radius

مطالعه بیشتر
معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان
1م آبان 1403

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مطالعه بیشتر
آموزش استایل‌دهی لیست‌ها در CSS: طراحی و استایل‌دهی ul و ol
10م آبان 1403

آموزش استایل‌دهی لیست‌ها در CSS: طراحی و استایل‌دهی ul و ol

مطالعه بیشتر
کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر
16م آبان 1403

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

مطالعه بیشتر
آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402

آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed

مطالعه بیشتر
آموزش کامل تفاوت echo و print در PHP به زبان ساده
21م خرداد 1405

آموزش کامل تفاوت echo و print در PHP به زبان ساده

مطالعه بیشتر
آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام
3م آبان 1403

آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام

مطالعه بیشتر
چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان
2م مهر 1402

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

مطالعه بیشتر
مدیریت رویدادها در جاوا اسکریپت: اضافه و حذف Event Listeners - آموزش جامع با مثال‌ها
2م آبان 1403

مدیریت رویدادها در جاوا اسکریپت: اضافه و حذف Event Listeners - آموزش جامع با مثال‌ها

مطالعه بیشتر
مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی
30م مهر 1403

مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد