0Pricing
Frontend Academy · บทเรียน

ลำดับการควบคุม: if else switch for while

แยกแขนงด้วย if/else และ switch วนซ้ำด้วย for กับ while และใช้ break กับ continue เพื่อควบคุมการวนซ้ำ

ลำดับการควบคุม: if else switch for while เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ลำดับการควบคุมคืออะไร

ลำดับการควบคุมกำหนดว่าโค้ดใดจะทำงานและทำงานกี่ครั้ง JavaScript มีเงื่อนไข (if/else, switch) และลูป (for, while, do/while) เพื่อกำหนดเส้นทางการทำงานตามเงื่อนไขและข้อมูล

เงื่อนไข if / else if / else

เงื่อนไขแบบพื้นฐานที่สุด เงื่อนไขในวงเล็บจะถูกประเมินว่าเป็นค่าจริงหรือเท็จ สามารถเชื่อมเงื่อนไขหลายรายการด้วย else if ส่วน else สุดท้ายเป็นทางเลือกสำรองที่ครอบคลุมกรณีอื่นทั้งหมด

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

ตัวดำเนินการแบบสามส่วน

ตัวดำเนินการแบบสามส่วนคือ if/else แบบกระชับในบรรทัดเดียว: condition ? trueValue : falseValue ใช้สำหรับการกำหนดค่าแบบง่ายและนิพจน์ JSX หลีกเลี่ยงการซ้อนตัวดำเนินการแบบสามส่วน เพราะจะอ่านได้ยากอย่างรวดเร็ว

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

คำสั่ง switch

switch เปรียบเทียบค่ากับหลายกรณีโดยใช้ความเท่ากันแบบเคร่งครัด ใช้ break หลังแต่ละกรณีเพื่อป้องกันไม่ให้การทำงานไหลต่อไปยังกรณีถัดไป ส่วน default ใช้จัดการค่าที่ไม่ตรงกับกรณีใด

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

ลูป for

ลูป for แบบ C คลาสสิกประกอบด้วย ตัวกำหนดค่าเริ่มต้น; เงื่อนไข; การเพิ่มค่า เหมาะสำหรับการวนซ้ำตามจำนวนรอบที่ทราบแน่ชัด หรือการวนผ่านอาร์เรย์โดยใช้ดัชนี

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

ลูป for...of

for...of วนซ้ำผ่านค่าของสิ่งที่วนซ้ำได้ทุกชนิด เช่น อาร์เรย์ สตริง แมป และเซต อ่านง่ายกว่าลูป for ที่อิงดัชนีเมื่อคุณไม่จำเป็นต้องใช้ดัชนี

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

ลูป for...in

for...in วนซ้ำผ่าน คีย์พร็อพเพอร์ตี ที่แจกแจงได้ของอ็อบเจ็กต์ อย่าใช้กับอาร์เรย์ ให้ใช้ for...of หรือเมธอดของอาร์เรย์แทน

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

ลูป while

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

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

ลูป do...while

do...while จะทำงานในบล็อกคำสั่งอย่างน้อยหนึ่งครั้งก่อนตรวจสอบเงื่อนไข เหมาะเมื่อบล็อกคำสั่งต้องทำงานก่อนจึงจะประเมินเงื่อนไขออกจากลูปได้

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break และ continue

break ออกจากลูปปัจจุบันทันที ส่วน continue จะข้ามส่วนที่เหลือของรอบปัจจุบันและไปยังรอบถัดไป ทั้งสองคำสั่งใช้ได้กับลูป for, while และ do/while

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

การประเมินแบบลัดวงจร

&& คืนค่าค่แรกที่เป็นเท็จ หรือคืนค่าตัวสุดท้าย ส่วน || คืนค่าค่าแรกที่เป็นจริง หรือคืนค่าตัวสุดท้าย ขณะที่ ?? (การรวมค่าที่ไม่ใช่ null) จะคืนค่าด้านขวาเฉพาะเมื่อด้านซ้ายเป็น null หรือ undefined

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

ตรวจสอบอย่างรวดเร็ว

ลูปใดรับประกันว่าจะทำงานในบล็อกคำสั่งของตน อย่างน้อยหนึ่งครั้ง?

ทบทวน: โฟลว์การควบคุมของ JavaScript

ใช้ if/else สำหรับการแยกทาง ใช้ switch สำหรับค่าที่แยกจากกันหลายค่า ใช้ลูป for เมื่อทราบจำนวนรอบ ใช้ for...of กับสิ่งที่วนซ้ำได้ ใช้ while เมื่อไม่ทราบจำนวนรอบ ใช้ do...while เมื่อต้องทำงานอย่างน้อยหนึ่งครั้ง break ใช้ออกจากลูป และ continue ใช้ข้ามรอบการวนซ้ำ ใช้ตัวดำเนินการแบบลัดวงจรเพื่อเขียนเงื่อนไขให้กระชับ

คำถามที่พบบ่อย

บทเรียน “ลำดับการควบคุม: if else switch for while” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ลำดับการควบคุม: if else switch for while” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ลำดับการควบคุม: if else switch for while”

แยกแขนงด้วย if/else และ switch วนซ้ำด้วย for กับ while และใช้ break กับ continue เพื่อควบคุมการวนซ้ำ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ลำดับการควบคุม: if else switch for while” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวแปร: let const var และขอบเขต
  2. ชนิดข้อมูล: string number boolean null undefined
  3. ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร
  4. ลำดับการควบคุม: if else switch for while
← กลับไปที่ Frontend Academy