วน loop For ใน JavaScript

รูปแบบวนลูปสามารถปฏิบัติการบล็อครหัสหลายครั้ง。

รูปแบบวนลูป JavaScript

หากคุณต้องการปฏิบัติการรหัสหลายครั้งและใช้ค่าที่แตกต่างกันในแต่ละครั้ง รูปแบบ loop มีความสะดวกในการใช้งานอย่างมาก。

สามารถเจอตัวอย่างในการใช้แบบฟอร์มหลายครั้งที่แยกต่างกัน:

ไม่ควรเขียนอย่างนี้:

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

คุณสามารถเขียนได้เช่นนี้ :

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

ทดลองด้วยตัวเอง

ชนิดวนลูปต่างๆ

JavaScript สนับสนุนชนิดวนลูปต่างๆ :

  • for - วนลูปบล็อครหัสหลายครั้ง
  • for/in - วนลูปของอาทิตย์
  • while - วนลูปบล็อครหัสเมื่อเงื่อนไขที่กำหนดเป็น true
  • do/while - วนลูปบล็อครหัสเมื่อเงื่อนไขที่กำหนดเป็น true

วนลูป For

วนลูป for คือเครื่องมือที่ใช้บ่อยที่สุดเมื่อคุณต้องการทำวนลูป

ความเข้าใจของวนลูป for คือ :

for (ประโยค 1; ประโยค 2; ประโยค 3) {
     บล็อครหัสที่ต้องการทำงาน
}

ประโยค 1 จะทำงานก่อนที่จะเริ่มวนลูป (ลูป หรือ บล็อครหัส)

ประโยค 2 กำหนดเงื่อนไขที่ต้องการวนลูป (ลูป หรือ บล็อครหัส)

ประโยค 3 จะทำงานในแต่ละครั้งที่วนลูปทำงาน (ลูป หรือ บล็อครหัส)

ตัวอย่าง

for (i = 0; i < 5; i++) {
     text += "เลขเป็น " + i + "<br>";
}

ทดลองด้วยตัวเอง

จากโค้ดดังกล่าวคุณสามารถเข้าใจได้ว่า :

ประโยค 1 จะตั้งค่าตัวแปรก่อนที่จะเริ่มวนลูป (var i = 0)

ประโยค 2 กำหนดเงื่อนไขที่ต้องการวนลูป (i ต้องเป็นน้อยกว่า 5)

ประโยค 3 จะเพิ่มค่าในแต่ละครั้งที่วนลูปทำงาน (i++)

ประโยค 1

ปกติแล้วคุณจะใช้ประโยค 1 ในการตั้งค่าตัวแปรที่ใช้ในวนลูป (i = 0)

แต่บางครั้งไม่ได้เช่นนั้น JavaScript จะไม่สนใจนัก ประโยค 1 ก็สามารถละเลยได้

คุณสามารถตั้งค่าหลายค่าในประโยค 1 (ด้วยการแยกด้วย comma) :

ตัวอย่าง

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

และคุณยังสามารถละเลยประโยค 1 (เช่น ตั้งค่าค่าตั้งต้นก่อนที่จะเริ่มวนลูป) :

ตัวอย่าง

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ประโยค 2

ปกติแล้วประโยค 2 จะใช้ในการคำนวณเงื่อนไขของตัวแปรตั้งต้น

แต่บางครั้งไม่ได้เช่นนั้น JavaScript จะไม่สนใจนัก ประโยค 2 ก็สามารถละเลยได้

ถ้าประโยค 2 กลับค่า true ลูปจะเริ่มวนอีกครั้ง ถ้ากลับค่า false ลูปจะจบลง

ถ้าละเลยประโยค 2 ก็จะต้องมีการใส่ประโยคในวนลูป breakถ้าไม่มีประโยค 3 ก็จะไม่มีการหยุดวนลูป โปรดอ่านเพิ่มเติมเกี่ยวกับ break ในบทถัดไป

ประโยค 3

ปกติแล้วประโยค 3 จะเพิ่มค่าของตัวแปรตั้งต้น

แต่บางครั้งไม่ได้เช่นนั้น JavaScript จะไม่สนใจนัก ประโยค 3 ก็สามารถละเลยได้

สำหรับประโยค 3 สามารถทำอะไรได้ทุกอย่าง อย่างเช่น ลดค่า (i--) หรือเพิ่มค่า (i = i + 15) หรืออะไรอื่นๆ อีกด้วย

คำสั่ง 3 ก็สามารถละเลยได้ (เช่นเมื่อคุณเพิ่มค่าในวนลูป):

ตัวอย่าง

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

ทดลองด้วยตัวเอง

วน For/In

JavaScript for/in คำสั่งวนบวกค่าพื้นที่เพื่อให้เห็น

ตัวอย่าง

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

ทดลองด้วยตัวเอง

วน while

เราจะเรียนวนวน while และ do/while ในบทถัดไป

หนังสือเรียนเพิ่มเติม

ข้อมูลเพิ่มเติมเกี่ยวกับ คำสั่ง for ของ JavaScriptสำหรับความรู้เกี่ยวกับ

คำสั่งทำงาน ECMAScript
คำสั่งทำงานวน หรือที่เรียกว่า คำสั่งวน นี้เพื่อนำเสนอคำสั่งทำงานวนสี่รูปแบบที่เปิดเผยโดย ECMAScript