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

20 January 2022

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

คำสั่ง for loop
การใช้งานคำสั่ง for ที่ซ้อนกัน
คำสั่ง for of
คำสั่ง for in

คำสั่ง for loop

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

for (initialize; condition; update) {
    // statements
}

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

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

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

counting.ts

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

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

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

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

และนี่เป็นขั้นตอนการทำงานของลูปในโปรแกรมนี้

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

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

counting2.ts

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

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

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

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

counting3.ts

for (let i = 1, j = 10; i < j; i++, j--) {
    console.log(`i = ${i}, j = ${j}`);
}
console.log("Loop ended");

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

i = 1, j = 10
i = 2, j = 9
i = 3, j = 8
i = 4, j = 7
i = 5, j = 6
Loop ended

ในการประกาศหลายตัวแปรหรืออัพเดทหลายค่าพร้อมกัน เราจะใช้เครื่องหมายคอมมา (,) คั่นระหว่างแต่ละการทำงานเหมือนกับที่คุณเห็นในตัวแปร i และ j

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

reading_array.ts

let names: string[] = ["Chistop", "Julia", "Jacob", "Emily", "Robert"];

for (let i = 0; i < names.length; i++) {
    if (i % 2 == 0) {
        console.log(`Hello ${names[i]}`);
    } else {
        console.log(`Hi ${names[i]}`);
    }
}

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

Hello Chistop
Hi Julia
Hello Jacob
Hi Emily
Hello Robert

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

if (i % 2 == 0) {
    console.log(`Hello ${names[i]}`);
} else {
    console.log(`Hi ${names[i]}`);
}

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

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

multiplication_table.ts

let n: number = 6;
console.log(`Multiplication table of ${n}`);

for (let i = 1; i <= 12; i++) {
    console.log(`${n} × ${i} = ${n * i}`);
}

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

Multiplication table of 6
6 × 1 = 6
6 × 2 = 12
6 × 3 = 18
6 × 4 = 24
6 × 5 = 30
6 × 6 = 36
6 × 7 = 42
6 × 8 = 48
6 × 9 = 54
6 × 10 = 60
6 × 11 = 66
6 × 12 = 72

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

การใช้งานคำสั่ง for ที่ซ้อนกัน

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

นี่เป็นตัวอย่างของการสร้างตารางสูตรคูณจากแม่ 1-12 แบบตารางโดยการใช้งานคำสั่ง for loop แบบซ้อนกันในภาษา TypeScript

table2.ts

console.log("Multiplication table 1-12");

for (let i = 1; i <= 12; i++) {
    let row: string = "";
    for (let j = 1; j <= 12; j++) {
        row += (i * j).toString().padStart(4, " ");
    }
    console.log(row);
}

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

Multiplication table 1-12
   1   2   3   4   5   6   7   8   9  10  11  12
   2   4   6   8  10  12  14  16  18  20  22  24
   3   6   9  12  15  18  21  24  27  30  33  36
   4   8  12  16  20  24  28  32  36  40  44  48
   5  10  15  20  25  30  35  40  45  50  55  60
   6  12  18  24  30  36  42  48  54  60  66  72
   7  14  21  28  35  42  49  56  63  70  77  84
   8  16  24  32  40  48  56  64  72  80  88  96
   9  18  27  36  45  54  63  72  81  90  99 108
  10  20  30  40  50  60  70  80  90 100 110 120
  11  22  33  44  55  66  77  88  99 110 121 132
  12  24  36  48  60  72  84  96 108 120 132 144

เมื่อคอมไฟล์โปรแกรมในตัวอย่างนี้ คุณจะต้องกำหนดตัวเลือกในตอนคอมไพล์โดยใช้เวอร์ชันของภาษา JavaScript เป็น es2017 นี่เนื่องจากว่าเมธอด padStart บน String ที่เราใช้งานในตัวอย่างมีอยู่ในเวอร์ชันนี้หรือสูงกว่าเท่านั้น นี่เป็นคำสั่งสำหรับการคอมไพล์

tsc table2.ts --target es2017

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

row += (i * j).toString().padStart(4, " ");

ในแต่ละคอมลัมน์ เราสร้างผลลัพธ์ของตารางสูตรคูณจากการคูณกันของ i และ j จากนั้นแปลงค่าให้เป็น String ด้วยเมธอด toString และใช้เมธอด padStart สำหรับเพิ่มช่องว่างทางด้านซ้ายของตัวเลขให้เต็มสี่ช่องเพื่อให้การแสดงผลของแต่ละคอลัมน์ตรงกันเพื่อความสวยงาม

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

matrix_transpose.ts

let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < 3; i++) {
    let temp: string = "";
    for (let j = 0; j < 3; j++) {
        temp += matrix[j][i] + " ";
    }
    console.log(temp);
}

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

1 4 7
2 5 8
3 6 9

ในตัวอย่างนี้ เราได้ประกาศอาเรย์สองมิติเพื่อเก็บค่าของเมทริกซ์แบบ 3*3 จากนั้นใช้คำสั่ง for loop วนอ่านค่าในเมทริกซ์เพื่อแสดงผลการ Transpose ของมัน โดยสมการของการ Transpose เมทริกซ์สามารถทำได้โดยกลับหลักเป็นแถวและแถวเป็นหลักด้วย matrix[j][i] และเราใช้ matrix[i][j] ในการแสดงค่าเริ่มต้นของเมทริกซ์

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

คำสั่ง for of

คำสั่ง for of เป็นคำสั่งวนซ้ำที่ใช้เพื่อวนอ่านค่าของออบเจ็คที่สามารถวนรอบได้หรือที่เรียกว่า Iterable objects มันเป็นออบเจ็คที่ถูกกำหนดการทำงานของเมธอด Symbol.iterator ที่ใช้สำหรับส่งค่ากลับมาเป็นลำดับ ยกตัวอย่างเช่น String อาเรย์ Set หรือ Map เป็นต้น

นี่เป็นตัวอย่างการใช้งานคำสั่ง for of ในภาษา TypeScript สำหรับวนรอบค่าของอาเรย์และ String และเพื่อคอมไพล์โปรแกรมนี้ คุณต้องระบุตัวเลือก --target เป็น es6 หรือสูงกว่า นี่จำเป็นเนื่องจากเราใช้คำสั่ง for of ในการวนรอบ String

for_of.ts

// Iterate over array
let seasons: string[] = ["winter", "spring", "summer", "fall"];
for (let item of seasons) {
    console.log(item);
}

// Iterate over string
let site: string = "marcuscode";
for (let ch of site) {
    console.log(ch);
}

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

winter
spring
summer
fall
m
a
r
c
u
s
c
o
d
e

ในตัวอย่างนี้ เป็นการใช้งานคำสั่ง for of เพื่อวนอ่านค่าอาเรย์ของ 4 ฤดูกาลและ String ของชื่อเว็บไซต์ ในการใช้งาน เราสามารถประกาศตัวแปรเพื่อรับค่าจากอาเรย์ในแต่ละรอบได้เหมือนกับที่เห็นคุณในตัวแปร item และ ch โดยตัวแปรที่ประกาศในส่วนนี้จะมีขอบเขตเพียงในบล็อคของคำสั่ง for of เท่านั้น

คำสั่ง for of จะทำงานแตกต่างกันออกไปขึ้นอยู่กับประเภทของออบเจ็คที่มันวนรอบ เมื่อทำงานกับอาเรย์เราจะได้รับแต่ละสมาชิกของอาเรย์ในการวนแต่ละรอบ ในขณะที่ String จะได้รับแต่ละตัวอักษรแทน ซึ่งนี่เป็นรูปแบบที่ถูกกำหนดในโปรโตไทพ์ฟังก์ชัน Symbol.iterator ของออบเจ็คแต่ละประเภท

คำสั่ง for in

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

นี่เป็นตัวอย่างการใช้งานคำสั่ง for in สำหรับวนอ่าน Key บนออบเจ็ค Literal ในภาษา TypeScript

for_in1.ts

let user = { id: 1, name: "Cristo", age: 32 };
for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

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

id: 1
name: Cristo
age: 32

ในตัวอย่างนี้ เป็นการใช้งานคำสั่ง for in ในการวนอ่าน Property ทั้งหมดในออบเจ็ค user มาเก็บไว้ในตัวแปร key โดยคีย์ที่ได้รับกลับมานั้นจะเป็น String และเราใช้ Property ที่อ่านค่ามาได้ในการเข้าถึงค่าบนออบเจ็ค และแสดงผลออกทางหน้าจอ

และนี่เป็นอีกตัวอย่างในการใช้คำสั่ง for in วนอ่านค่า Index ของอาเรย์

for_in2.ts

let colors: string[] = ["red", "green", "blue"];
for (let index in colors) {
    console.log(`colors[${index}] = ${colors[index]}`);
}

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

colors[0] = red
colors[1] = green
colors[2] = blue

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

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

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

คำสั่ง for loop

การใช้งานคำสั่ง for ที่ซ้อนกัน

คำสั่ง for of

คำสั่ง for in

ค้นหา

About

บทความล่าสุด

เนื้อหา

Community