آرایهها (Arrays) یکی از ساختارهای دادهای مهم در جاوا اسکریپت هستند که به ما امکان ذخیره و مدیریت مجموعهای از دادهها را به صورت منظم و ساختار یافته میدهند. این مقاله به شما نحوهی ایجاد، دسترسی، و اصلاح آرایهها را در جاوا اسکریپت آموزش میدهد.
آرایهها ساختارهای دادهای هستند که میتوانند مقادیر متعددی را در یک متغیر ذخیره کنند. این مقادیر که به آنها عناصر (Elements) میگوییم، میتوانند از هر نوع دادهای باشند، از جمله اعداد، رشتهها، اشیاء و حتی توابع.
ایجاد آرایهها
آرایهها در جاوا اسکریپت را میتوان به دو روش اصلی ایجاد کرد:
const fruits = ['apple', 'banana', 'cherry'];
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']
جاوا اسکریپت مجموعهای از متدهای داخلی را فراهم میکند که به شما اجازه میدهند تا به راحتی آرایهها را اصلاح و مدیریت کنید.
این متد یک یا چند عنصر را به انتهای آرایه اضافه میکند و طول جدید آرایه را برمیگرداند.
const fruits = ['apple', 'banana'];
fruits.push('cherry');
console.log(fruits); // Output: ['apple', 'banana', 'cherry']
این متد آخرین عنصر را از آرایه حذف میکند و آن عنصر را برمیگرداند.
const fruits = ['apple', 'banana', 'cherry'];
const lastFruit = fruits.pop();
console.log(lastFruit); // Output: cherry
console.log(fruits); // Output: ['apple', 'banana']
این متد یک یا چند عنصر را به ابتدای آرایه اضافه میکند و طول جدید آرایه را برمیگرداند.
const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
console.log(fruits); // Output: ['apple', 'banana', 'cherry']
این متد اولین عنصر را از آرایه حذف میکند و آن عنصر را برمیگرداند.
const fruits = ['apple', 'banana', 'cherry'];
const firstFruit = fruits.shift();
console.log(firstFruit); // Output: apple
console.log(fruits); // Output: ['banana', 'cherry']
این متد میتواند برای اضافه کردن یا حذف عناصر از هر نقطهای در آرایه استفاده شود.
نحوه استفاده از 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():
const fruits = ['apple', 'banana', 'cherry', 'date'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ['banana', 'cherry']
در این مثال، slice() عناصر از اندیس 1 تا (3-1) را برمیگرداند.
پیمایش آرایهها به معنای اجرای یک تابع یا عملیات برای هر عنصر آرایه است.
const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:
// apple
// banana
// cherry
forEach() یک تابع را برای هر عنصر آرایه اجرا میکند.
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// apple
// banana
// cherry
این متد یک تابع را برای هر عنصر آرایه اجرا میکند و یک آرایه جدید با نتایج برمیگرداند.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // Output: [2, 4, 6, 8]
این متد آرایهای از عناصری را که با شرط خاصی مطابقت دارند، برمیگرداند.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
این متد برای کاهش (تجمیع) آرایه به یک مقدار واحد استفاده میشود.
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
مطالعه بیشتر
آموزش ساخت Toggle Switch با CSS: طراحی دکمههای تغییر وضعیت جذاب و واکنشگرا
16م آبان 1403
مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفیسازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
آموزش کامل کار با آرایهها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش
2م شهریور 1403
مطالعه بیشتر
توابع فلش (Arrow Functions) در جاوا اسکریپت: سادهسازی کد با استفاده از ES6
2م شهریور 1403
مطالعه بیشتر
آموزش ایجاد و حذف المانهای DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی
2م آبان 1403
مطالعه بیشتر
آموزش طراحی و استایلدهی جدولها در CSS: راهنمای ساده و کاربردی
10م شهریور 1402
مطالعه بیشتر
آموزش توسعه بازیهای ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام
5م آبان 1403
مطالعه بیشتر
آموزش استایلدهی لینکها در CSS: طراحی و تنظیمات ساده برای لینکهای HTML
7م شهریور 1402
مطالعه بیشتر
آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر بهصورت دقیق
12م آبان 1403
مطالعه بیشتر
آموزش کامنتها و کاراکترهای خاص در HTML و CSS: نحوه استفاده و مدیریت
23م مرداد 1402
مطالعه بیشتر
آموزش استفاده از تگهای خاص HTML: تگهای کاربردی برای طراحی وبسایت
22م مرداد 1402
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد