คำสั่งทำซ้ำใน TypeScript
บทความนี้อธิบายคำสั่งทำซ้ำใน TypeScript
YouTube Video
การใช้คำสั่ง for ใน TypeScript
คำสั่ง for ใน TypeScript เป็นโครงสร้างลูปพื้นฐานสำหรับการดำเนินการที่ซ้ำกัน ในลูป for บล็อกของโค้ดเดิมสามารถถูกดำเนินการซ้ำได้โดยขึ้นอยู่กับจำนวนครั้งหรือเงื่อนไขที่กำหนด
ไวยกรณ์พื้นฐาน
1for (initialization; condition; update) {
2 // Code to execute repeatedly while the condition is true
3}-
การอนุมาน : นี่เป็นส่วนที่ประมวลผลได้เพียงครั้งเดียว ก่อนที่จะเริ่มวนรอบ เริ่มการใช้ตัวแปรต่าง ๆ เช่น ตัวนับห่วง
- ~สัญญา: ~ กําหนดว่าจะให้วนรอบภาพหรือไม่ หากเป็นจริง ให้วนรอบต่อไป และถ้าผิด ให้ออก
- ~Update (Update) ~ ทํางานเมื่อสิ้นสุดการหมุนแต่ละรอบและการปรับปรุงตัวนับห่วง
ตัวอย่างที่ 1: ลูป for พื้นฐาน
ในตัวอย่างด้านล่างนี้ จะพิมพ์ตัวเลขจาก 0 ถึง 4 ตามลำดับ
1for (let i = 0; i < 5; i++) {
2 console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4
ตัวอย่างที่ 2: ลูป for กับอาร์เรย์
คุณสามารถใช้ลูป for ในการประมวลผลองค์ประกอบของอาร์เรย์ตามลำดับได้
1let fruits: string[] = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log("Fruit: " + fruits[i]);
5}
6// Outputs:
7// Fruit: apple
8// Fruit: banana
9// Fruit: cherry
ตัวอย่างที่ 3: ลูป for-in
ลูป for-in ใช้สำหรับวนซ้ำเพื่อเข้าถึง properties ของอ็อบเจกต์หรือดัชนีของอาร์เรย์ตามลำดับ
1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4 console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020
ตัวอย่างที่ 4: ลูป for-of
ลูป for-of ใช้เพื่อดึงค่าของแต่ละองค์ประกอบจาก iterable objects เช่น อาร์เรย์หรือสตริงตามลำดับ
1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4 console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue
ตัวอย่างที่ 5: การวนซ้ำ for ซ้อนกัน
สามารถใช้ลูป for ซ้อนอยู่ในอีกลูป for ได้ ซึ่งเรียกว่า nested loop สิ่งนี้ช่วยให้คุณสร้างลูปซ้อน เช่น ลูปคู่หรือแบบอื่น ๆ ได้
1for (let i = 0; i < 3; i++) {
2 console.log("Outer loop i: " + i);
3 for (let j = 0; j < 2; j++) {
4 console.log(" Inner loop j: " + j);
5 }
6}
7// Outputs:
8// Outer loop i: 0
9// Inner loop j: 0
10// Inner loop j: 1
11// Outer loop i: 1
12// Inner loop j: 0
13// Inner loop j: 1
14// Outer loop i: 2
15// Inner loop j: 0
16// Inner loop j: 1
สรุป
- คำสั่ง
forดำเนินการซ้ำตามจำนวนหรือเงื่อนไขที่ระบุ for-inใช้เพื่อดึง properties ของอ็อบเจกต์หรือ index ของอาร์เรย์for-ofใช้ดึงค่าขององค์ประกอบจาก iterable objects เช่น อาร์เรย์- การประมวลผลซ้ำที่ซับซ้อนยังสามารถทำได้ด้วยการวนซ้ำ
forซ้อน
คำสั่ง for ใน TypeScript ให้การดำเนินการที่มีพลังและยืดหยุ่นสำหรับงานที่ต้องทำซ้ำ ซึ่งคล้ายกับลูปประเภทอื่น
คำสั่ง While ใน TypeScript
ใน TypeScript คำสั่ง while เป็นโครงสร้างของลูปที่ทำซ้ำกระบวนการในขณะที่เงื่อนไขที่ระบุเป็น true คล้ายกับลูป for ลูป while เหมาะสำหรับกรณีที่จำนวนรอบการทำซ้ำไม่ได้กำหนดล่วงหน้า หรือเมื่อคุณต้องการควบคุมการทำซ้ำตามเงื่อนไข
ไวยกรณ์พื้นฐาน
1while (condition) {
2 // Code to execute repeatedly while the condition is true
3}- เงื่อนไข: เงื่อนไขที่ใช้ในการทำงานของลูป ลูปจะทำงานต่อไปตราบใดที่เงื่อนไขนี้ยังเป็น
trueและจะหยุดเมื่อเงื่อนไขกลายเป็นfalse
ตัวอย่างที่ 1: ลูป while พื้นฐาน
ในตัวอย่างด้านล่างนี้ จะทำการแสดงค่าของ i ต่อไปในขณะที่ i น้อยกว่า 5
1let i: number = 0;
2
3while (i < 5) {
4 console.log("The value of i is: " + i);
5 i++;
6}
7// Outputs:
8// The value of i is: 0
9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4
ในตัวอย่างนี้ ลูปจะสิ้นสุดเมื่อ i มีค่าเป็น 5 หรือมากกว่า เนื่องจากเงื่อนไขกลายเป็น false
ตัวอย่างที่ 2: ตัวอย่างลูปที่ไม่มีที่สิ้นสุด
หากเงื่อนไขในลูป while เป็น true ตลอดเวลา ลูปอาจกลายเป็นลูปที่ไม่มีที่สิ้นสุด สิ่งนี้มักจะทำให้โปรแกรมไม่สามารถหยุดทำงานตามที่ตั้งใจไว้ ดังนั้นคุณจึงต้องระวัง
1let x: number = 0;
2
3while (true) {
4 console.log("The value of x is: " + x);
5 x++;
6 if (x >= 5) {
7 break; // Exit the loop when the condition is met
8 }
9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4
คุณสามารถใช้คำสั่ง break เพื่อออกจากลูปอย่างบังคับเมื่อเงื่อนไขตรงตามที่กำหนด
ตัวอย่างที่ 3: ลูป do-while
ลูป do-while เป็นโครงสร้างที่การทำงานในลูปจะถูกดำเนินการอย่างน้อยหนึ่งครั้ง เนื่องจากเงื่อนไขจะถูกตรวจสอบหลังจากกระบวนการเสร็จสิ้น กระบวนการจะทำงานอย่างน้อยหนึ่งครั้งแม้ว่าจะมีเงื่อนไขเป็น false
1let j: number = 5;
2
3do {
4 console.log("The value of j is: " + j);
5 j++;
6} while (j < 5);
7// Outputs: The value of j is: 5
ในตัวอย่างนี้ j มีค่าเป็น 5 ตั้งแต่เริ่มต้น และ j < 5 เป็น false แต่ในลูป do-while จะทำงานอย่างน้อยหนึ่งครั้งโดยไม่คำนึงถึงเงื่อนไข
สรุป
- ลูป
whileจะทำการประมวลผลซ้ำตราบใดที่เงื่อนไขยังเป็นtrue - หากเงื่อนไขการสิ้นสุดของลูปไม่ชัดเจน คุณต้องระวังลูปที่ไม่มีที่สิ้นสุด
- ลูป
do-whileแตกต่างจากลูปwhileแบบปกติตรงที่กระบวนการจะถูกดำเนินการอย่างน้อยหนึ่งครั้ง
คำสั่ง while ใน TypeScript มีประโยชน์สำหรับการทำงานแบบลูปที่จำนวนครั้งของการทำซ้ำไม่แน่นอนหรือเมื่อจำเป็นต้องตรวจสอบเงื่อนไขแบบไดนามิก
break และ continue
คุณสามารถใช้ break และ continue ภายในลูป
breakใช้เพื่อยุติการทำงานของลูปก่อนกำหนดcontinueใช้เพื่อข้ามการทำงานในรอบปัจจุบันและย้ายไปยังรอบถัดไป
ตัวอย่างของ break
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
ในกรณีนี้ break จะถูกเรียกใช้เมื่อ i มีค่าเท่ากับ 5 ดังนั้น ตัวเลขตั้งแต่ 0 ถึง 4 จะถูกแสดง
ตัวอย่างของ continue
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10
11while (i < 5) {
12 i++;
13 if (i === 3) {
14 continue; // Skips when i is 3
15 }
16 console.log(i);
17}
18// Outputs 1, 2, 4, 5
ในกรณีนี้ continue จะถูกเรียกใช้เมื่อ i มีค่าเท่ากับ 2 ดังนั้น ตัวเลขที่ไม่รวม 2 จะถูกแสดง
ลูปซ้อนใน TypeScript
ลูปซ้อนคือลูปที่ใช้ภายในลูปอีกตัวหนึ่ง ใน TypeScript รองรับโครงสร้างลูป เช่น for, while และ do-while ด้วยการใช้ลูปซ้อน คุณสามารถประมวลผลอาเรย์สองมิติ (เมทริกซ์) และทำให้การประมวลผลที่เกี่ยวข้องกับหลายเงื่อนไขง่ายขึ้น
ไวยกรณ์พื้นฐาน
ไวยากรณ์พื้นฐานของลูปซ้อนมีดังนี้
1for (let i: number = 0; i < n; i++) {
2 for (let j: number = 0; j < m; j++) {
3 // Processing for the inner loop
4 }
5}สำหรับแต่ละครั้งที่ลูปด้านนอกทำงาน ลูปด้านในจะทำงานครบทุกครั้ง โครงสร้างนี้มีประโยชน์มากเมื่อจัดการกับลูปหลายชุดหรือโครงสร้างข้อมูล
ตัวอย่างของลูปซ้อนใน TypeScript
การวนลูปผ่านอาเรย์สองมิติ
ลูปซ้อนมักถูกใช้เมื่อจัดการกับโครงสร้างข้อมูลแบบหลายมิติ เช่น อาเรย์สองมิติ ในตัวอย่างด้านล่าง องค์ประกอบของอาเรย์สองมิติจะถูกวนลูป และค่าเหล่านั้นจะแสดงในคอนโซล
1const matrix: number[][] = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row: number = 0; row < matrix.length; row++) {
8 for (let col: number = 0; col < matrix[row].length; col++) {
9 console.log(`matrix[${row}][${col}] = ${matrix[row][col]}`);
10 }
11}
12// Output
13// matrix[0][0] = 1
14// matrix[0][1] = 2
15// matrix[0][2] = 3
16// matrix[1][0] = 4
17// matrix[1][1] = 5
18// matrix[1][2] = 6
19// matrix[2][0] = 7
20// matrix[2][1] = 8
21// matrix[2][2] = 9
ในตัวอย่างนี้ เรากำลังวนลูปผ่านอาเรย์สองมิติ matrix ลูปด้านนอกจัดการกับแถว ส่วนลูปด้านในจัดการกับคอลัมน์ โดยแสดงแต่ละองค์ประกอบตามลำดับ
การรวมกันของอาร์เรย์สองตัว
ต่อไป เราจะแนะนำตัวอย่างการคำนวณการรวมกันทั้งหมดของอาร์เรย์สองตัว ตัวอย่างเช่น คุณสามารถนำองค์ประกอบหนึ่งจากแต่ละอาร์เรย์ และแสดงคู่ทั้งหมดที่เป็นไปได้
1const array1: string[] = ['A', 'B', 'C'];
2const array2: number[] = [1, 2, 3];
3
4for (let i: number = 0; i < array1.length; i++) {
5 for (let j: number = 0; j < array2.length; j++) {
6 console.log(`Pair: (${array1[i]}, ${array2[j]})`);
7 }
8}
9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)
ในตัวอย่างนี้ คู่ทั้งหมดระหว่างอาร์เรย์ข้อความ array1 และอาร์เรย์ตัวเลข array2 ถูกสร้างขึ้น ลูปด้านนอกดึงองค์ประกอบจาก array1 และลูปด้านในดึงองค์ประกอบจาก array2 เพื่อแสดงแต่ละคู่
การสร้างพิกัดด้วยลูปซ้อนสามชั้น
โดยการใช้ลูปซ้อนสามชั้น คุณสามารถสร้างพิกัดในพื้นที่สามมิติได้ เช่น
1for (let x: number = 0; x < 3; x++) {
2 for (let y: number = 0; y < 3; y++) {
3 for (let z: number = 0; z < 3; z++) {
4 console.log(`Coordinate: (${x}, ${y}, ${z})`);
5 }
6 }
7}
8// Output
9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)
ด้วยวิธีนี้ การใช้ลูปซ้อนสามชั้นจะช่วยให้คุณสร้างพิกัดในพื้นที่สามมิติได้อย่างง่ายดาย
ประสิทธิภาพของลูปซ้อน
ลูปซ้อนมีความสะดวก แต่ต้นทุนในการคำนวณจะเพิ่มขึ้นอย่างรวดเร็วเมื่อความลึกของลูปเพิ่มขึ้น ตัวอย่างเช่น หากมีการวนซ้ำ n ครั้งในลูปด้านนอก และ m ครั้งในลูปด้านใน จำนวนการวนซ้ำทั้งหมดจะเป็น n * m เมื่อมีการซ้อนลึกขึ้น ความซับซ้อนในการคำนวณจะเพิ่มขึ้นในอัตราเอ็กซ์โปเนนเชียล อาจส่งผลกระทบต่อประสิทธิภาพของโปรแกรม
ด้านล่างเป็นความซับซ้อนของการคำนวณเมื่อทำการวนซ้ำผ่านอาร์เรย์สามตัว
1const array1: number[] = [1, 2, 3];
2const array2: number[] = [4, 5, 6];
3const array3: number[] = [7, 8, 9];
4
5for (let i: number = 0; i < array1.length; i++) {
6 for (let j: number = 0; j < array2.length; j++) {
7 for (let k: number = 0; k < array3.length; k++) {
8 console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
9 }
10 }
11}ในกรณีนี้ คุณต้องคำนวณ array1.length * array2.length * array3.length ซึ่งจะได้ 3 * 3 * 3 = 27 รอบ ในการประมวลผลการรวมกันทั้งหมด
การปรับแต่งประสิทธิภาพของลูปซ้อน
เมื่อใช้ลูปซ้อน คุณสามารถปรับปรุงประสิทธิภาพโดยพิจารณาการปรับแต่งต่อไปนี้
- ใช้การจบลูปก่อน: ออกจากลูปเมื่อบรรลุเป้าหมาย เพื่อหลีกเลี่ยงการวนซ้ำที่ไม่จำเป็น
- เก็บค่าในแคชล่วงหน้า: เก็บค่าตัวแปรที่ใช้ในลูปล่วงหน้า (โดยเฉพาะความยาวและช่วง) เพื่อลดต้นทุนการคำนวณในแต่ละครั้ง
- เปลี่ยนโครงสร้างข้อมูล: การปรับโครงสร้างของอาร์เรย์และอ็อบเจกต์อาจช่วยเพิ่มความเร็วของกระบวนการที่ซ้ำซ้อนในบางกรณี
สรุป
ลูปซ้อนเป็นเครื่องมือที่มีประสิทธิภาพในกระบวนการประมวลผลข้อมูลที่ซับซ้อนและอัลกอริทึม อย่างไรก็ตาม เมื่อความลึกของลูปและจำนวนการวนซ้ำเพิ่มขึ้น อาจเกิดปัญหาด้านประสิทธิภาพ ด้วยการปรับแต่งที่เหมาะสมและการออกแบบอย่างรอบคอบ คุณสามารถใช้ลูปซ้อนใน TypeScript ได้อย่างมีประสิทธิภาพ
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย