ลูป: for, while, for...of

ทำคำสั่งซ้ำ ๆ โดยไม่ต้องเขียนซ้ำ ด้วยลูป for, while และ for...of

7 นาที · 3 คำถาม

ลองนึกภาพว่าคุณต้องแสดงข้อความต้อนรับให้ผู้ใช้ 100 คน การคัดลอกบรรทัดเดิม 100 ครั้งคงน่าเบื่อและเกิดข้อผิดพลาดง่าย ลูป (loop) คือโครงสร้างที่ทำบล็อกคำสั่งซ้ำหลาย ๆ ครั้ง JavaScript มีลูปให้เลือกหลายแบบ เรามาเริ่มกันที่ตัวที่รู้จักกันดีที่สุด นั่นคือลูป for

for (let i = 1; i <= 3; i++) {
  console.log("Round number " + i);
}
// Prints: Round number 1
// Prints: Round number 2
// Prints: Round number 3

บรรทัด for (let i = 1; i <= 3; i++) อ่านได้เป็นสามส่วนที่คั่นด้วยเครื่องหมายอัฒภาค ได้แก่ จุดเริ่มต้น (let i = 1 สร้างตัวนับชื่อ i โดยตั้งค่าเป็น 1), เงื่อนไข (i <= 3 ลูปจะทำงานต่อไปตราบเท่าที่เงื่อนไขนี้เป็นจริง) และ ขั้น (step) (i++ บวก 1 ให้ i หลังจบแต่ละรอบ) ลูปจะหยุดทันทีที่เงื่อนไขกลายเป็นเท็จ

ลูป while เรียบง่ายกว่า มันทำบล็อกซ้ำตราบเท่าที่เงื่อนไขเป็นจริง คุณจะใช้มันเมื่อไม่ทราบจำนวนรอบล่วงหน้า

let batteryLevel = 3;

while (batteryLevel > 0) {
  console.log("Battery: " + batteryLevel);
  batteryLevel = batteryLevel - 1;
}
console.log("Battery empty!");

สุดท้าย ลูป for...of จะวนผ่านค่าต่าง ๆ ในคอลเลกชันโดยตรง เช่น อาร์เรย์ (รายการของค่า ซึ่งคุณจะได้ศึกษาอย่างละเอียดในบทที่ 5) ในแต่ละรอบ ตัวแปรจะได้รับค่าถัดไป โดยไม่ต้องจัดการตัวนับ

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}
// Prints: apple, then banana, then cherry

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. บล็อกของ for (let i = 0; i < 3; i++) ทำงานกี่ครั้ง?
   • 2 ครั้ง
   • 3 ครั้ง
   • 4 ครั้ง
2. ลูปใดวนผ่านค่าต่าง ๆ ในอาร์เรย์โดยตรง โดยไม่ต้องใช้ตัวนับ?
   • for...of
   • while
   • if
3. จะเกิดอะไรขึ้นถ้าเงื่อนไขของลูป while ไม่มีวันกลายเป็นเท็จ?
   • ลูปหยุดหลังจาก 1000 รอบ
   • JavaScript ข้ามลูปไป
   • ลูปทำงานไม่รู้จบและโปรแกรมค้าง