1、TypeScript 循環(huán)

有的時(shí)候，我們可能需要多次執(zhí)行同一塊代碼。一般情況下，語(yǔ)句是按順序執(zhí)行的：函數(shù)中的第一個(gè)語(yǔ)句先執(zhí)行，接著是第二個(gè)語(yǔ)句，依此類推。

編程語(yǔ)言提供了更為復(fù)雜執(zhí)行路徑的多種控制結(jié)構(gòu)。

循環(huán)語(yǔ)句允許我們多次執(zhí)行一個(gè)語(yǔ)句或語(yǔ)句組，下面是大多數(shù)編程語(yǔ)言中循環(huán)語(yǔ)句的流程圖：

2、for 循環(huán)

TypeScript for 循環(huán)用于多次執(zhí)行一個(gè)語(yǔ)句序列，簡(jiǎn)化管理循環(huán)變量的代碼。

語(yǔ)法

語(yǔ)法格式如下所示：

for ( init; condition; increment ){
    statement(s);
}

下面是 for 循環(huán)的控制流程解析：

1. init 會(huì)首先被執(zhí)行，且只會(huì)執(zhí)行一次。這一步允許您聲明并初始化任何循環(huán)控制變量。您也可以不在這里寫任何語(yǔ)句，只要有一個(gè)分號(hào)出現(xiàn)即可。
2. 接下來(lái)，會(huì)判斷 condition 。如果為 true，則執(zhí)行循環(huán)主體。如果為 false，則不執(zhí)行循環(huán)主體，且控制流會(huì)跳轉(zhuǎn)到緊接著 for 循環(huán)的下一條語(yǔ)句。
3. 在執(zhí)行完 for 循環(huán)主體后，控制流會(huì)跳回上面的 increment 語(yǔ)句。該語(yǔ)句允許您更新循環(huán)控制變量。該語(yǔ)句可以留空，只要在條件后有一個(gè)分號(hào)出現(xiàn)即可。
4. 條件再次被判斷。如果為 true，則執(zhí)行循環(huán)，這個(gè)過程會(huì)不斷重復(fù)（循環(huán)主體，然后增加步值，再然后重新判斷條件）。在條件變?yōu)?false 時(shí)，for 循環(huán)終止。

在這里，statement(s) 可以是一個(gè)單獨(dú)的語(yǔ)句，也可以是幾個(gè)語(yǔ)句組成的代碼塊。

condition 可以是任意的表達(dá)式，當(dāng)條件為 true 時(shí)執(zhí)行循環(huán)，當(dāng)條件為 false 時(shí)，退出循環(huán)。

流程圖

鴻蒙NEXT學(xué)習(xí)文檔+mau123789是v

實(shí)例

以下實(shí)例計(jì)算 5 的階乘， for 循環(huán)生成從 5 到 1 的數(shù)字，并計(jì)算每次循環(huán)數(shù)字的乘積。

3、TypeScript

var num:number = 5; var i:number; var factorial = 1; for(i = num;i>=1;i--) { factorial *= i; } console.log(factorial)

編譯以上代碼得到如下 JavaScript 代碼：

4、JavaScript

鴻蒙NEXT學(xué)習(xí)文檔+mau123789是v
var num = 5;

var i;

var factorial = 1;

for (i = num; i >= 1; i--)

{

factorial *= i;

}

console.log(factorial);復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

120

5、for...in 循環(huán)

for...in 語(yǔ)句用于一組值的集合或列表進(jìn)行迭代輸出。

語(yǔ)法

語(yǔ)法格式如下所示：

for (var val in list) { 
    //語(yǔ)句 
}

val 需要為 string 或 any 類型。

實(shí)例

6、TypeScript

var j:any;

var n:any = "a b c"

for(j in n) {

console.log(n[j])

}復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

7、JavaScript

var j;
var n = "a b c";
for (j in n) {
    console.log(n[j]);
}復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

a

b

c

8、for…of 、forEach、every 和 some 循環(huán)

此外，TypeScript 還支持 for…of 、forEach、every 和 some 循環(huán)。

for...of 語(yǔ)句創(chuàng)建一個(gè)循環(huán)來(lái)迭代可迭代的對(duì)象。在 ES6 中引入的 for...of 循環(huán)，以替代 for...in 和 forEach() ，并支持新的迭代協(xié)議。for...of 允許你遍歷 Arrays（數(shù)組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數(shù)據(jù)結(jié)構(gòu)等。

9、TypeScript for...of 循環(huán)

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}復(fù)制

forEach、every 和 some 是 JavaScript 的循環(huán)語(yǔ)法，TypeScript 作為 JavaScript 的語(yǔ)法超集，當(dāng)然默認(rèn)也是支持的。

因?yàn)?forEach 在 iteration 中是無(wú)法返回的，所以可以使用 every 和 some 來(lái)取代 forEach。

10、TypeScript forEach 循環(huán)

let list = [4, 5, 6];
list.forEach((val, idx, array) = > {
    // val: 當(dāng)前值
    // idx：當(dāng)前index
    // array: Array
});復(fù)制

11、TypeScript every 循環(huán)

let list = [4, 5, 6];
list.every((val, idx, array) = > {
    // val: 當(dāng)前值
    // idx：當(dāng)前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});復(fù)制

12、while 循環(huán)

while 語(yǔ)句在給定條件為 true 時(shí)，重復(fù)執(zhí)行語(yǔ)句或語(yǔ)句組。循環(huán)主體執(zhí)行之前會(huì)先測(cè)試條件。

語(yǔ)法

語(yǔ)法格式如下所示：

while(condition)
{
   statement(s);
}

在這里，statement(s) 可以是一個(gè)單獨(dú)的語(yǔ)句，也可以是幾個(gè)語(yǔ)句組成的代碼塊。

condition 可以是任意的表達(dá)式，當(dāng)條件為 true 時(shí)執(zhí)行循環(huán)。 當(dāng)條件為 false 時(shí)，程序流將退出循環(huán)。

流程圖

圖表中，while 循環(huán)的關(guān)鍵點(diǎn)是循環(huán)可能一次都不會(huì)執(zhí)行。當(dāng)條件為 false 時(shí)，會(huì)跳過循環(huán)主體，直接執(zhí)行緊接著 while 循環(huán)的下一條語(yǔ)句。

實(shí)例

13、TypeScript

var num:number = 5; 
var factorial:number = 1; 
 
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的階乘為："+factorial);復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

14、JavaScript

var num = 5;
var factorial = 1;
while (num >= 1) {
    factorial = factorial * num;
    num--;
}
console.log("5 的階乘為：" + factorial);復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

5 的階乘為：120

15、do...while 循環(huán)

不像 for 和 while 循環(huán)，它們是在循環(huán)頭部測(cè)試循環(huán)條件。do...while 循環(huán)是在循環(huán)的尾部檢查它的條件。

語(yǔ)法

語(yǔ)法格式如下所示：

do
{
   statement(s);
}while( condition );

請(qǐng)注意，條件表達(dá)式出現(xiàn)在循環(huán)的尾部，所以循環(huán)中的 statement(s) 會(huì)在條件被測(cè)試之前至少執(zhí)行一次。

如果條件為 true，控制流會(huì)跳轉(zhuǎn)回上面的 do，然后重新執(zhí)行循環(huán)中的 statement(s)。這個(gè)過程會(huì)不斷重復(fù)，直到給定條件變?yōu)?false 為止。

流程圖

實(shí)例

TypeScript

var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n >=0);復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

JavaScript

var num = 5;
var n = 10;
do {
    console.log(n);
    n--;
} while (n >= 0);復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

10
9
8
7
6
5
4
3
2
1
0

16、break 語(yǔ)句

break 語(yǔ)句有以下兩種用法：

1. 當(dāng) break 語(yǔ)句出現(xiàn)在一個(gè)循環(huán)內(nèi)時(shí)，循環(huán)會(huì)立即終止，且程序流將繼續(xù)執(zhí)行緊接著循環(huán)的下一條語(yǔ)句。
2. 它可用于終止 switch 語(yǔ)句中的一個(gè) case。

如果您使用的是嵌套循環(huán)（即一個(gè)循環(huán)內(nèi)嵌套另一個(gè)循環(huán)），break 語(yǔ)句會(huì)停止執(zhí)行最內(nèi)層的循環(huán)，然后開始執(zhí)行該塊之后的下一行代碼。

語(yǔ)法

語(yǔ)法格式如下所示：

break;

流程圖

實(shí)例

TypeScript

var i:number = 1 
while(i<=10) { 
    if (i % 5 == 0) {   
        console.log ("在 1~10 之間第一個(gè)被 5 整除的數(shù)為 : "+i) 
        break     // 找到一個(gè)后退出循環(huán)
    } 
    i++ 
}  // 輸出 5 然后程序執(zhí)行結(jié)束復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

JavaScript

var i = 1;
while (i <= 10) {
    if (i % 5 == 0) {
        console.log("在 1~10 之間第一個(gè)被 5 整除的數(shù)為 : " + i);
        break; // 找到一個(gè)后退出循環(huán)
    }
    i++;
} // 輸出 5 然后程序執(zhí)行結(jié)束復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

在 1~10 之間第一個(gè)被 5 整除的數(shù)為 : 5

17、continue 語(yǔ)句

continue 語(yǔ)句有點(diǎn)像 break 語(yǔ)句。但它不是強(qiáng)制終止，continue 會(huì)跳過當(dāng)前循環(huán)中的代碼，強(qiáng)迫開始下一次循環(huán)。

對(duì)于 for 循環(huán)，continue 語(yǔ)句執(zhí)行后自增語(yǔ)句仍然會(huì)執(zhí)行。對(duì)于 while 和 do...while 循環(huán)，continue 語(yǔ)句重新執(zhí)行條件判斷語(yǔ)句。

語(yǔ)法

語(yǔ)法格式如下所示：

continue;

流程圖

實(shí)例

TypeScript

ar num:number = 0
var count:number = 0;
 
for(num=0;num<=20;num++) {
    if (num % 2==0) {
        continue
    }
    count++
}
console.log ("0 ~20 之間的奇數(shù)個(gè)數(shù)為: "+count)    //輸出10個(gè)偶數(shù)復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

JavaScript

var num = 0;
var count = 0;
for (num = 0; num <= 20; num++) {
    if (num % 2 == 0) {
        continue;
    }
    count++;
}
console.log("0 ~20 之間的奇數(shù)個(gè)數(shù)為: " + count); //輸出 10復(fù)制

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

0 ~20 之間的奇數(shù)個(gè)數(shù)為: 10

18、無(wú)限循環(huán)

無(wú)限循環(huán)就是一直在運(yùn)行不會(huì)停止的循環(huán)。 for 和 while 循環(huán)都可以創(chuàng)建無(wú)限循環(huán)。

for 創(chuàng)建無(wú)限循環(huán)語(yǔ)法格式：

for(;;) { 
   // 語(yǔ)句
}

實(shí)例

for(;;) { 
   console.log("這段代碼會(huì)不停的執(zhí)行") 
}

while 創(chuàng)建無(wú)限循環(huán)語(yǔ)法格式：

while(true) { 
   // 語(yǔ)句
}

實(shí)例

while(true) { 
   console.log("這段代碼會(huì)不停的執(zhí)行") 
}

審核編輯 黃宇