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

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

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

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

آرایه‌ها (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 در سئو: راهنمای جامع بهینه‌سازی وب‌سایت

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

25م مرداد 1402

مطالعه بیشتر

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

16م آبان 1403

مطالعه بیشتر

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

2م شهریور 1403

مطالعه بیشتر

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

2م شهریور 1403

مطالعه بیشتر

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

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

2م آبان 1403

مطالعه بیشتر

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

10م شهریور 1402

مطالعه بیشتر

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

5م آبان 1403

مطالعه بیشتر

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

7م شهریور 1402

مطالعه بیشتر

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

12م آبان 1403

مطالعه بیشتر

آموزش کامنت‌ها و کاراکترهای خاص در HTML و CSS: نحوه استفاده و مدیریت

آموزش کامنت‌ها و کاراکترهای خاص در HTML و CSS: نحوه استفاده و مدیریت

23م مرداد 1402

مطالعه بیشتر

آموزش استفاده از تگ‌های خاص HTML: تگ‌های کاربردی برای طراحی وب‌سایت

آموزش استفاده از تگ‌های خاص HTML: تگ‌های کاربردی برای طراحی وب‌سایت

22م مرداد 1402

مطالعه بیشتر

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