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

دسته : آموزش رایگان جاوا اسکریپت (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

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

16م آبان 1403

مطالعه بیشتر

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

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

3م آبان 1403

مطالعه بیشتر

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

1م آبان 1403

مطالعه بیشتر

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

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

18م شهریور 1402

مطالعه بیشتر

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

28م مهر 1403

مطالعه بیشتر

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

28م شهریور 1402

مطالعه بیشتر

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

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

11م آبان 1403

مطالعه بیشتر

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

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

2م بهمن 1402

مطالعه بیشتر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

5م شهریور 1402

مطالعه بیشتر

بررسی کتابخانه‌های محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها

بررسی کتابخانه‌های محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها

4م آبان 1403

مطالعه بیشتر

معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی

معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی

28م شهریور 1402

مطالعه بیشتر

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

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

2م شهریور 1403

مطالعه بیشتر

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