鴻蒙開發TypeScript語言：【迴圈】

烧脑猴發表於2024-04-17
鴻蒙TypeScript

有的時候，我們可能需要多次執行同一塊程式碼。一般情況下，語句是按順序執行的：函式中的第一個語句先執行，接著是第二個語句，依此類推。

程式語言提供了更為複雜執行路徑的多種控制結構。

迴圈語句允許我們多次執行一個語句或語句組，下面是大多數程式語言中迴圈語句的流程圖：

image

for 迴圈

TypeScript for 迴圈用於多次執行一個語句序列，簡化管理迴圈變數的程式碼。

語法

語法格式如下所示：

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

下面是 for 迴圈的控制流程解析：

  1. init 會首先被執行，且只會執行一次。這一步允許您宣告並初始化任何迴圈控制變數。您也可以不在這裡寫任何語句，只要有一個分號出現即可。
  2. 接下來，會判斷 condition。如果為 true，則執行迴圈主體。如果為 false，則不執行迴圈主體，且控制流會跳轉到緊接著 for 迴圈的下一條語句。
  3. 在執行完 for 迴圈主體後，控制流會跳回上面的 increment 語句。該語句允許您更新迴圈控制變數。該語句可以留空，只要在條件後有一個分號出現即可。
  4. 條件再次被判斷。如果為 true，則執行迴圈，這個過程會不斷重複（迴圈主體，然後增加步值，再然後重新判斷條件）。在條件變為 false 時，for 迴圈終止。

在這裡，statement(s) 可以是一個單獨的語句，也可以是幾個語句組成的程式碼塊。

condition 可以是任意的表示式，當條件為 true 時執行迴圈，當條件為 false 時，退出迴圈。

流程圖

image

例項

以下例項計算 5 的階乘， for 迴圈生成從 5 到 1 的數字，並計算每次迴圈數字的乘積。

TypeScript

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

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

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

執行以上 JavaScript 程式碼，輸出結果為：

120

for...in 迴圈

for...in 語句用於一組值的集合或列表進行迭代輸出。

語法

語法格式如下所示：

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

val 需要為 string 或 any 型別。

例項

TypeScript

var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

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

執行以上 JavaScript 程式碼，輸出結果為：

a

b

c

for…of 、forEach、every 和 some 迴圈

此外，TypeScript 還支援 for…of 、forEach、every 和 some 迴圈。

for...of 語句建立一個迴圈來迭代可迭代的物件。在 ES6 中引入的 for...of 迴圈，以替代 for...in 和 forEach() ，並支援新的迭代協議。for...of 允許你遍歷 Arrays（陣列）, Strings（字串）, Maps（對映）, Sets（集合）等可迭代的資料結構等。

TypeScript for...of 迴圈

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

forEach、every 和 some 是 JavaScript 的迴圈語法，TypeScript 作為 JavaScript 的語法超集，當然預設也是支援的。

因為 forEach 在 iteration 中是無法返回的，所以可以使用 every 和 some 來取代 forEach。

TypeScript forEach 迴圈

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

TypeScript every 迴圈

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

while 迴圈

while 語句在給定條件為 true 時，重複執行語句或語句組。迴圈主體執行之前會先測試條件。

語法

語法格式如下所示：

while(condition)
{
   statement(s);
}

在這裡，statement(s) 可以是一個單獨的語句，也可以是幾個語句組成的程式碼塊。

condition 可以是任意的表示式，當條件為 true 時執行迴圈。 當條件為 false 時，程式流將退出迴圈。

流程圖

image

圖表中，while 迴圈的關鍵點是迴圈可能一次都不會執行。當條件為 false 時，會跳過迴圈主體，直接執行緊接著 while 迴圈的下一條語句。

例項

TypeScript

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

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

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

執行以上 JavaScript 程式碼，輸出結果為：

5 的階乘為：120

do...while 迴圈

不像 for 和 while 迴圈，它們是在迴圈頭部測試迴圈條件。do...while 迴圈是在迴圈的尾部檢查它的條件。

語法

語法格式如下所示：

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

請注意，條件表示式出現在迴圈的尾部，所以迴圈中的 statement(s) 會在條件被測試之前至少執行一次。

如果條件為 true，控制流會跳轉回上面的 do，然後重新執行迴圈中的 statement(s)。這個過程會不斷重複，直到給定條件變為 false 為止。

流程圖

image

例項

TypeScript

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

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

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

執行以上 JavaScript 程式碼，輸出結果為：

10
9
8
7
6
5
4
3
2
1
0

break 語句

break 語句有以下兩種用法：

  1. 當 break 語句出現在一個迴圈內時，迴圈會立即終止，且程式流將繼續執行緊接著迴圈的下一條語句。
  2. 它可用於終止 switch 語句中的一個 case。

如果您使用的是巢狀迴圈（即一個迴圈內巢狀另一個迴圈），break 語句會停止執行最內層的迴圈，然後開始執行該塊之後的下一行程式碼。

語法

語法格式如下所示：

break;

流程圖

image

例項

TypeScript

var i:number = 1 
while(i<=10) { 
    if (i % 5 == 0) {   
        console.log ("在 1~10 之間第一個被 5 整除的數為 : "+i) 
        break     // 找到一個後退出迴圈
    } 
    i++ 
}  // 輸出 5 然後程式執行結束

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

var i = 1;
while (i <= 10) {
    if (i % 5 == 0) {
        console.log("在 1~10 之間第一個被 5 整除的數為 : " + i);
        break; // 找到一個後退出迴圈
    }
    i++;
} // 輸出 5 然後程式執行結束

執行以上 JavaScript 程式碼，輸出結果為：

在 1~10 之間第一個被 5 整除的數為 : 5

continue 語句

continue 語句有點像 break 語句。但它不是強制終止，continue 會跳過當前迴圈中的程式碼，強迫開始下一次迴圈。

對於 for 迴圈，continue 語句執行後自增語句仍然會執行。對於 while 和 do...while 迴圈，continue 語句重新執行條件判斷語句。

語法

語法格式如下所示：

continue;

流程圖

image

例項

TypeScript

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

編譯以上程式碼得到如下 JavaScript 程式碼：

JavaScript

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

執行以上 JavaScript 程式碼，輸出結果為：

0 ~20 之間的奇數個數為: 10

無限迴圈

無限迴圈就是一直在執行不會停止的迴圈。 for 和 while 迴圈都可以建立無限迴圈。

for 建立無限迴圈語法格式：

for(;;) { 
   // 語句
}

例項

for(;;) { 
   console.log("這段程式碼會不停的執行") 
}

while 建立無限迴圈語法格式：

while(true) { 
   // 語句
}

例項

while(true) { 
   console.log("這段程式碼會不停的執行") 
}

相關文章