คำสั่งวนซ้ำ for loop ในภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคำสั่งวนซ้ำ for loop ในภาษา JavaScript ซึ่งเป็นคำสั่งวนซ้ำอีกคำสั่งหนึ่งนอกเหนืือจากคำสั่ง while loop ที่คุณได้เรียนรู้ไปแล้วในบทก่อนหน้า และนี่เป็นเนื้อหาในบทนี้

  • คำสั่ง for loop
  • คำสั่ง for loop กับอาเรย์
  • คำสั่ง break
  • คำสั่ง continue
  • คำสั่ง for ซ้อน for

คำสั่ง for loop

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

for (initialize; condition; changes) {
    // Statements
}

ในการใช้งานคำสั่ง for loop นั้นเราสามารกำหนดค่าเริ่มต้น initialize เงื่อนไข condition และการเปลี่ยนแปลงในส่วนหัวของคำสั่งได้ โดยคั่นแต่ละส่วนด้วยเครื่องหมายเซมิโคลอน (;) และคำสั่ง for loop มีขั้นตอนการทำงานดังนี้

  • initialize: คือการประกาศตัวแปรสำหรับใช้ภายในลูป ทำงานในตอนที่ลูปเริ่มต้นเท่านั้น
  • condition: คือการกำหนดเงื่อนไขให้กับลูปเพื่อทำงาน โปรแกรมจะทำงานในลูปในขณะที่เงื่อนไขเป็นจริง
  • changes: หลังจบการทำงานของลูปแต่ละรอบ เราสามารถเปลี่ยนแปลงค่าของตัวแปรได้ที่นี่

สำหรับตัวอย่างแรกในการใช้งานคำสั่ง for loop นั้นจะเป็นโปรแกรมนับตัวเลขจาก 1 - 5 และแสดงมันออกทางหน้าจอ มันเป็นโปรแกรมที่ง่ายที่สุดที่สามารถแสดงให้เห็นได้โดยการใช้ลูป นี่เป็นตัวอย่าง

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
console.log("Loop ended");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1
2
3
4
5
Loop ended

ในตัวอย่าง เราได้ใช้คำสั่ง for loop เพื่อวนแสดงตัวเลข 1 - 5 ออกทางหน้าจอ เราได้ประกาศตัวแปร i ที่มีค่าเริ่มต้นเป็น 1 สำหรับใช้งานภายในลูป ก่อนทำงานลูปในแต่ละรอบโปรแกรมจะตรวจสอบเงื่อนไข i <= 5 และทำงานในลูปในขณะที่เงื่อนไขเป็นจริง

เมื่อจบการทำงานของลูปในแต่ละรอบ เราได้เพิ่มค่าในตัวแปร i ขึ้น เมื่อค่าในตัวแปรมากกว่า 5 นั่นจะทำให้เงื่อนไขเป็นเท็จและลูปจบการทำงาน จะเห็นว่าการทำงานของคำสั่ง for loop นั้นจะเหมือนกับคำสั่ง while แต่เราสามารถกำหนดค่าเริ่มต้น เงื่อนไข และการเปลี่ยนแปลงได้ในที่เดียวกัน

นอกจากนี้ ในส่วนของการกำหนดค่าเริ่มต้นและการเปลี่ยนแปลงค่า เรายังสามารถประหลายตัวแปรและอัพเดทค่าทีละหลายค่าได้ โดยคั่นแต่ละการทำงานด้วยเครื่องหมายคอมมา (,) ยกตัวอย่างเช่น

for (let i = 0, j = 100; i != j; i += 5, j -= 5) {
    console.log("i = %d, j = %d", i, j);
}
console.log("Loop ended");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

i = 0, j = 100
i = 5, j = 95
i = 10, j = 90
i = 15, j = 85
i = 20, j = 80
i = 25, j = 75
i = 30, j = 70
i = 35, j = 65
i = 40, j = 60
i = 45, j = 55
Loop ended

ในตัวอย่าง เป็นโปรแกรมสำหรับแสดงตัวเลขโดยเริ่มต้นจาก 0 และ 100 จากนั้นเพิ่มและลดค่าลงมาทีละ 5 ตามลำดับ ลูปจะทำงานในขณะที่ตัวเลขในตัวแปร i และ j มีค่าไม่เท่ากัน และจนกว่าค่าในตัวแปรทั้งสองจะเท่ากันที่ 50 และนั่นทำให้เงื่อนไข i != j เป็นเท็จและลูปจบการทำงาน

ในการใช้งานคำสั่ง for loop เราสามารถละเว้นการกำหนดค่าเริ่มต้น เงื่อนไข และการเปลี่ยนแปลงค่าได้ ในตัวอย่างนี้ เราไม่ได้ใช้การกำหนดค่าเริ่มต้น และการเปลี่ยนแปลงค่าที่คำสั่ง for loop โดยตรง ซึ่งการทำงานนี้จะเหมือนกับการใช้คำสั่ง while loop นี่เป็นตัวอย่าง

let i = 5;

for (; i >= 0;) {
    console.log("Count down %d", i);
    i--;
}

console.log("Loop ended");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Count down 5
Count down 4
Count down 3
Count down 2
Count down 1
Count down 0
Loop ended

เราสามารถกำหนดค่าเริ่มต้นนอกคำสั่ง for loop และการเปลี่ยนแปลงค่าภายใน loop ลูปได้ แต่สิ่งที่สำคัญคือเครื่องหมายเซมิโคลอนจะต้องคงอยู่เสมอ และเราสามารถเลือกกำหนดเพียงส่วนที่ต้องการ ในกรณีนี้กำหนดเพียงเงื่อนไขของลูป

และนี่เป็นโปรแกรมเดียวกันที่เขียนด้วยคำสั่ง while loop

let i = 5;

while (i >= 0) {
    console.log("Count down %d", i);
    i--;
}

console.log("Loop ended");

คำสั่ง for loop กับอาเรย์

การใช้งานคำสั่ง for loop ที่พบได้บ่อยในการเขียนโปรแกรมก็คือใช้ร่วมกับอาเรย์ เนื่องจากอาเรย์นั้นมีการเก็บข้อมูลเป็นชุดลำดับและมี Index สำหรับการเข้าถึงข้อมูลเป็นตัวเลข ดังนั้นเราสามารถใช้คำสั่ง for loop เพื่อสร้าง Index สำหรับเข้าถึงข้อมูลในอาเรย์ได้ นี่เป็นตัวอย่าง

array_for.js
let fruits = ["Apple", "Banana", "Orange", "Grape", "Lemon"];
console.log("List of fruits");

for (let i = 0; i < fruits.length; i++) {
    console.log("%d. %s", i + 1, fruits[i]);
}

let languages = ["GO", "JavaScript", "PHP", "Python", "Ruby"];
console.log("List of programming languages (reversed)");

let count = 1;
for (let i = languages.length - 1; i >= 0; i--) {
    console.log("%d. %s", count, languages[i]);
    count++;
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

List of fruits
1. Apple
2. Banana
3. Orange
4. Grape
5. Lemon
List of programming languages (reversed)
1. Ruby
2. Python
3. PHP
4. JavaScript
5. GO

ในตัวอย่าง เป็นการใช้คำสั่ง for loop เพื่อวนอ่านค่าในอาเรย์สองอาเรย์ และแสดงผลออกทางหน้าจอ อาเรย์แรก fruits เก็บรายชื่อของผลไม้จำนวน 5 ชนิดเอาไว้ และอาเรย์ที่สอง languages เก็บชื่อภาษาเขียนโปรแกรมคอมพิวเตอร์

for (let i = 0; i < fruits.length; i++) {
...

เนื่องจาก Index ของอาเรย์นั้นเริ่มต้นจาก 0 ดังนั้นเราประกาศตัวแปร i เริ่มต้นจากค่าดังกล่าว สำหรับเงื่อนไขนั้นจะเป็นการวนไปจนถึง Index ตัวสุดท้ายของอาเรย์ (i < fruits.length)

for (let i = languages.length - 1; i >= 0; i--) {
...

ในลูปถัดมาเป็นการวนอ่านค่าในอาเรย์จากสมาชิกตัวสุดท้ายมายังตัวแรก ดังนั้นเรากำหนดค่าเริ่มต้นในตัวแปร i เป็น languages.length - 1 ซึ่งเป็น Index ตำแหน่งสุดท้ายในอาเรย์ และลดค่าลงมาเรื่อยๆ และลูปจบการทำงานเมื่อค่า Index น้อยกว่า 0

ในตัวอย่างก่อนหน้า เราได้ใช้คำสั่ง for loop สำหรับวนอ่านค่าสมาชิกในอาเรย์และแสดงผลออกทางหน้าจอซึ่งเป็นการทำงานที่เรียบง่าย ในตัวอย่างต่อไป เป็นโปรแกรมสำหรับหาค่าที่น้อยที่สุด มากที่สุด ผลรวม และค่าเฉลี่ยของตัวเลขภายในอาเรย์

array_computation.js
let numbers = [30, 27, 84, 36, 24, 2, 74, 37, 8, 50];

let min = numbers[0];
let max = numbers[0];
let sum = 0;

// Finding min and max
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] < min) {
        min = numbers[i];
    }
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

// Finding summation
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log("Numbers: " + numbers.join(" "));
console.log("Min: " + min);
console.log("Max: " + max);
console.log("Sum: " + sum);
console.log("Average: " + (sum / numbers.length));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Numbers: 30 27 84 36 24 2 74 37 8 50
Min: 2
Max: 84
Sum: 372
Average: 37.2

ในตัวอย่าง เป็นโปรแกรมสำหรับหาค่าน้อยสุด มากสุด ผลรวม และค่าเฉลี่ยของตัวเลขในอาเรย์ numbers ซึ่งในตัวแปรอาเรย์นี้มีสมาชิก 10 ตัว คุณสามารถเพิ่มตัวเลขใหม่เข้าไปได้อีกหากต้องการ

let min = numbers[0];
let max = numbers[0];
let sum = 0;

ในตอนแรก เป็นประกาศสามตัวแปรสำหรับใช้เก็บค่าน้อยสุด มากสุด และผลรวมของตัวเลขในอาเรย์ เนื่องจากการค้นหาค่าเหล่านี้จะต้องตรวจสอบสมาชิกทั้งหมดของอาเรย์ ดังนั้นเรากำหนดให้ค่าน้อยที่สุดและมากที่สุดเป็นตัวเลขตัวแรกของอาเรย์

// Finding min and max
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] < min) {
        min = numbers[i];
    }
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

เราเริ่มตรวจสอบจากสมาชิกตัวที่สองของอาเรย์ได้โดยกำหนด Index เริ่มจาก 1 จากนั้นนำค่านำตัวเลขแต่ละตัว numbers[i] ในอาเรย์มาเปรียบเทียบว่าน้อยกว่า min ถ้าหากเป็นจริง ค่าน้อยกว่าจะถูกอัพเดทเป็นค่าของ numbers[i] และทำเช่นนี้ไปเรื่อยๆ จนถึงสมาชิกตัวสุดท้ายของอาเรย์

สำหรับการค้นหาค่ามากกว่าก็เช่นเดียวกัน แต่จะเป็นการเปรียบเทียบกับค่าในตัวแปร max แทน และในตอนท้าย เราจะได้ค่าที่น้อยที่สุดและมากที่สุดในตัวแปร min และ max ตามลำดับ

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

จากนั้นเป็นการหาผลรวมของตัวเลขในอาเรย์ เช่นเดิมเราได้วนสมาชิกทุกตัวในอาเรย์และนำมาบวกเข้าไปในตัวแปร sum และเราจะได้ผลรวมของตัวเลขทั้งหมดเมื่อการทำงานของลูปจบลง

console.log("Numbers: " + numbers.join(" "));
console.log("Min: " + min);
console.log("Max: " + max);
console.log("Sum: " + sum);
console.log("Average: " + (sum / numbers.length));

สุดท้ายเป็นการแสดงตัวเลขทั้งหมดในอาเรย์ ค่าที่น้อยที่สุดและมากที่สุด ผลรวม และค่าเฉลี่ยของตัวเลขออกทางหน้าจอ สำหรับค่าเฉลี่ยนั้นสามารถหาได้จากผลรวมหารด้วยจำนวนตัวเลขทั้งหมดในอาเรย์ (sum / numbers.length)

คำสั่ง break

คำสั่ง break ใช้สำหรับควบคุมเพื่อให้ลูปจบการทำงานในทันทีโดยที่ไม่สนใจว่าเงื่อนไขจะยังเป็นจริงอยู่หรือไม่ และนี่เป็นตัวอย่างการใช้งานคำสั่ง break ร่วมกับคำสั่ง for loop มันเป็นโปรแกรมแสดงตัวเลข 1 - 10 ออกทางหน้าจอ

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

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1
2
3
4

ในตัวอย่าง เราได้ใช้คำสั่ง for loop สำหรับวนเพื่อแสดงตัวเลขจาก 1 - 10 แต่เมื่อค่าของตัวแปร i เท่ากับ 5 เราได้เรียกใช้งานคำสั่ง break ซึ่งนี่ทำให้ลูปจบการทำงานในทันที และนั่นทำให้โปรแกรมแสดงตัวเลขเพียงแค่ 0 - 4 เท่านั้น โปรแกรมทำงานได้ถูกต้องเพราะเราตั้งใจให้มันเป็นเช่นนั้น และนั่นเป็นการทำงานของคำสั่ง break

มาดูตัวอย่างเพิ่มเติมสำหรับการใช้งานคำสั่ง break ในตัวอย่างนี้จะเป็นโปรแกรมเพื่อค้นหาสิ่งของในอาเรย์

searching_array.js
let baskets = [
    "Apple", "Football", "TV Remote", "iPhone",
    "Tape measure", "Coin", "Book"
];
let search = "iPhone"; // Item to search

// Searching for item in array
let found = null;
for (let i = 0; i < baskets.length; i++) {
    if (search === baskets[i]) {
        found = i;
        break;
    }
}

if (found !== null) {
    console.log(search + " found at " + found);
} else {
    console.log(search + " is not found");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

iPhone found at 3

ในตัวอย่างนี้ เรามีอาเรย์ baskets สำหรับเก็บสิ่งของต่างๆ ไว้ข้างใน ในโปรแกรมของเราต้องการค้นหาว่าภายในอาเรย์มี "iPhone" อยู่หรือไม่ ดังนั้นเราใช้คำสั่ง for loop เพื่อวนรอบอาเรย์และตรวจสอบสมาชิกแต่ละตัวว่าเท่ากับ "iPhone" ที่เก็บไว้ในตัวแปร search หรือไม่

if (search === baskets[i]) {
    found = i;
    break;
}

ตัวแปร found ใช้สำหรับเก็บ Index ของสมาชิกในอาเรย์ถ้าหากพบว่ามันมีอยู่ และเนื่องจากเราไม่ต้องการตรวจสอบสมาชิกที่เหลือหลังจากพบของที่ต้องการแล้ว เราได้ใช้คำสั่ง break เพื่อจบการทำงานของลูปในทันทีเมื่อหาพบ

การใช้คำสั่ง break สามารถช่วยเพิ่มประสิทธิภาพให้โปรแกรมทำงานได้เร็วขึ้นได้โดยที่ไม่จำเป็นต้องค้นหาข้อมูลทั้งหมดของอาเรย์ เนื่องจากเราพบสิ่งของที่ต้องการแล้วจึงไม่มีเหตุผลอะไรที่จะค้นหาค่าที่เหลือในอาเรย์

if (found !== null) {
    console.log(search + " found at " + found);
} else {
    console.log(search + " is not found");
}

สุดท้ายเป็นการแสดงผลลัพธ์ว่าการค้นหาพบหรือไม่ ซึ่งถ้าหากพบจะบอกเป็นตำแหน่งของ Index ที่เจอในอาเรย์ ในตอนนี้ให้คุณลองเปลี่ยนค่าในตัวแปร search เป็นค่าอื่นๆ หรือค่าที่ไม่มีอยู่และดูว่าผลลัพธ์จะเป็นอย่างไร

คำสั่ง continue

คำสั่ง continue ใช้สำหรับควบคุมเพื่อให้ลูปทำงานในรอบถัดในทันทีโดยข้ามการทำงานคำสั่งที่เหลือที่อยู่หลังจากคำสั่ง continue ทั้งหมด ในตัวอย่างนี้เป็นโปรแกรมแสดงตัวเลขคู่จาก 2 - 10 ออกทางหน้าจอ

continue.js
for (let i = 1; i <= 10; i++) {
    if (i % 2 == 1) {
        continue;
    }
    console.log(i);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

2
4
6
8
10

ในตัวอย่าง เป็นการใช้งานคำสั่ง for loop เพื่อวนตัวเลขจาก 1 - 10 เพื่อแสดงผลออกทางหน้าจอ และก่อนการแสดงผล เราได้ตรวจสอบว่าตัวเลขเป็นเลขคี่หรือไม่จากเงื่อนไข i % 2 == 1 ถ้าหากเป็นจริง เราเรียกใช้งานคำสั่ง continue นั่นทำให้ลูปไม่ทำคำสั่งที่เหลือหลังจากนี้และข้ามการทำงานไปยังรอบใหม่ทันที และโปรแกรมแสดงเพียงตัวเลขคู่ออกทางหน้าจอ

Info: คำสั่ง break และ continue นั้นสามารถใช้ได้กับคำสั่งวนซ้ำทุกประเภท ยกตัวอย่างเช่น คำสั่ง while, do-while, for, for in หรือ for of คุณสามารถใช้มันกับลูปประเภทอื่นๆ เพื่อหยุดการทำงานของลูปในทันที หรือข้ามการทำงานไปยังรอบต่อไปได้เหมือนกับที่ได้เรียนในบทนี้

คำสั่ง for ซ้อน for

เช่นเดียวกับคำสั่งควบคุมประเภทอื่นๆ คำสั่ง for loop นั้นสามารถซ้อนกันได้ เราสามารถใช้มันเพื่อสร้างตาราง การอ่านค่าในอาเรย์หลายมิติ หรือการทำงานอื่นๆ ได้ นี่เป็นตัวอย่างการใช้งานคำสั่ง for loop ที่ซ้อนกันเพื่อสร้างบันไดของตัวเลข

number_stair.js
let buffer = "";
let size = 8;

for (let i = 1; i <= size; i++) {
    for (let j = 1; j <= i; j++) {
        buffer += j;
    }
    buffer += "\n";
}

console.log(buffer);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1
12
123
1234
12345
123456
1234567
12345678

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

for (let i = 1; i <= size; i++) {
    for (let j = 1; j <= i; j++) {
...

ลูปรอบนอกเป็นการสร้างแถวของบันไดตามขนาดที่กำหนดไว้ในตัวแปร size ส่วนลูปด้านในเป็นการสร้างตัวเลขจาก 1 ถึงจำนวนแถว ยกตัวอย่างเช่น แถวที่ 5 จะเป็นการสร้างตัวเลขจาก 1 - 5 แล้วนำเชื่อมต่อเข้าเก็บไว้ในตัวแปร String buffer

สำหรับตัวอย่างสุดท้ายจะเป็นโปรแกรมสำหรับเรียงตัวเลขในอาเรย์ด้วยอัลกรอรึทึม Bubble sorting โดยการใช้คำสั่ง for loop ซ้อนกันในภาษา JavaScript นี่เป็นโค้ดของโปรแกรม

bubble_sort.js
let numbers = [30, 27, 84, 36, 24, 2, 74, 37, 8, 50];
let n = numbers.length; // Count elements

// Bubble sort
for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
        if (numbers[j] > numbers[j + 1]) {
            let temp = numbers[j];
            numbers[j] = numbers[j + 1];
            numbers[j + 1] = temp;
        }
    }
}

console.log("Sorted: " + numbers.join(" "));

และนี่เป็นผลลัพธ์การทำงานของโปรแกรมสำหรับเรียงตัวเลขในอาเรย์จากน้อยไปมากด้วยอัลกรอรึทึม Bubble sorting

Sorted: 2 8 24 27 30 36 37 50 74 84

ในตัวอย่าง โปรแกรมจะวนเปรียบเทียบตัวเลขที่อยู่ติดกันไปทีละคู่ ถ้าหากตัวเลขทางด้านซ้ายมากกว่าทางซ้ายขวาจะทำการสลับตำแหน่งของตัวเลขทั้งสองจนกระทั่งตัวเลขทุกตัวในอาเรย์ได้รับการจัดเรียงในตำแหน่งที่ถูกต้องแล้ว

สำหรับการทำงานเพิ่มเติมของอัลกรอรึึทึมนั้นสามารถอ่านได้ที่ Bubble sort

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งานคำสั่ง for loop เพื่อควบคุมให้โปรแกรมทำงานบางอย่างซ้ำๆ ในเงื่อนไขที่กำหนดได้ นอกจากนี้ เราได้พูดถึงการใช้งานคำสั่ง break สำหรับหยุดการทำงานของลูปในทันที และคำสั่ง continue สำหรับข้ามการทำงานของลูปยังรอบถัดไป ซึ่งคำสั่งเหล่านี้สามารถใช้ได้กับลูปทุกประเภท