Stay Informed

พื้นฐานของ JavaScript : วนลูป (Loops)

 

📌 พื้นฐานของ JavaScript : วนลูป (Loops)


1️⃣ วนลูปคืออะไร?

  • วนลูปคือคำสั่งที่ใช้ในการทำซ้ำคำสั่งเดิมหลายครั้งตามเงื่อนไข

  • ช่วยลดความซ้ำซ้อนของโค้ด


2️⃣ ประเภทของลูปใน JavaScript

ชนิดของลูป ใช้เมื่อ
for รู้จำนวนรอบแน่นอน
while วนจนกว่าเงื่อนไขจะเป็นเท็จ
do...while ทำอย่างน้อย 1 ครั้งก่อนตรวจสอบเงื่อนไข
for...of วนผ่านค่าในอาร์เรย์ (หรือ iterable object)
for...in วนผ่าน key ของ object


3️⃣ การใช้แต่ละชนิดของลูป


3.1 🔁 for loop

นิยมใช้เมื่อรู้จำนวนรอบแน่นอน

javascript

for (let i = 0; i < 5; i++) { console.log("รอบที่: " + i); }

คำอธิบาย

  • เริ่มจาก i = 0

  • ตรวจสอบเงื่อนไข i < 5

  • ถ้าจริง → รันคำสั่ง → เพิ่มค่า i++ → เช็คใหม่


3.2 🔁 while loop

ใช้เมื่อไม่แน่ใจจำนวนรอบแน่นอน

javascript

let i = 0; while (i < 5) { console.log("รอบที่: " + i); i++; }

คำเตือน: ระวังไม่ให้เขียนจนกลายเป็นลูปไม่รู้จบ (infinite loop)


3.3 🔁 do...while loop

ทำก่อน 1 ครั้ง ค่อยตรวจสอบเงื่อนไข

javascript

let i = 0; do { console.log("รอบที่: " + i); i++; } while (i < 5);

ความแตกต่างจาก while:
do...while จะรันรอบแรกก่อนเช็คเงื่อนไขเสมอ


3.4 🔁 for...of loop

ใช้สำหรับวนผ่านค่าของ Array, String, Set, Map

javascript

let fruits = ["มะม่วง", "ส้ม", "กล้วย"]; for (let fruit of fruits) { console.log(fruit); }

3.5 🔁 for...in loop

ใช้สำหรับวนผ่าน key ของ Object

javascript

let person = { name: "มิว", age: 25, gender: "ชาย" }; for (let key in person) { console.log(key + ": " + person[key]); }

หมายเหตุ:

  • for...in ใช้กับ Object (key)

  • for...of ใช้กับ Array (value)


4️⃣ คำสั่งพิเศษในลูป

🔸 break : หยุดลูปทันที

javascript

for (let i = 0; i < 5; i++) { if (i == 3) break; console.log(i); } // แสดง 0 1 2

🔸 continue : ข้ามรอบนี้ ไปทำรอบถัดไป

javascript

for (let i = 0; i < 5; i++) { if (i == 2) continue; console.log(i); } // แสดง 0 1 3 4

🎯 สรุปแบบภาพรวม

ลูป เหมาะกับอะไร
for จำนวนรอบชัดเจน
while ไม่รู้จำนวนรอบแน่นอน
do...while ทำก่อนตรวจเช็ค
for...of วนค่าจาก Array
for...in วน key ของ Object




Facebook Comment