TypeScript 迴圈

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

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

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

迴圈結構

for 迴圈

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

語法

語法格式如下所示：

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

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

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

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

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

流程圖

Perl 中的 for 迴圈

例項

以下例項計算 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 程式碼，輸出結果為：

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 時，程式流將退出迴圈。

流程圖

圖表中，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 為止。

流程圖

Perl 中的 do...while 迴圈

例項

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 程式碼，輸出結果為：

break 語句

break 語句有以下兩種用法：

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

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

語法

語法格式如下所示：

break;

流程圖

例項

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;

流程圖

C continue 語句

例項

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("這段程式碼會不停的執行") 
}

入門教學 -- 學的不僅是技術，更是夢想！

TypeScript 迴圈

for 迴圈

語法

流程圖

例項

TypeScript

JavaScript

for...in 迴圈

語法

例項

TypeScript

JavaScript

for…of 、forEach、every 和 some 迴圈

TypeScript for...of 迴圈

TypeScript forEach 迴圈

TypeScript every 迴圈

while 迴圈

語法

流程圖

例項

TypeScript

JavaScript

do...while 迴圈

語法

流程圖

例項

TypeScript

JavaScript

break 語句

語法

流程圖

例項

TypeScript

JavaScript

continue 語句

語法

流程圖

例項

TypeScript

JavaScript

無限迴圈