TypeScript - for 迴圈

for 迴圈

for 迴圈會執行程式碼塊指定的次數。它可以用來迭代一組固定的值，例如陣列。

TypeScript 提供了另外兩種迴圈變體：for...in 和 for...of。這些變體對於迭代可迭代物件（如陣列、字串和對映）特別有用。

for...of 迴圈通常更適合於迭代可迭代物件。它直接訪問可迭代物件中的元素。

for...in 迴圈迭代物件的列舉屬性。雖然它可以與陣列或字串一起使用，但不推薦用於這些情況。

語法

for 迴圈的語法如下：

for (initial_count_value; termination-condition; step) {
   //statements 
}

迴圈使用計數變數來跟蹤迭代次數。迴圈透過將count的值設定為其初始值來初始化迭代。每次count的值滿足終止條件時，它都會執行程式碼塊。step在每次迭代後更改count的值。

流程圖

示例：簡單的 for 迴圈

var num:number = 5; 
var i:number; 
var factorial = 1; 

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

程式計算數字 5 的階乘並顯示結果。for 迴圈生成從 5 到 1 的數字序列，在每次迭代中計算這些數字的乘積。

編譯後，它將生成以下 JavaScript 程式碼。

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

程式碼產生以下輸出：

示例：帶 break 語句的 for 迴圈

var i: number = 0;
for (i; i < 5; i++) {
  if (i == 4) {
    break;
  }
  console.log(i);
}

在 if 條件內，當 i 的值等於 4 時，它會中斷並退出 for 迴圈。因此它只打印 0 到 3。

編譯後，它將生成以下 JavaScript 程式碼。

var i = 0;
for (i; i < 5; i++) {
    if (i == 4) {
        break;
    }
    console.log(i);
}

以上示例的輸出如下：

示例：帶 continue 語句的 for 迴圈

var i: number = 0;
for (i; i < 5; i++) {
  if (i % 2 == 0) {
    continue;
  }
  console.log(i);
}

在上面的示例中，如果條件 (i % 2 == 0) 評估為 true，則執行控制將轉到下一次迭代。if 塊後面的語句將被跳過。當條件為 false 時，if 塊後面的語句將被執行。

編譯後，它將生成以下 JavaScript 程式碼。

var i = 0;
for (i; i < 5; i++) {
    if (i % 2 == 0) {
        continue;
    }
    console.log(i);
}

輸出如下：

1
3

for...in 迴圈

for 迴圈的另一種變體是for...in 迴圈。for…in 迴圈可用於迭代一組值，例如陣列或元組。其語法如下：

for...in 迴圈用於迭代值列表或集合。這裡的val資料型別應該是字串或 any。

語法

for..in 迴圈的語法如下：

for (var val in list) { 
   //statements 
}

讓我們看看下面的例子：

示例：帶字串的 for...in 迴圈

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

編譯後，它將生成以下 JavaScript 程式碼：

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

它將產生以下輸出：

a 
b 
c

示例：帶陣列的 for...in 迴圈

const arr: number[] = [10,20,30];
for(var idx in arr){
    console.log(arr[idx]);
}

編譯後，它將生成以下 JavaScript 程式碼。

const arr = [10, 20, 30];
for (var idx in arr) {
    console.log(arr[idx]);
}

以上示例程式碼的輸出如下：

10
20
30

示例：帶元組的 for...in 迴圈

const tp:[string, number] = ['TypeScript',20]
for( var j in tp) {
   console.log(tp[j])  
}

編譯後，它將生成以下 JavaScript 程式碼。

const tp = ['TypeScript', 20];
for (var j in tp) {
    console.log(tp[j]);
}

以上示例程式碼的輸出如下：

TypeScript
20

for...of 迴圈

for...of 迴圈是 for 迴圈的另一個變體。for...of 迴圈可以用來迭代可迭代物件的值。例如，我們可以使用 for...of 迴圈迭代陣列並從每個索引獲取值。

語法

TypeScript 中 for...of 迴圈的語法如下：

for (var element of iterable){
   // statements
}

其中：

element - 可迭代物件的當前元素。
of - TypeScript 中的 ES6 運算子。
iterable - 可迭代物件，例如陣列、字串等。

示例：帶陣列的 for...of 迴圈

const arr: string[] = ["Tutorialspoint", "JavaScript", "TypeScript"];
for (var element of arr) {
   console.log(element);
}

編譯後，它將生成以下 JavaScript 程式碼。

const arr = ["Tutorialspoint", "JavaScript", "TypeScript"];
for (var element of arr) {
    console.log(element);
}

以上示例程式碼的輸出如下：

Tutorialspoint
JavaScript 
TypeScript

示例：帶字串的 for...of 迴圈

let str: string = "Hello";
for (var char of str) {
   console.log(char);
}

編譯後，它將生成以下 TypeScript 程式碼。

let str = "Hello";
for (var char of str) {
    console.log(char);
}

以上示例程式碼的輸出如下：

H
e
l
l
o

列印頁面