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

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش Directive‌ های Vue.js | استفاده از v-model، v-bind و v-show با مثال
23م آذر 1404

آموزش Directive‌ های Vue.js | استفاده از v-model، v-bind و v-show با مثال

مطالعه بیشتر
آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر
2م بهمن 1402

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

مطالعه بیشتر
آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها
28م مهر 1403

آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها

مطالعه بیشتر
آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی
4م آبان 1403

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

مطالعه بیشتر
مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان
4م شهریور 1402

مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان

مطالعه بیشتر
آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML
10م شهریور 1402

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

مطالعه بیشتر
درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی
24م آذر 1404

درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی

مطالعه بیشتر
آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب
9م آبان 1403

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

مطالعه بیشتر
مقدمه‌ای به رویدادها و دستورات در Vue.js: نحوه مدیریت و استفاده از v-on
28م شهریور 1402

مقدمه‌ای به رویدادها و دستورات در Vue.js: نحوه مدیریت و استفاده از v-on

مطالعه بیشتر
استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی
10م آبان 1403

استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی

مطالعه بیشتر
کنترل زمان‌بندی و اندازه‌گیری دقیق انیمیشن‌ها در CSS: آموزش جامع و اصول استاندارد
18م شهریور 1402

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

مطالعه بیشتر
آموزش متغیرهای سفارشی (Custom Properties) در CSS: نحوه تعریف و استفاده از var
18م شهریور 1402

آموزش متغیرهای سفارشی (Custom Properties) در CSS: نحوه تعریف و استفاده از var

مطالعه بیشتر

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