คำสั่งวนซ้ำ while loop ในภาษา TypeScript

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

• การใช้งานคำสั่ง while loop
• การใช้งานคำสั่ง break
• การใช้งานคำสั่ง continue

การใช้งานคำสั่ง while loop

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

while (condition) {
    // statements
}

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

สำหรับตัวอย่างแรกในการใช้งานคำสั่ง while loop เรามาเขียนโปรแกรมเพื่อนับตัวเลขจาก 1-10 และแสดงตัวเลขออกทางหน้าจอ นี่เป็นตัวอย่างของโปรแกรมในภาษา TypeScript

let n = 1;

while (n <= 10) {
    console.log(n);
    n++;
}

console.log("Loop ended");

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

1
2
3
4
5
6
7
8
9
10
Loop ended

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

console.log(n);
n++;

ในขณะที่เงื่อนไขเป็นจริงนั่นคือค่าในตัวแปร n น้อยกว่าหรือเท่ากับ 10 เราได้แสดงค่าในตัวแปรออกทางหน้าจอ จากนั้นเพิ่มค่าในตัวแปรขึ้นไปหนึ่งค่า นี่จะทำให้เมื่อค่าในตัวแปรเท่ากับ 11 เงื่อนไขจะเป็นเท็จและลูปจบการทำงาน ซึ่งนี่เป็นสิ่งที่สำคัญในการควบคุมเพื่อให้ลูปจบการทำงาน

ข้อควรระวัง: ในการใช้งานคำสั่งวนซ้ำ คุณจะต้องทำให้เงื่อนไขเป็นเท็จเพื่อให้ลูปจบการทำงานเมื่อถึงเวลาที่ต้องการ เหมือนกับในตัวอย่างที่เราเพิ่มค่าในตัวแปร n ขึ้นไปหนึ่ง ไม่เช่นนั้นลูปจะทำงานตลอดไปหรือเรียกว่า Infinite loop

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

let n: number = 68;
let factors: number[] = [];
let i: number = 1;

// Find all factors of n
while (i <= n) {
    if (n % i == 0) {
        factors.push(i);
    }
    i++;
}

// Read all factors out  from the end of the array
let j: number = factors.length - 1;
let buffer: string = '';
while (j >= 0) {
    buffer += factors[j];
    if (j > 0) {
        buffer += ", ";
    }
    j--;
}

console.log(`${n} has ${factors.length} factors including:`);
console.log(buffer);

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

68 has 6 factors including:
68, 34, 17, 4, 2, 1

ในตัวอย่างนี้ เป็นโปรแกรมค้นหาตัวประกอบของจำนวนเต็มโดยการใช้งานคำสั่ง while loop เริ่มต้นเราได้ประกาศสามตัวแปรได้แก่ตัวแปร n ที่เป็นตัวเลขที่ต้องการค้นหาตัวประกอบ ตัวแปร factors เป็นตัวแปรอาเรย์สำหรับตัวประกอบทั้งหมดที่หาได้ และตัวแปร i ที่เป็นตัวนับที่จะใช้ในลูปเพื่อควบคุมการทำงานของลูป

while (i <= n) {
    if (n % i == 0) {
        factors.push(i);
    }
    i++;
}

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

เพื่อตรวจสอบว่าตัวเลขเป็นตัวประกอบของ n หรือไม่ เราสามารถนำ n มาหารเอาเศษด้วย i ได้ ถ้าการหารลงตัวจะถือว่าค่าในตัวแปร i เป็นตัวประกอบ และเราเก็บค่านี้ไว้ในอาเรย์ด้วยเมธอด push ของอารย์ และเพิ่มค่าในตัวแปร i ขึ้นหนึ่งสำหรับการทำงานในรอบถัดไป

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

let j: number = factors.length - 1;
let buffer: string = '';
while (j >= 0) {
    buffer += factors[j];
    if (j > 0) {
        buffer += ", ";
    }
    j--;
}

เราได้ประกาศตัวแปร j เพื่อใช้เป็นตัวนับของลูปโดยกำหนดให้เป็น Index สุดท้ายของอาเรย์ และตัวแปร buffer ใช้ในการสร้างค่าของตัวประกอบในรูปแบบของ String และเงื่อนไขการทำงานของลูปคือ j >= 0 โดยโปรแกรมจะทำงานขณะที่ค่าในตัวแปร j มากกว่าหรือเท่ากับ 0 และลดลงมาเรื่อยๆ จนกว่าเงื่อนไขจะเป็นเท็จและลูปจบการทำงาน

ในการทำงานลองลูปแต่ละรอบ เราเข้าถึงค่าในอาเรย์ผ่าน Index ที่สร้างขึ้นด้วย factors[j] เชื่อมต่อตัวเลขเข้าในตัวแปร buffer นอกจากนี้ ยังได้มีการตรวจสอบเงื่อนไขว่าถ้ามันไม่ได้เป็นค่าสุดท้ายจะใส่เครื่องหมายคอมมาเข้าไปด้วย และลดค่าในตัวแปร j ลงสำหรับการทำงานในรอบถัดไป

console.log(`${n} has ${factors.length} factors including:`);
console.log(buffer);

ในตอนท้ายเป็นการแสดงจำนวนของตัวประกอบที่ตัวเลขที่โดยอ่านค่าจาก factors.length ซึ่งเป็น Property สำหรับนับจำนวนสมาชิกในอาเรย์ และตัวประกอบทั้งหมดที่ถูกจัดการแสดงผลไว้ในตัวแปร buffer

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

การใช้งานคำสั่ง break

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

let n: number = 1;

while (n <= 10) {
    if (n == 6) {
        break;
    }
    console.log(n);
    n++;
}

console.log("Loop ended");

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

1
2
3
4
5
Loop ended

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

if (n == 6) {
    break;
}

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

การใช้งานคำสั่ง continue

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

let n: number = 1;

while (n <= 10) {
    if (n % 2 == 1) {
        n++;
        continue;
    }
    console.log(n);
    n++;
}

console.log("Loop ended");

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

2
4
6
8
10
Loop ended

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

if (n % 2 == 1) {
    n++;
    continue;
}

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

ในการใช้งานคำสั่ง break และ continue นั้น มันสามารถใช้ได้กับลูปทุกประเภทในภาษา TypeScript ไม่ว่าจะเป็น คำสั่ง do while loop คำสั่ง for loop ที่คุณจะได้เรียนรู้ในบทถัดไป

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