การทำซ้ำหรือการวนซ้ำ ( Loop )


           ในการเขียนโปรแกรมขึ้นมาจะมีการสั่งให้โปรแกรมของเราวนทำงานซ้ำๆเช่น ต้องการให้แสดงตารางซ้ำๆ ต้องการให้แสดงเป็นแถวซ้ำๆ เราเขียนโปรแกรมขึ้นมาหรือเว็บขึ้นมาก็เพื่อให้มันทำงานอะไรที่ซ้ำๆได้เร็วกว่าคนทำ เช่น งานเอกสารต้องทำซ้ำๆเหมือนเดิมเราก็เขียนโปรแกรมขึ้นมาจัดการ ได้หรือแม้แต่ใน code ที่เราเขียนนั้นก็มีส่วนในการทำซ้ำๆเยอะเหมือนกัน โดยในการเขียนโค้ด ในจะนำ Loop เข้ามาช่วยในการทำงานซ้ำๆของโค้ด เพื่อประหยัดเวลาในการเขียน
Loop มีอยู่ 4 ประเภท คือ
- for Loop
- while Loop
- do while Loop
- foreach Loop

for loop

หลักการเขียน เงื่อนไข for loop

<script type="text/javascript">
           for ([กำหนดตัวแปรสำหรับเริ่มต้น]; [ถ้าตรงเงื่อนไขจะยังวนลูป]; [เพิ่มค่าตัวแปรไปเรื่อยๆจนกว่าจะพ้นเงื่อนไข]) {
                     // ให้ทำอะไรซักอย่างซ้ำๆ
                     }
</script>

           for Loop เป็นการทำงานซ้ำๆ โดยตอนแรกเราจะกำหนดค่าเริ่มต้นตัวแปร และต่อมาเราทำการเอาค่า ของตัวแปร ไปเช็คเงื่อนไขว่า ค่าของตัวแปร ตรงกับเงื่นไขหรือไม่ ถ้าตรงเงื่อนไข ให้คำสั่งใน for Loop ทำงาน จากนั้นเพิ่มค่าให้ตัวแปรเพื่อเช็คเงื่อนไขรอบต่อไป

ตัวอย่าง for Loop


<script type="text/javascript">
    for(var i=0;i<=10;i++){
        console.log("ข้อมูลที่". i ."<br>");
    }
</script>
                                
while Loop

หลักการเขียน while Loop

ตัวอย่าง while Loop


<script type="text/javascript">
        var x = 1; 
        while(x <= 5) { 
            console.log("แถวที่ : ".x." <br>");
            x++;
        } 
</script>
                                
<script type="text/javascript">
           while ([ถ้าตรงเงื่อนไขจะยังวนลูป]) {
                     // ให้ทำอะไรซักอย่างซ้ำๆ
                     }
</script>

                      ลูปของ while นั้นมันจะแตกต่างกับ for ตรงเราต้องกำหนดเงื่อนไขเองหรือกำหนดการเพิ่มค่าเอง หรือไม่ต้องเพิ่มแต่อาจจะเป็นการเปลี่ยนแปลงค่าอย่างใน code ตัวอย่างนั้นเราจะเห็นว่า เราต้องกำหนดตัวแปร x = 1 ตั้งแต่แรกและมันจะทำการวนทำซ้ำอยู่ 5
do while loop

หลักการเขียน do while loop

<script type="text/javascript">
           do {
                     // ให้ทำอะไรซักอย่างซ้ำๆ
                     }while ([ถ้าตรงเงื่อนไขจะยังวนลูป]);
</script>

                      do while loop จำได้ง่ายๆเหมือนแปลเลยครับ ทำก่อนเช็คเงื่อนไขทีหลัง เหมาะสำหรับพวกแนวๆ ต้องทำอะไรซักอย่างก่อนแล้วค่อยเช็คเงื่อนไข ยกตัวอย่างเช่น ต้องการแสดงข้อมูลอย่างน้อย 1 แถวก่อน ก็สามารถใช้ do while ได้ครับแล้วค่อยเช็คเงื่อนไขต่อว่าต้องวนลูปไหม

ตัวอย่าง do while Loop


<script type="text/javascript">
var i = 0;
    do {
        console.log("รอบที่ : ".i." <br>"); 
        i++; 
    }while (i <= 5);

</script>
foreach loop

หลักการเขียน foreach loop

ตัวอย่าง foreach loop


<script type="text/javascript">
var colors = array("red", "blue", "yellow"); colors.forEach(function(color) { console.log(color); }); </script>
<script type="text/javascript">
           ตัวแปร = array("1", "2", "3", "4");
           foreach (ตัวแปร as ตัวแปรทีมใช้ในการแสดงผล) {
                     console.log(ตัวแปรทีมใช้ในการแสดงผล);
                     }
</script>

                      foreach loop คำสั่งสำหรับการวนลูปการทำงาน ซึ่งมีข้อดีตรงที่ไำม่จำเป็นจะต้องกำหนดจำนวนรอบในการทำงาน ซึ่งคำสั่ง forearch จะทำงานจนหมดรอบด้วยตัวเอง
แบบทดสอบ

Test


1
- เก็บข้อมูล Array 10 ค่า
- แสดงข้อมูลใน Array ด้วย loop for
- แสดงเฉพาะค่าที่ 2 - 8

2
- เก็บข้อมูล Array 10 ค่า
- แสดงข้อมูลใน Array ด้วย loop while
- แสดงเฉพาะค่าที่ 2 - 8

3
- เก็บข้อมูล Array 10 ค่า
- แสดงข้อมูลใน Array ด้วย loop do while
- แสดงเฉพาะค่าที่ 2 - 8

4
- เก็บข้อมูล Array 10 ค่า
- แสดงข้อมูลใน Array ด้วย loop foreach
- แสดงเฉพาะค่าที่ 2 - 8