[Part 3] JS: Iteration

[Part 3] JS: Iteration

Photo by JJ Ying / Unsplash

ในการเขียนโปรแกรม จะต้องมีการ "วนซ้ำ" เพื่อตรวจสอบข้อมูลจำนวนมากๆ หรือเพื่อใช้สั่งให้ทำงานหลายรอบ

Flowchart

Statement

1. while Loop

ใช้เมื่อไม่ทราบจำนวนรอบที่แน่นอน ลูปจะทำงานตราบใดที่เงื่อนไขเป็นจริง

let i = 1;
while (i < 6) {
  console.log(i);
  i++;
}

Flowchart

Example

  • รับค่า input จากผู้ใช้จนกว่าจะพิมพ์ 0
let input;

while (input !== "0") {
  input = prompt("กรุณาใส่ตัวเลข (พิมพ์ 0 เพื่อจบ):");
  console.log("คุณพิมพ์:", input);
}

2. for Loop

ใช้เมื่อทราบจำนวนรอบที่แน่นอน

for (let i = 1; i < 6; i++) {
  console.log(i);
}

Flowchart

Example

  • โปรแกรมแสดงผลบวกระหว่างเลข 1-100
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log("ผลรวม = " + sum);

3. do...while Loop

ลูปนี้จะทำงานอย่างน้อยหนึ่งครั้งก่อนตรวจสอบเงื่อนไข

let i = 1;
do {
  console.log(i);
  i++;
} while (i < 6);

Example

  • รับค่าจนกว่าผู้ใช้จะพิมพ์ exit
let input;

do {
  input = prompt("กรอกข้อความ (พิมพ์ exit เพื่อออก):");
  console.log("คุณพิมพ์:", input);
} while (input !== "exit");

Control statement (คำสั่งควบคุมลูป)

1. break

ใช้เพื่อออกจากลูปทันทีเมื่อเงื่อนไขเป็นจริง:

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

Flowchart

2. continue

ใช้เพื่อข้ามการทำงานในรอบปัจจุบันและไปยังรอบถัดไปของลูป

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

Flowchart

Nested Loops

การใช้ลูปซ้อนกันเพื่อทำงานกับข้อมูลความซับซ้อนหรือมีมากกกว่า 1 มิติ (multi-dimensional array)

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i = ${i}, j = ${j}`);
  }
}

Flowchart

Example

  • สูตรคูณ 12 แม่
for (let i = 1; i <= 12; i++) {
  console.log(`\n--- Multiplication Table of ${i} ---`);
  for (let j = 1; j <= 12; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

Exercise

  1. รับค่าตัวเลข 5 ตัวจากผู้ใช้ แล้วคำนวณผลรวมและผลคูณของตัวเลขเหล่านั้น
  2. รับชุดตัวเลขจากผู้ใช้ 6 ตัว แยกแสดงเลขคู่และเลขคี่
  3. รับค่า input number จากผู้ใช้แล้ว แสดงผลตัวเลข และแถว ดังนี้
  • number = 1 แสดงผล
1
  • number = 2 แสดงผล
1
1 2
  • number = 4 แสดงผล
1
1 2
1 2 3
1 2 3 4
💡
เว้นบรรทัดใช้คำสั่ง console.log("\n");

Assignment

  • จากโปรแกรมในบทความที่แล้ว ให้เปลี่ยนเงื่อนไขการเช็ค password จากเงื่อนไขเท่ากับตรงๆ เป็น พิมพ์รหัสอะไรก็ได้ แต่โปรแกรมต้องเช็คว่า
    • มีตัวเลขอยู่ใน password นั้นหรือไม่ ถ้าไม่มีให้แสดงผล Wrong format, please include number
    • มีตัวอักษร A อยู่ใน password นั้นหรือไม่ ถ้าไม่มีให้แสดงผล Wrong format, please include some alphabet
    • มีสัญลักษณ๊ @ หรือ # อยู่ password นั้นหรือไม่ ถ้าไม่มีให้แสดงผล Wrong format, please include some symbol
    • user กรอก password มาเกิน 8 ตัวหรือไม่ ถ้าไม่มีให้แสดงผล Wrong format, password too short
💡
String สามารถวนลูปได้ โดยแต่ละลูปจะได้ตัวอักษรแต่ละตัว
👍
เช็คความยาวตัวอักษรจาก method String.length

Reference

[Part 4] Python 101: Iteration
Basic ในการเขียนโปรแกรม จะต้องมีการ ”วนซ้ำ” เพื่อตรวจสอบข้อมูลจำนวนมากๆ หรือเพื่อใช้สั่งให้ทำงานหลายรอบ Flowchart While Loop Definition เป็น loop พื้นฐานที่มีในทุกภาษา syntax ตรงไปตรงมา ทำงานจนไม่เข้าเงื่อนไขของ while จึงจะหยุดทำงาน Syntax i = 1 # define variable while i < 6: # loop until