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

javascript array methods
20 آبان 1403

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

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

یکی از متدهای پرکاربرد map() است که به شما اجازه می‌دهد تا یک تابع را بر روی تمام عناصر یک آرایه اعمال کنید و نتیجه را به‌صورت یک آرایه جدید برگرداند. مثلاً اگر بخواهید تمام اعداد یک آرایه را دو برابر کنید، می‌توانید از این متد استفاده کنید.

متد دیگری که بسیار مفید است، filter() می‌باشد. این متد برای انتخاب عناصری از آرایه که با شرط خاصی مطابقت دارند، استفاده می‌شود. مثلاً ممکن است بخواهید همه‌ی اعداد بزرگتر از ۱۰ را در یک آرایه جدا کنید.

همچنین متد reduce() یکی از ابزارهای قدرتمند برای کاهش آرایه به یک مقدار واحد مانند جمع یا ضرب تمام عناصر است. این متد به شما اجازه می‌دهد تا عملیات پیچیده‌تری را بر روی آرایه انجام دهید.

در اینجا به چند نمونه کد و نحوه استفاده از این متدها خواهیم پرداخت تا درک بهتری از کاربرد هر کدام در پروژه‌های واقعی داشته باشید.


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>مینی لرن - روش‌های آرایه در جاوا اسکریپت</title>
</head>
<body>
    <script>
        const numbers = [1, 2, 3, 4, 5];

        // استفاده از متد map برای دو برابر کردن اعداد
        const doubled = numbers.map(number => number * 2);
        console.log(doubled); // [2, 4, 6, 8, 10]

        // استفاده از متد filter برای فیلتر کردن اعداد بزرگتر از 2
        const greaterThanTwo = numbers.filter(number => number > 2);
        console.log(greaterThanTwo); // [3, 4, 5]

        // استفاده از متد reduce برای جمع کردن همه‌ی اعداد
        const sum = numbers.reduce((total, number) => total + number, 0);
        console.log(sum); // 15
    </script>
</body>
</html>

توضیح کدها به زبان ساده

<!DOCTYPE html>
این خط اعلام می‌کند که سند HTML از نوع HTML5 است.

<html lang="fa">
شروع سند HTML و تعریف زبان آن به فارسی.

<head>
قسمت سربرگ سند که می‌تواند شامل متاداده‌ها، عنوان و لینک‌ها باشد.

<meta charset="UTF-8">
تنظیم رمزگذاری کاراکترها به UTF-8 برای پشتیبانی از تمام کاراکترها.

<title>
این تگ عنوان صفحه را مشخص می‌کند که در برگه مرورگر نمایش داده می‌شود.

</head>
پایان سربرگ سند.

<body>
شروع بدنه سند HTML که محتوای قابل نمایش را شامل می‌شود.

<script>
بلاکی که برای نوشتن کد جاوا اسکریپت استفاده می‌شود.

const numbers = [1, 2, 3, 4, 5];
تعریف یک آرایه از اعداد.

numbers.map(number => number * 2);
ایجاد آرایه جدیدی که تمام عناصر آن دو برابر شده‌اند.

numbers.filter(number => number > 2);
ایجاد آرایه جدید شامل تنها عناصری که بزرگتر از ۲ هستند.

numbers.reduce((total, number) => total + number, 0);
جمع تمامی عناصر آرایه و نمایش نتیجه.

</script>
پایان بلاک کد جاوا اسکریپت.

</body>
پایان بدنه سند HTML.

</html>
پایان سند HTML.

سوالات متداول

؟

چطور می‌توانم به راحتی عناصر یک آرایه را فیلتر کنم؟

؟

متد reduce در چه زمانی کاربرد دارد؟

؟

آیا می‌توانم با استفاده از map، آرایه‌ای با طول متفاوت ایجاد کنم؟