循环语句

在遇到一些需要反复执行的计算时，如从 1 开始，依次计算并输出 1+2 的和、1+2+3 的和，一直到 1+…+100 的和，如果程序只能按照默认顺序执行，代码的编写将异常烦琐，示例代码如下。

let a: number = 1;
a = a + 2;
console.log(a);
a = a + 3;

a = a + 4;
console.log(a);
...
a = a + 100;
console.log(a);

在 TypeScript 中，通过循环语句，根据一定条件决定是否反复执行某一段代码。循环语句执行流程如图5-3所示。常见的循环语句有 for、while、do…while 语句等。接下来，将分别进行介绍。

image 2024 02 17 18 16 55 145
Figure 1. 图5-3 循环语句执行流程

for语句

for 语句是最常用的循环语句，它的语法如下。

for (前置语句; 条件表达式; 后置语句) {
     //要执行的代码块
}

for 语句的句首包含 3 个要素。

  • 前置语句：在整个循环开始之前执行的代码。

  • 条件表达式：如果条件表达式的值为 true，则进行循环；否则，结束整个循环。

  • 后置语句：每轮循环后都会执行的代码。

例如，从 1 开始，依次计算并输出 1+2 的和、1+2+3 的和，一直到 1+…+100 的和，可以用 for 语句来轻松实现，代码如下。

let a: number = 1;
for (let i = 2; i <= 100; i++) {
    a += i;
    console.log(a);
}

在本例中，前置语句声明了一个变量 i，初始值为 2，条件表达式是 i<=100，仅当 i 小于或等于 100 时，才会执行循环体，后置语句是 i++，每次循环体执行后 i 的值都会递增 1。代码执行后，输出结果如下。

> 3
> 6
> 10
...
> 4851
> 4950
> 5050

要输出从 1900 年到 2000 年的所有闰年，可以用以下循环语句实现。

for (let i = 1900; i <= 2000; i++) {
    if (i % 4 == 0) {
        console.log(i);
    }
}

在本例中，前置语句声明了一个变量 i，初始值为 1900，条件表达式是 i<=2000，仅当 i 小于或等于 2000 时才会执行循环体，后置语句是 i++，每次循环体执行后 i 的值都会递增 1，输出结果如下。

> 1900
> 1904
> 1908
...
> 1992
> 1996
> 2000

  1. 前置语句

    for 循环的前置语句会在整个循环开始之前执行，它通常用于声明循环中会用到的指针变量。实际上，它也可以根据需要来使用，例如，同时初始化多个值。

    for (let i = 0, text = ""; i < 10; i++) {
    text += i + ";";
}

    注意，对于在前置语句中声明的变量，作用域只限于循环体中，无法在循环体外使用。例如，以下代码会引起编译错误。

    for (let i = 0, text = ""; i < 10; i++) {
    text += i + ";";
}
console.log(i);    //编译错误：找不到名称"i"。ts(2304)
console.log(text); //编译错误：找不到名称"text"。你是否指的是"Text"?ts(2552)

    前置语句并非必需的。如果不需要，留空即可，示例代码如下。

    let i = 0, text = "";
for (; i < 10; i++) {
    text += i + ";";
}
console.log(i);    //输出10
console.log(text); //输出0;1;2;3;4;5;6;7;8;9;

  2. 条件表达式

    如果条件表达式的计算结果为 true，则进行循环；否则，结束整个循环。通常来说，这里应该填入布尔类型的值，如果填入其他类型的值，则会触发隐式转换，示例代码如下。

    let text = "hello";
for (let i = 5; text; i++) {
    //每次少截取末尾的一个字符
    text = text.slice(0, text.length - 1);
    console.log(text);
}

    输出结果如下。

    > hell
> hel
> he
> h
>

    以上代码等同于以下代码。

    let text = "hello";
for (let i = 5; Boolean(text); i++) {
    text = text.slice(0, text.length - 1);
    console.log(text);
}

  3. 后置语句

后置语句在每轮循环后都会执行，它通常用于修改控制循环过程的指针变量。从理论上来说，后置语句可以是任何语句，示例代码如下。

for (let i = 0; i < 4; console.log(i)) {
    i++;
}

输出结果如下。

> 1
> 2
> 3
> 4

后置语句并非必需的。如果不需要，留空即可，示例代码如下。

let i = 0
for (; i < 4; ) {
    i++;
}

while语句

while 语句的语法如下。

while (条件表达式) {
    //要执行的代码块
}

当条件表达式的值为 true 时，会反复执行循环，直到条件表达式的值为 false 为止。注意，如果条件表达式的值不是布尔类型，则会触发隐式转换。

例如，从 1 开始，依次计算并输出 1+2 的和、1+2+3 的和，一直到 1+…+100 的和，也可以用 while 语句来实现，代码如下。

let a: number = 1;
let i: number = 2;
while (i <= 100) {
    a += i;
    console.log(a);
    i++;
}

但是在实际中并不推荐对上面的示例使用 while 语句，因为当能够确定循环次数且需要声明指针变量并对其自增时，使用 for 语句会有更强的可读性，能够清晰地展示指针变量及其操作。

while 语句通常用于无法预知循环次数的情况，这种情况通常也无法使用指针变量进行辅助，是否跳出循环依赖其他程序或外部 API 产生的结果。在以下代码中，在当前时间到达中午 12 点之前，会一直循环等待，直到中午 12 点之后才会跳出循环。

while(new Date().getHours()<=12)
{
    console.log("在下午前一直等待");
}
console.log("下午好");

do…while语句

do…while 语句是 while 语句的变体，在检查条件表达式的值是否为 true 之前，会先执行一次循环体的代码，然后只要条件表达式的值为 true，就会重复执行循环体的代码，直到条件表达式的值为 false 为止。其语法如下。

do {
    //要执行的代码块
}
while (条件);

例如，从 1 开始，依次计算并输出 1+2 的和、1+2+3 的和，一直到 1+…+100 的和，也可以用 do…while 语句实现，代码如下。

let a: number = 1;
let i: number = 2;
do {
    a += i;
    console.log(a);
    i++;
}
while (i <= 100)

注意，在第一次判断条件表达式的值之前，循环体至少会执行一次。例如，在以下代码中，即使条件表达式的值为 false，循环体也会执行一次。

do {
    console.log("executed!"); //输出"executed!"
}
while (false);

break与continue关键字

在 for、while、do…while 语句中，使用以下两个关键字来调整循环过程。

  • break 关键字：退出整个循环。

  • continue 关键字：跳过当前循环（本轮循环将不再执行 continue 关键字以后的代码），开始下一轮循环。

break 关键字的示例代码如下。

for (let i = 1; i <= 3; i++) {
    if (i == 2) { break; }
    console.log(i);
}

循环中定义了变量 i，条件表达式为 i<=3，如果没有其他操作，代码执行后将输出 1 到 3 的整数，但当 i==2 时执行 break 语句，终止整个循环，因此输出结果如下。

> 1

关于 continue 关键字的示例代码如下。

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

当 i==2 时执行 continue 语句，跳过当前循环，开始下一轮循环，因此输出结果如下。

> 1
> 3