انواع حلقه های for در جاوا اسکریپت

یکی از بیشترین حلقه‌های (loop) استفاده شده در جاوا اسکریپت for loop ها هستند و به شما این اجازه را می‌دهند تا یک تکه کد را به تعداد دفعات دلخواه اجرا کنید. ما در کل سه مدل حلقه‌ی for در جاوا اسکریپت داریم: حلقه‌ی استاندارد for , حلقه‌ی for-in و حلقه‌ی for-of . هر کدام از این حلقه‌ها سینتکس و کاربرد منحصر به فرد خود را دارند که دانستن اینکه چه زمانی از هر حلقه استفاده کنیم برای نوشتن کد کارآمد, موثر و ضروری است. در این مقاله به آموزش و بررسی این سه حلقه مختلف و نکات آنها می‌پردازیم.

حلقه for در جاوا اسکریپت

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

• بخش تعریف متغیر
• بخش شرط
• بخش تغییر متغیر

در بخش تعریف متغیر، متغیری تعریف می‌شود که برای کنترل تعداد بارهایی که حلقه اجرا می‌شود، استفاده می‌شود. شرط یک عبارت boolean است که در ابتدای هر تکرار حلقه بررسی می‌شود تا مشخص شود که حلقه باید ادامه یابد یا خیر. در نهایت، بخش تغییر متغیر، برای تغییر مقدار متغیری است که در حلقه استفاده می‌شود.

در زیر، یک مثال از حلقه معمولی for در جاوااسکریپت آورده شده است:

for (let i = 0; i < 5; i++){ 
    console.log(i);
    }

در مثال بالا همانطور که مشاهده می‌کنید، گام های زیر را به ترتیب پیمودیم:

1.  متغییر i را تعریف کردیم.
2. سپس در قسمت شرط گفتیم که متغیر ما باید از 5 کوچکتر باشد.
3. در آخر در قسمت افزایش متغیر با استفاده از ++ که به معنی افزایش به صورت یک واحد یک واحد است مقدار i را با هر بار اجرای حلقه افزایش می‌دهیم.

توجه داشته باشید که قسمت‌های مختلف حلقه‌ی خود را با استفاده از ; جداسازی می‌کنیم. 

چیزی که در لاگ(log) خود مشاهده می‌کنیم اعداد 0 تا 4 است.

حلقه ی for in در جاوا اسکریپت

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

در زیر، یک مثال از حلقه for in در جاوا اسکریپت آورده شده است:

const person = { 
    name: "John", 
    age: 30, 
    gender: "male"
  };
  
  for (let key in person){
   ; console.log(key + ": " + person[key])
  }
  

در مثال بالا ما روی object مورد نظر حلقه ایجاد کردیم. در حلقه‌ی بالا key نقش کلیدها را دارد (یعنی name و age و gender). در صورت اجرای کد، مقادیر موجود در شی در کنسول چاپ می‌شود.

حلقه ی for of در جاوا اسکریپت

در جاوا اسکریپت، حلقه for of، برای حلقه زدن روی array ها است که در ES6 معرفی شد (اگر با آرایه ها آشنایی کافی ندارید؛ می‌توانید به بخش رایگان آموزش آرایه ها در جاوا اسکریپت مراجعه کنید). برای هر تکرار از حلقه، مقدار متغیر حلقه با مقدار فعلی در مجموعه مطابقت دارد.

در زیر، یک مثال از حلقه for of در جاوا اسکریپت آورده شده است:

const array = [1, 2, 3, 4];
for (let key of array) {
  console.log(key);
}

در مثال بالا چیزی که در لاگ مشاهده خواهیم کرد اعداد ۱ تا ۴ هست.

مثال:

در این مثال می‌خواهیم دکمه‌ای درست کنیم که با فشردن آن رنگ div ها از قرمز به سبز تغییر بکند.

ابتدا در سند HTML خود چند div با کلاس box درست می‌کنیم و سپس مقداری استایل اولیه به آن اضافه می‌کنیم:

   <div
        class="box"
        style="
          margin-top: 1rem;
          width: 5rem;
          height: 5rem;
          background-color: red;
        "
      ></div>
      <div
        class="box"
        style="
          margin-top: 1rem;
          width: 5rem;
          height: 5rem;
          background-color: red;
        "
      ></div>
      <div
        class="box"
        style="
          margin-top: 1rem;
          width: 5rem;
          height: 5rem;
          background-color: red;
        "
      ></div>

که به شکل زیر هستند: 

سپس همه‌ی آنها را داخل سند js خود انتخاب  می‌کنیم:

const boxes = document.querySelectorAll(".box");

حال وقت نوشتن حلقه‌ی مورد نظر است. ابتدا داخل حلقه متغیری با نام i ایجاد می‌کنیم (یا هر نام دلخواه دیگری) و مقدار آن را صفر قرار می‌دهیم. داخل قسمت شرط‌ها متغیر را از تعداد div هایی که داریم کوچتر قرار می‌دهیم. دقت داشته باشید که boxes یک NodeList بر می‌گرداند که یک array هست. و در انتها هم مقدار i را افزایش می‌دهیم.

حلقه‌ی ما به شکل زیر می‌شود:

for (let i = 0; i < boxes.length; i++) {
  console.log(boxes[i]);
}

با قرار دادن index یا همان شماره‌ی div خود داخل boxes می‌توانیم به تمامی div های خود دسترسی داشته باشیم. در اصل کد بالا به شکل زیر عمل می‌کند:

console.log(boxes[0]);
console.log(boxes[1]);
console.log(boxes[2]);

حال دکمه‌ی خود را داخل سند HTML خود ایجاد می‌کنیم: 

      <button class="btn">click here</button>

و آن را داخل سند js انتخاب می‌کنیم:

const button = document.querySelector(".btn");

حال یک تابع درست می‌کنیم و حلقه‌ی خود را داخل آن قرار می‌دهیم زیرا می‌خواهیم با استفاده از addEventListener یک رویداد روی دکمه‌ی خود قرار دهیم. مانند زیر:

function buttonHandler() {
  for (let i = 0; i < boxes.length; i++) {
    console.log(boxes[i]);
  }
}

button.addEventListener("click", buttonHandler);

حالا اگر بر روی دکمه کلیک کنیم داخل لاگ خود تمامی box ها را مشاهده می‌کنیم.

اما کاری که ما قرار بود انجام دهیم تغییر رنگ div ها بود. پس وارد استایل می‌شویم و سپس رنگ پس زمینه div های مورد نظر را بدست می‌آوریم و رنگ آنها را تغییر می‌دهیم:

function buttonHandler() {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "green";
  }
}

با کلیک کردن روی دکمه رنگ تمامی div ها از قرمز به سبز تغییر خواهند کرد و مانند زیر می‌شوند:

استفاده کردن ۲ حلقه در همدیگر

ما حتی می‌توانیم ۲ حلقه را همزمان داخل یکدیگر بدون ایجاد مشکلی استفاده کنیم. برای درک بهتر به مثال زیر توجه کنید.

ابتدا یک array و یک object در جاوا اسکریپت، برای شروع کار می‌سازیم:

const array = [1, 2, 3, 4];
const obj2 = { num1: 1, num2: 2, num3: 3 };

سپس با استفاده از for-in روی obj2 حلقه ایجاد می‌کنیم. بعد از این‌کار مقداری با اسم value درست می‌کنیم تا بتوانیم با key های object به مقدار آنها دسترسی داشته باشیم:

for (let key in obj2) {
  const value = obj2[key];
}

اگر value را لاگ بگیریم, اعداد 1 و 2 و 3 را مشاهده می‌کنیم. حال حلقه‌ی دیگری روی array خود ایجاد می‌کنیم. مقداری با اسم index ایجاد می‌کنیم که همان اعداد داخل array هستند. 

for (let key in obj2) {
  const value = obj2[key];

//  new line👇
  for (let index of array) {
  }
}

بعد از درست کردن حلقه,‌ می‌خواهیم چک کنیم که اگر مقدار داخل array با مقدار index برابر بود داخل لاگ به ما ok را نشان بدهد. 

for (let key in obj2) {
  const value = obj2[key];

  for (let index of array) {
    // new line👇
    if (array[value] === index) {
      console.log("ok");
    }
  }
}

که پس از اجرا درون لاگ خود سه عدد ok مشاهده می‌کنیم. ممکن است سوال پیش بیاید که چرا به جای یک ok سه تا ok لاگ گرفته شده است. دلیلش این است که شما دارید اعداد object را به جای ایندکس array می‌گذارید. یعنی:

array[1];
array[2];
array[3];

 و چک می‌کنید که اعداد ۲ و ۳ و ۴ که داخل object هستند داخل array هم باشند. چون شرط داخل if درست هست پس سه بار ok را لاگ می‌گیرد.

جمع بندی

به طور خلاصه حلقه‌ی for در جاوا اسکریپت چند منظوره است و امکان کنترل دقیق اجزای حلقه را فراهم می‌کند. حلقه‌ی for-in برای حرکت روی کلیدهای یک array و object است در حالی که حلقه‌ی for-of فقط بر روی array ها قابل استفاده است. متد forEach هم گزینه دیگری برای تکرار روی آرایه‌ها و اجرای تابعی بر روی هر عنصر است.

برای یادگیری کامل جاوا اسکریپت، به دوره ویدیویی آموزش جاوا اسکریپت سکان آکادمی مراجعه کنید.