3 نکته مهم حلقه‌های forEach در جاوااسکریپت

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 23 مرداد 1398
دسته بندی ها : جاوا اسکریپت

شاید واقعا فکر کنید که همه چیز را در ارتباط با حلقه‌های forEach در جاوااسکریپت می‌دانید. خب منم همین فکر را داشتم تا اینکه کلمات کلیدی مانند break، return و continue را در یک حلقه مشاهده کردم.

امروز قصد دارم به عنوان یک نکته کوچک به شما در ارتباط با این سه کلمه کلیدی در یک حلقه توضیحاتی ارائه دهم.

۱. کلمه کلیدی return حلقه را متوقف نمی‌کند

فکر می‌کنید که حلقه زیر اعداد ۱ و ۲ را چاپ کرده و متوقف می‌شود؟

array = [1, 2, 3, 4];
array.forEach(function (element) {
  console.log(element);
  
  if (element === 2) 
    return;
  
});
// Output: 1 2 3 4

اینگونه نیست. اگر قبلا با زبانی مانند جاوا کار کرده باشید ممکن است از خودتان بپرسید که چگونه چنین چیزی ممکن است.

دلیل این اتفاق در جاوااسکریپت این است که ما یک تابع callback را در داخل تابع forEach قرار داده‌ایم که به این معناست درست مانند یک تابع عادی برخورد کرده و روی تمام المان‌ها اجرا می‌شود. بنابراین نمی‌توان حلقه را روی یک المان خاص نگه‌داشت.

مطابق با تعریفی که MDN ارائه کرده:

هیچ راهی برای متوقف کردن یک حلقه forEach بجز قرار گرفتن یک استثنا در آن نیست. اگر قصد دارید که در حلقه قابلیت break داشته باشید نیاز است که از یک ساختار دیگر بجز forEach استفاده کنید. 

اگر همین حالت را به شکل دیگری پیاده‌سازی کنیم:

const array = [1, 2, 3, 4];
const callback = function(element) {
    console.log(element);
    
    if (element === 2) 
      return; // would this make a difference? no.
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}
// Output: 1 2 3 4

باز هم کلمه کلیدی return کار خاصی را انجام نمی‌دهد چرا که ما یک تابع را روی هر المان در هر تکرار اعمال کرده‌ایم.

۲. شما نمی‌توانید break کنید

نظرتان در مورد کدهای زیر چیست؟ آیا break باعث متوقف کردن forEach می‌شود؟

const array = [1, 2, 3, 4];
array.forEach(function(element) {
  console.log(element);
  
  if (element === 2) 
    break;
});
// Output: Uncaught SyntaxError: Illegal break statement

در این حالت برنامه حتی اجرا نمی‌شود چرا که دستور break به صورت تکنیکی متعلق به یک حلقه نیست. 

راه حل؟

از یک حلقه عادی for استفاده کنید. اینگونه کسی با کدهای شما مشکلی ندارد:

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
  
  if (array[i] === 2) 
    break;
}
// Output: 1 2

۳. در ارتباط با کلمه کلیدی continue چه؟

انتظار دارید که کدهای زیر مقدار ۲ را نادیده گرفته و بقیه آرایه را چاپ کند؟

const array = [1, 2, 3, 4];
array.forEach(function (element) {
  if (element === 2) 
    continue;
  
  console.log(element);
});
// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

خیر، چرا که درست مانند break دستور continue به این شکل متعلق به حلقه forEach نیست.

راه‌حل این حالت نیز درست مانند گزینه قبلی است: از یک حلقه ساده for استفاده کنید:

for (let i = 0; i < array.length; i++) {
  if (array[i] === 2) 
    continue;
  
  console.log(array[i]);
}
// Output: 1 3 4

این هم از مطلب کوتاه ما، امیدوارم نکته‌های ماجرا را گرفته باشید.

منبع

مقالات پیشنهادی

  • 10 نمونه از یادگیری ماشین در جاوااسکریپت

    با گذشت سال‌ها کتابخانه‌های مربوط به یادگیری ماشین سریع‌تر و بیشتر قابل دسترس خواهند بود. هیچ نشانه‌ای از عقب ماندن وجود ندارد. با وجود آنکه پایتون به...

    ارسطو عباسی
  • 5 نکته مهم برای طراحی وبسایت‌های فروشگاهی

    تجارت‌های آنلاین هر روز در حال پیشرفت و رشد هستند امسال پیش‌بینی می‌شود که ۱۸٪ از کل موارد مربوط به خرده‌فروشی از طریق فروشگاه‌های آنلاین انجام شود. م...

    ارسطو عباسی