TypeScript 迴圈語句

知否發表於2021-09-25
原文網址 : https://segmentfault.com/a/1190000040726563
TypeScript

本節我們學習迴圈，什麼是迴圈呢，從字面意思就可以看就是重複多次執行程式碼。

TypeScript 中的 for 迴圈和 for...in 循的使用就和 JavaScript 中的一樣。此外，TypeScript 中還還支援 for…of 、forEach、every 和 some 迴圈。

for迴圈

TypeScript 語言中的 for 迴圈可以用於多次執行一個程式碼塊。例如一句程式碼重複執行 10 次、100次、1000次等，都可以通過迴圈來實現。

語法如下所示：

for ( init; condition; increment ){
    // 程式碼塊
}

其中 init 是迴圈控制變數，會在迴圈最開始的時候執行，且只會執行一次。condition 是迴圈條件，當條件為 true 時會執行迴圈中的程式碼塊，為 false 時則停止執行迴圈。increment 用於更新迴圈控制變數，當迴圈中的程式碼塊執行完畢後，控制流會跳回到這個語句。

示例：

迴圈輸出數字 0 到 4：

let num:number = 5;
let i:number;
for (i = 0; i < num; i++){
    console.log(i);
}

編譯成 JavaScript 程式碼：

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

輸出：

0
1
2
3
4

我們來看下上面程式碼的執行流程：

  • 首先程式中的程式碼都是自上而下執行，所以在迴圈開始執行之前會執行這兩句程式碼：
let num:number = 5;
let i:number;
  • 然後看到迴圈部分，首先被執行的是 i = 0，初始化迴圈的控制變數變數，然後判斷給出的迴圈條件 i < num，如果滿足這個條件，則執行迴圈中的程式碼塊。所以此時輸出了 0，這就是第一次迴圈。
  • 接著開始第二次迴圈，控制流會跳回到 i++ 語句部分，這條語句用於更新迴圈控制變數，所以此時 i 的值加 1。知道了 i 的值為 1 後，迴圈條件再次被判斷，此時 i < num 仍舊滿足，所以繼續執行迴圈中的程式碼塊，輸出 1，這是第二次迴圈。
  • 然後就跟上面的步驟一樣，繼續第三次、第四次...等的迴圈。一直到迴圈條件 i < num 不滿足時，迴圈就會結束。

for...in 迴圈

for...in 是 for 迴圈的另一個變體， for...in 語句可以用於一組值的集合或列表進行迭代輸出。

語法格式如下所示：

for (var val in list) { 
    //程式碼塊
}

val 的資料型別為 string 或者 any 型別。

示例：

例如我們宣告一個陣列，然後使用 for...in 迴圈來遍歷這個陣列：

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i:string;
for (i in myArr){
    console.log(myArr[i]);
}

編譯成 JavaScript 程式碼：

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (i in myArr) {
    console.log(myArr[i]);
}

輸出：

a
b
c
d

for...of迴圈

ES6 中引入了 for...of 迴圈，用來替代for...in 和 forEach()。for...of 語句建立一個迴圈來迭代可迭代的物件。可以用於遍歷字串、陣列、對映、集合等可迭代的資料結構。

示例：

使用 for...of 語句遍歷陣列：

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i;
for (i of myArr){
    console.log(i);
}

編譯成 JavaScript 程式碼：

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (var _i = 0, myArr_1 = myArr; _i < myArr_1.length; _i++) {
    i = myArr_1[_i];
    console.log(i);
}

輸出：

a
b
c
d

forEach 迴圈

forEach() 方法是一個陣列方法，用於對陣列中的每個項執行一個函式。

語法如下所示：

array.forEach(callback[, thisObject]);

forEach() 方法按升序對陣列中的每個元素執行一次提供的回撥。callback 回撥函式時一個用於測試每個元素的函式，接受三個可選引數，第一個引數為元素值 value ，第二個引數為元素索引 index，第三個引數為 Array，是一個在 forEach() 方法中迭代的陣列。thisObject 是執行回撥時使用的物件。

示例：

迴圈一個陣列：

let username:string[] = ['楊過', '黃蓉', '郭靖', '梅超風'];
username.forEach(function(item){
    console.log(item);
});

編譯成 JavaScript 程式碼：

var username = ['楊過', '黃蓉', '郭靖', '梅超風'];
username.forEach(function (item) {
    console.log(item);
});

輸出：

楊過
黃蓉
郭靖
梅超風

使用 forEach() 方法其實有一個缺點，就是它沒有提供停止或者中斷迴圈的方法，且它只對陣列有效。所以我們可以使用 every 和 some 來代替 forEach 迴圈。

every 迴圈

every() 方法測試陣列中的所有元素是否通過由提供的函式實現的測試。如果陣列中的每個元素都滿足提供的測試功能，則返回true。否則返回 false。

語法如下所示：

array.every(callback[, thisObject]);

every() 方法的語法和forEach() 方法類似，其中 callback 是一個回撥函式，thisObject 為執行回撥時用作此物件的物件。

示例：
let numArr:number[] = [1, 2, 3, 4, 5];

let result = numArr.every(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

編譯為 JavaScript 程式碼：

var numArr = [1, 2, 3, 4, 5];
var result = numArr.every(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

輸出：

true

上述程式碼中因為陣列 numArr 中的每個元素都通過了由函式compare 提供的測試，所以返回結果為 true。

some 迴圈

some() 方法用於測試陣列中的某些元素是否通過由提供的函式實現的測試。

some() 方法和 every() 方法很類似，但是兩者又還有一些區別，some() 方法會遍歷陣列中的每一項，如果其中一項為 true，則返回值為true。every() 方法則需要全部為true ，結果才為 true。

示例：
let numArr:number[] = [7, 10, 15, 21];

let result = numArr.some(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

編譯成 JavaScript 程式碼：

var numArr = [7, 10, 15, 21];
var result = numArr.some(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

輸出：

true

上述程式碼中只要陣列 numArr 中的有任何一個元素通過了由函式compare 提供的測試，結果返回值就會為 true。很明顯，陣列中有一個元素 7，滿足小於 10 這個條件，所以最終程式碼輸出結果為 true。

while 迴圈

while 語句在滿足指定迴圈條件時，會重複執行迴圈中的程式碼塊。迴圈主體執行之前會先執行測試條件，如果一開始就不滿足條件，則迴圈不會執行。

語法格式：

while(condition)
{
   // 程式碼塊
}
示例：

迴圈輸出數字 1 到 5：

var num:number = 1; 
while(num <= 5) { 
    console.log(num);
    num++; 
}

編譯成 JavaScript 程式碼：

var num = 1;
while (num <= 5) {
    console.log(num);
    num++;
}

輸出：

1
2
3
4
5

while 後面小括號中就是指定的迴圈條件，當第一次迴圈時，變數 num 的值一開始為1，滿足 num <= 5 ，輸出 num 的值，然後執行 num++ ，此時 num 的值變為了2。然後繼續第二次迴圈，2 小於 5，所以滿足迴圈條件，執行迴圈中的程式碼塊.... 然後一直到 num <= 5 這個條件不成立，迴圈結束。

do...while 迴圈

do...while 迴圈和 while 迴圈和 for 迴圈不同，for 和 while 迴圈是在迴圈頭部測試迴圈條件，do...while 迴圈是在迴圈的尾部檢查它的條件。且 do...while 迴圈會在條件被測試之前至少執行一次。

語法格式如下所示：

do{
   // 程式碼塊
}while( condition );
示例：
var num:number = 1; 
do { 
    console.log(num); 
    num++; 
} while(num == 5);

編譯成 JavaScript 程式碼：

var num = 1;
do {
    console.log(num);
    num++;
} while (num == 5);

輸出：

1

我們來看上面這段程式碼，在上面這個 do...while 迴圈中我們給定的迴圈條件為 num == 5 ，但此時 num 的值為 1，很顯然不滿足條件，但是從輸出結果我們可以看出，迴圈執行了一次。這正是do...while 迴圈的與眾不同，就是即使不滿足條件，迴圈也至少會執行一次。

總結

對於迴圈來說，我們常見的還是 for 迴圈和 while 迴圈，那麼什麼情況下使用這兩種迴圈呢？

  • 一般知道執行次數的使用選擇使用 for 迴圈，而 while 可以在不確定迴圈次數的時候使用。
  • 可以根據具體需要使用這兩種迴圈，但是可以優先考慮 for 迴圈，因為一般情況下 for 迴圈效率較高。

相關文章