Runoob-TypeScript:TypeScript 迴圈
ylbtech-Runoob-TypeScript:TypeScript 迴圈 |
1.返回頂部 |
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 時,退出迴圈。
流程圖
例項
以下例項計算 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 num = 5; 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 為止。
流程圖
例項
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語句有以下兩種用法:
- 當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;
流程圖
例項
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("這段程式碼會不停的執行")
}
2、
2.返回頂部 |
3.返回頂部 |
4.返回頂部 |
5.返回頂部 |
6.返回頂部 |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。 |