[5] เรียนพื้นฐาน JavaScript ตอน Loops

September 14, 2017

Loops ใช้สำหรับสั่งโค้ดให้ทำงานวนซ้ำๆเรื่อยๆ ตามเงื่อนไขของเรา โดย 3 สิ่งที่ loops ทุกชนิดต้องมีคือ

1.บอกว่าเมื่อไหร่จะเริ่มต้น – start

2.บอกว่าเมื่อไหร่ต้องหยุด – stop

3.บอกวิธีที่จะไปสเต็ปถัดไป – step

While Loops

While loops จะทำงานซ้ำๆ ไปเรื่อยๆตราบใดที่เงื่อนไขยังเป็นจริง

//โครงสร้าง
while (condition) {
statement 
}

//โครงสร้างแบบภาษาไทย
ขณะที่ (เงื่อนไขนี้เป็นจริง) {
ให้รันโค้ดนี้
}

ตัวอย่าง While loops

var x = 0; //ประกาศตัวแปร x = 0 ขึ้นมา (เริ่มเมื่อไหร่ - start)

while (x <= 100) { //ในขณะที่ x ยังมีค่าน้อยกว่าหรือเท่ากับ 100 ให้ทำซ้ำไปเรื่อยๆ (หยุดเมื่อไหร่ - stop)
  console.log(x); //ให้ปริ้นค่า x ออกมา
  x = x + 5; // ค่า x ตัวถัดไปจะ +5 ไปเรื่อยๆ เริ่มที่ 0, 5, 10, 15,... เขียนอีกแบบคือ x += 5; (สเต็ป - step)
}

จากโค้ดด้านบน ถ้าเราไม่ใช้ While loops หน้าตาของโค้ดจะออกมาประมาณนี้ ซึ่งยาวมากกกกกก ลองจินตนาการว่า ต้องทำซ้ำ 10,000 รอบ

//ถ้าไม่ใช้ Loops โค้ดจะออกมาหน้าตาแบบนี้
var x = 0;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

var x = x + 5;
console.log(x);

.
.
.
ต่อไปอีกเรื่อยๆ

ตามที่บอกไปตอนต้นว่า “While loops จะทำงานซ้ำๆ ไปเรื่อยๆตราบใดที่เงื่อนไขยังเป็นจริง” ถ้าใครอยากลองเล่นสนุกๆ ใส่เงื่อนไขเป็น true บอกได้เลยว่าคอมค้างแน่ๆ!! เพราะโค้ดมันจะรันไปไม่รู้จบ ไม่ต้องไปลองกันนะ ลองมาให้เรียบร้อยแล้วค้างจริงๆ555

while (true) {
  console.log("โค้ดนี้จะรันไปเรื่อยๆไม่รู้จบ เพราะเงื่อนไขไม่มีวันเป็น false");
}

For Loops

ทำงานแบบเดียวกับ While loops แต่โครงสร้างจะยิ่งง่ายขึ้นไปอีก

for ( start; stop; step ) {
  // รันโค้ดนี้
}

//ตัวอย่าง
for (var x = 0; x < 10; x = x + 1) {
 console.log(x);
}

 

Loops ซ้อน Loops