Loop (วนซ้ำ)

Loop หรือการทำซ้ำ วนซ้ำนั้นประกอบด้วย 1.For loop และ 2.While loop เป็นหลัก

 

1.For loop 

For loop ใช้ในการทำซ้ำบล็อกของโค้ดหลายรอบ ซึ่ง For มีไวยากรณ์ในลักษณะดังนี้

for(statement1; statement2; statement3){

// block code

}  
  • statement1 เป็นคำสั่งดำเนินการเริ่มต้น ซึ่งจะถูกดำเนินการเพียงครั้งเดียว 
  • statement2 คือเงื่อนไขที่กำหนดให้ loop ดำเนินการต่อไป
  • statement3 คำสั่งที่ถูกดำเนินการทุกครั้งหลังจากดำเนินการบล็อกโค้ดเรียบร้อย

ตัวอย่างที่ 1 For loop

<html>
  <body>

  <h2>JavaScript For Loop</h2>

  <p id="demo"></p>

    <script>
        var fruits = ["Apple" , "Banana" ,"Coconut"];
        var text = "";
        for(var x=0; x<fruits.length; x++){
            text += "No." + x + " " + fruits[x] +"<br>";
        }
        document.getElementById("demo").innerHTML = text;
    </script>

  </body>
</html>

ไฟล์ที่ 1 ตัวอย่าง for loop

จากไฟล์ที่ 1 เป็นตัวอย่างของการใช้ for loop เพื่อแสดงผลข้อมูลประเภทอาเรย์

 

2.While Loop

while loop คือการทำซ้ำหรือวนซ้ำตามเงื่อนไข กรณีที่เงื่อนไขยังคงเป็นจริง โดยไวยากรณ์ของ while loop มีลักษณะดังนี้

while(conditions){
  // code block
}

 

ตัวอย่างที่ 2 while loop

<html>
  <body>

  <h2>JavaScript While Loop</h2>

  <p id="demo"></p>

  <script>
  var i = 0;
  var text = "";

      while(i<10){
          text += "Loop " + i + "<br>";
          i++;
      }

      document.getElementById("demo").innerHTML = text;
  </script>

  </body>
</html>

ไฟล์ที่ 2 ตัวอย่าง while loop

 

3.Break และ Continue

  • break คำสั่งออกจากลูป หรือออกจาการทำซ้ำทันที
  • continue คำสั่งออกจากลูปในรอบปัจจุบัน แต่ทำต่อในรอบถัดไป (ข้ามลูป)

ตัวอย่างที่ 3.1 คำสั่ง break

<html>
 <body>
  <div id="showdata"></div>
 
 <script>
  var text = "";
  for(var x=0; x<10; x++){
  	if(x==5){
    	break;
    }
    text += "รอบที่ " + x + "<br>";
  }
  document.getElementById("showdata").innerHTML = text;
 </script>
 </body>
</html>

ไฟล์ที่ 3.1 break

จากไฟล์ที่ 3.1  x จะมีค่าได้ตั้งแต่ 0 – 4 เนื่องจาก เมื่อถึงรอบที่ 5 คำสั่ง break จะทำงาน และออกจากการวนลูปตามตามเงื่อนไข

 

ตัวอย่างที่ 3.2 คำสั่ง continue

<html>
 <body>
  <div id="showdata"></div>
 
 <script>
  var text = "";
  for(var x=0; x<10; x++){
  	if(x==5){
    	continue;
    }
    text += "รอบที่ " + x + "<br>";
  }
  document.getElementById("showdata").innerHTML = text;
 </script>
 </body>
</html>

ไฟล์ที่ 3.2 continue

จากไฟล์ที่ 3.2 มีการกำหนดเงื่อนไขให้ข้ามรอบที่ x มีค่าเท่ากับ 5 ดังนั้น ผลลัพธ์ที่ได้คือ x มีค่าตั้งแต่ 0-4 (ข้าม 5) ต่อที่  6-9

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: