متدهای آرایه که هر توسعه‌دهنده‌ای باید به آن‌ها مسلط باشد

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

چرا باید بر متدهای آرایه مسلط شویم؟

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

متدهای ضروری آرایه

۱. پیمایش آرایه‌ها: forEach()

متد forEach() یک تابع ارائه شده را برای هر عنصر در آرایه یک بار اجرا می‌کند. این یک راه ساده برای پیمایش عناصر آرایه و انجام عملیات روی آن‌ها است.

نحوه استفاده (Syntax):

array.forEach(function(currentValue, index, array) {
  // کدی که برای هر عنصر اجرا می‌شود
});

مثال:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
  console.log(number * 2);
});
// خروجی: 2, 4, 6, 8, 10

مورد استفاده: نمایش آیتم‌ها در یک لیست، به‌روزرسانی خصوصیات عناصر آرایه.

۲. تبدیل آرایه‌ها: map()

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

نحوه استفاده (Syntax):

const newArray = array.map(function(currentValue, index, array) {
  // مقدار تبدیل شده را بازگردانید
});

مثال:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);
// خروجی: [1, 4, 9, 16, 25]

مورد استفاده: قالب‌بندی داده‌ها برای نمایش، تبدیل واحدها، ایجاد یک آرایه جدید با مقادیر اصلاح شده.

مثال جهانی: تصور کنید آرایه‌ای از مقادیر ارزی به دلار آمریکا (USD) دارید و باید آن‌ها را به یورو (EUR) تبدیل کنید. می‌توانید از map() به همراه یک API نرخ ارز برای ایجاد آرایه‌ای جدید از مقادیر به یورو استفاده کنید.

۳. فیلتر کردن آرایه‌ها: filter()

متد filter() یک آرایه جدید با تمام عناصری که از آزمون پیاده‌سازی شده توسط تابع ارائه شده عبور می‌کنند، ایجاد می‌کند. این متد برای انتخاب عناصر خاص از یک آرایه بر اساس یک شرط، عالی است.

نحوه استفاده (Syntax):

const newArray = array.filter(function(currentValue, index, array) {
  // برای نگه داشتن عنصر true و برای حذف آن false بازگردانید
});

مثال:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// خروجی: [2, 4, 6]

مورد استفاده: حذف داده‌های ناخواسته، انتخاب آیتم‌ها بر اساس معیارهای جستجو، فیلتر کردن داده‌ها بر اساس ترجیحات کاربر.

مثال جهانی: آرایه‌ای از اشیاء کاربر از کشورهای مختلف را در نظر بگیرید. می‌توانید از filter() برای ایجاد یک آرایه جدید که فقط شامل کاربران یک کشور خاص مانند «ژاپن» یا «برزیل» است، استفاده کنید.

۴. کاهش آرایه‌ها: reduce()

متد reduce() یک تابع کاهنده (reducer) (که شما ارائه می‌دهید) را روی هر عنصر از آرایه اجرا می‌کند و در نتیجه یک مقدار خروجی واحد به دست می‌آید. این متد برای انجام محاسبات و تجمیع داده‌های آرایه قدرتمند است.

نحوه استفاده (Syntax):

const result = array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // accumulator به‌روز شده را بازگردانید
}, initialValue);

مثال:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// خروجی: 15

مورد استفاده: محاسبه مجموع، میانگین، یافتن مقادیر حداکثر یا حداقل، الحاق رشته‌ها.

مثال جهانی: فرض کنید آرایه‌ای از آمار فروش مناطق مختلف (مانند آمریکای شمالی، اروپا، آسیا) دارید. می‌توانید از reduce() برای محاسبه کل فروش جهانی استفاده کنید.

۵. جستجو در آرایه‌ها: find()، findIndex()، includes()، indexOf()، lastIndexOf()

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

• find(): مقدار اولین عنصری را در آرایه که تابع تست ارائه شده را برآورده می‌کند، باز می‌گرداند. اگر هیچ عنصری تابع را برآورده نکند، undefined را باز می‌گرداند.
• findIndex(): اندیس اولین عنصری را در آرایه که تابع تست ارائه شده را برآورده می‌کند، باز می‌گرداند. اگر هیچ عنصری تابع را برآورده نکند، -1 را باز می‌گرداند.
• includes(): مشخص می‌کند که آیا یک آرایه شامل مقدار خاصی در بین ورودی‌های خود است یا خیر، و true یا false را باز می‌گرداند.
• indexOf(): اولین اندیسی را که یک عنصر معین می‌تواند در آرایه پیدا شود، باز می‌گرداند، یا اگر وجود نداشته باشد -1 را باز می‌گرداند.
• lastIndexOf(): آخرین اندیسی را که یک عنصر معین می‌تواند در آرایه پیدا شود، باز می‌گرداند، یا اگر وجود نداشته باشد -1 را باز می‌گرداند.

مثال‌ها:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find(number => number > 3);
console.log(foundNumber); // خروجی: 4

const foundIndex = numbers.findIndex(number => number > 3);
console.log(foundIndex); // خروجی: 3

const includesThree = numbers.includes(3);
console.log(includesThree); // خروجی: true

const indexOfTwo = numbers.indexOf(2);
console.log(indexOfTwo); // خروجی: 1

const lastIndexOfFour = [1, 2, 3, 4, 4, 5].lastIndexOf(4);
console.log(lastIndexOfFour); // خروجی: 4

موارد استفاده: پیدا کردن یک کاربر خاص در یک لیست، بررسی وجود یک آیتم در سبد خرید، تعیین موقعیت یک عنصر در آرایه.

۶. افزودن و حذف عناصر: push()، pop()، shift()، unshift()، splice()

این متدها آرایه اصلی را با افزودن یا حذف عناصر تغییر می‌دهند:

• push(): یک یا چند عنصر را به انتهای آرایه اضافه می‌کند و طول جدید آرایه را باز می‌گرداند.
• pop(): آخرین عنصر را از آرایه حذف می‌کند و آن عنصر را باز می‌گرداند.
• shift(): اولین عنصر را از آرایه حذف می‌کند و آن عنصر را باز می‌گرداند.
• unshift(): یک یا چند عنصر را به ابتدای آرایه اضافه می‌کند و طول جدید آرایه را باز می‌گرداند.
• splice(): محتویات یک آرایه را با حذف یا جایگزینی عناصر موجود و/یا افزودن عناصر جدید در محل تغییر می‌دهد.

مثال‌ها:

const numbers = [1, 2, 3];

numbers.push(4, 5); // 4 و 5 را به انتها اضافه می‌کند
console.log(numbers); // خروجی: [1, 2, 3, 4, 5]

const lastElement = numbers.pop(); // آخرین عنصر (5) را حذف می‌کند
console.log(numbers); // خروجی: [1, 2, 3, 4]
console.log(lastElement); // خروجی: 5

const firstElement = numbers.shift(); // اولین عنصر (1) را حذف می‌کند
console.log(numbers); // خروجی: [2, 3, 4]
console.log(firstElement); // خروجی: 1

numbers.unshift(0); // 0 را به ابتدا اضافه می‌کند
console.log(numbers); // خروجی: [0, 2, 3, 4]

numbers.splice(1, 2, 10, 20); // 2 عنصر را از اندیس 1 حذف کرده و 10 و 20 را درج می‌کند
console.log(numbers); // خروجی: [0, 10, 20, 4]

موارد استفاده: مدیریت یک صف، افزودن آیتم‌ها به سبد خرید، به‌روزرسانی لیست وظایف.

۷. ایجاد زیرآرایه‌ها: slice()

متد slice() یک کپی سطحی از بخشی از یک آرایه را در یک شی آرایه جدید که از start تا end (end شامل نمی‌شود) انتخاب شده است، باز می‌گرداند، جایی که start و end نمایانگر اندیس آیتم‌ها در آن آرایه هستند. آرایه اصلی تغییر نخواهد کرد.

نحوه استفاده (Syntax):

const newArray = array.slice(start, end);

مثال:

const numbers = [1, 2, 3, 4, 5];
const subarray = numbers.slice(1, 4);
console.log(subarray); // خروجی: [2, 3, 4]
console.log(numbers); // خروجی: [1, 2, 3, 4, 5] (آرایه اصلی بدون تغییر)

مورد استفاده: استخراج بخشی از یک آرایه برای پردازش، ایجاد یک کپی از یک آرایه.

۸. مرتب‌سازی آرایه‌ها: sort()

متد sort() عناصر یک آرایه را درجا (in place) مرتب می‌کند و آرایه مرتب شده را باز می‌گرداند. ترتیب مرتب‌سازی پیش‌فرض صعودی است و بر اساس تبدیل عناصر به رشته‌ها و سپس مقایسه توالی مقادیر واحدهای کد UTF-16 آن‌ها ساخته شده است.

نحوه استفاده (Syntax):

array.sort(compareFunction);

compareFunction اختیاری است. اگر حذف شود، عناصر آرایه به رشته تبدیل شده و بر اساس مقدار واحد کد UTF-16 مرتب می‌شوند. اگر می‌خواهید اعداد را به صورت عددی مرتب کنید، باید یک تابع مقایسه ارائه دهید.

مثال‌ها:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // به صورت الفبایی مرتب می‌کند (اعداد را به عنوان رشته در نظر می‌گیرد)
console.log(numbers); // خروجی: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => a - b); // به صورت عددی مرتب می‌کند (صعودی)
console.log(numbers); // خروجی: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => b - a); // به صورت عددی مرتب می‌کند (نزولی)
console.log(numbers); // خروجی: [9, 6, 5, 4, 3, 2, 1, 1]

مورد استفاده: مرتب‌سازی لیستی از محصولات بر اساس قیمت، مرتب‌سازی کاربران بر اساس نام، مرتب‌سازی وظایف بر اساس اولویت.

۹. تست عناصر آرایه: every()، some()

این متدها بررسی می‌کنند که آیا همه یا برخی از عناصر در یک آرایه شرطی را برآورده می‌کنند:

• every(): بررسی می‌کند که آیا همه عناصر در آرایه از آزمون پیاده‌سازی شده توسط تابع ارائه شده عبور می‌کنند یا خیر. این متد یک مقدار بولی باز می‌گرداند.
• some(): بررسی می‌کند که آیا حداقل یک عنصر در آرایه از آزمون پیاده‌سازی شده توسط تابع ارائه شده عبور می‌کند یا خیر. اگر در آرایه عنصری پیدا کند که تابع ارائه شده برای آن true بازگرداند، true را باز می‌گرداند؛ در غیر این صورت false را باز می‌گرداند. این متد آرایه را تغییر نمی‌دهد.

مثال‌ها:

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // خروجی: true

const someOdd = numbers.some(number => number % 2 !== 0);
console.log(someOdd); // خروجی: false

مورد استفاده: اعتبارسنجی داده‌های فرم، بررسی اینکه آیا همه کاربران شرایط و ضوابط را پذیرفته‌اند، تعیین اینکه آیا آیتمی در سبد خرید موجود نیست.

۱۰. پیوستن عناصر آرایه: join()

متد join() یک رشته جدید با الحاق تمام عناصر یک آرایه (یا یک شیء شبه آرایه)، که با کاما یا یک رشته جداکننده مشخص شده از هم جدا شده‌اند، ایجاد و باز می‌گرداند. اگر آرایه فقط یک آیتم داشته باشد، آن آیتم بدون استفاده از جداکننده بازگردانده می‌شود.

نحوه استفاده (Syntax):

const newString = array.join(separator);

مثال:

const words = ["Hello", "World", "!"];
const sentence = words.join(" ");
console.log(sentence); // خروجی: Hello World !

مورد استفاده: ایجاد یک لیست از مقادیر جدا شده با کاما، تولید یک مسیر URL از آرایه‌ای از بخش‌ها.

بهترین شیوه‌ها (Best Practices)

• مقدار بازگشتی را درک کنید: آگاه باشید که هر متد چه چیزی را باز می‌گرداند (یک آرایه جدید، یک مقدار واحد، یک مقدار بولی و غیره).
• تغییرناپذیری (Immutability): متدهایی مانند map()، filter() و slice() آرایه‌های جدیدی ایجاد می‌کنند و داده‌های اصلی را حفظ می‌کنند. تا حد امکان این متدها را به جای متدهایی که آرایه اصلی را تغییر می‌دهند (push()، pop()، shift()، unshift()، splice()، sort()) ترجیح دهید تا از عوارض جانبی غیرمنتظره جلوگیری کنید.
• زنجیره‌سازی (Chaining): چندین متد آرایه را برای انجام عملیات پیچیده به روشی مختصر و خوانا ترکیب کنید. برای مثال:

  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const result = numbers
    .filter(number => number % 2 === 0) // فیلتر کردن اعداد زوج
    .map(number => number * 2); // ضرب در ۲
  console.log(result); // خروجی: [4, 8, 12, 16, 20]

• عملکرد (Performance): در حالی که متدهای آرایه به طور کلی کارآمد هستند، هنگام کار با آرایه‌های بسیار بزرگ، پیامدهای عملکرد را در نظر بگیرید. در برخی موارد، یک حلقه for سنتی ممکن است سریع‌تر باشد.
• خوانایی (Readability): متدی را انتخاب کنید که به بهترین شکل مقصود شما را بیان می‌کند. به عنوان مثال، از forEach() برای پیمایش ساده، map() برای تبدیل و filter() برای انتخاب استفاده کنید.

نتیجه‌گیری

تسلط بر متدهای آرایه جاوا اسکریپت برای هر توسعه‌دهنده وب ضروری است. آن‌ها ابزارهای قدرتمند و کارآمدی برای دستکاری و تبدیل داده‌ها فراهم می‌کنند که منجر به کدی تمیزتر، خواناتر و قابل نگهداری‌تر می‌شود. با درک و به کارگیری مؤثر این متدها، می‌توانید مهارت‌های توسعه خود را به طور قابل توجهی بهبود بخشید و برنامه‌های کاربردی قوی بسازید.

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