TypeScript 循环语句
本文介绍了 TypeScript 中的循环语句。
YouTube Video
TypeScript 中的 for 语句
TypeScript 中的 for 语句是一种基本的循环结构，用于执行重复操作。在 for 循环中，可以根据指定的次数或条件重复执行相同的代码块。
基本语法
1for (initialization; condition; update) {
2 // Code to execute repeatedly while the condition is true
3}- 初始化（
initialization）：这是在开始循环之前仅执行一次的部分。初始化诸如循环计数器之类的变量。 - 条件（
condition）：决定是否继续循环的条件。如果为true，循环继续；如果为false，循环结束。 - 更新（
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 循环用于按顺序遍历对象的属性或数组的索引。
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 循环用于从可迭代对象（如数组或字符串）中按顺序获取每个元素的值。
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 循环，这被称为嵌套循环。这使您可以创建双重循环及其他更多功能。
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用于获取对象的属性或数组的索引。for-of用于从可迭代对象（如数组）中获取元素的值。- 通过嵌套
for循环也可以实现复杂的重复处理。
TypeScript 中的 for 语句提供了强大且灵活的重复处理功能，类似于其他循环。
TypeScript 中的 While 语句
在TypeScript中，while语句是一种循环结构，当指定的条件为true时，它会执行重复的过程。与for循环类似，while循环适用于迭代次数未事先确定的情况，或者需要基于条件来控制重复时使用。
基本语法
1while (condition) {
2 // Code to execute repeatedly while the condition is true
3}- 条件：执行循环的条件。只要这个条件为
true，循环就会继续执行；当条件变为false时，循环停止。
示例1：基本的while循环
在下面的示例中，当i小于5时，它会持续输出i的值。
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循环不同，它至少执行一次处理。
TypeScript中的while语句对于迭代次数不确定或需要进行动态条件检查的循环处理非常有用。
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;
10while (i < 10) {
11 if (i === 5) {
12 break; // Ends the loop when i is 5
13 }
14 console.log(i);
15 i++;
16}
17// Outputs 0, 1, 2, 3, 4
在这种情况下，当 i 等于 5 时执行 break。结果显示出从 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;
10while (i < 5) {
11 if (i === 2) {
12 i++;
13 continue; // Skips when i is 2
14 }
15 console.log(i);
16 i++;
17}
18// Outputs 0, 1, 3, 4
在这种情况下，当 i 等于 2 时执行 continue。结果显示出除了 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、array2 和 array3 长度的乘积，总共进行 27 次迭代来处理所有组合。
嵌套循环的优化
使用嵌套循环时，可以通过以下优化来提高性能。
- 引入提前返回：在达到目标时提前退出循环，以避免不必要的迭代。
- 缓存循环变量：预先缓存循环中使用的变量值（尤其是长度和范围），以减少每次计算的开销。
- 更改数据结构：调整数组和对象的结构可以有效加速特定的重复处理。
结论
嵌套循环是复杂数据处理和算法中的强大工具。然而，随着循环深度和迭代次数的增加，可能会出现性能问题。通过适当的优化和精心的设计，您可以有效地在 TypeScript 中利用嵌套循环。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。