資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究解釋 TypeScript 中 for 迴圈的不同變體
在任何程式語言中，我們使用迴圈來重複執行相同的程式碼塊多次。迴圈允許我們編寫更少的程式碼來多次執行相同的程式碼塊。
for 迴圈是TypeScript中的迴圈之一。如下所示，TypeScript 中還有三種不同的 for 迴圈子型別。
普通 for 迴圈
for...of 迴圈
for...in 迴圈
在本 TypeScript 教程中，我們將學習 for 迴圈的所有變體。此外，我們還將學習每種型別的 for 迴圈與其他迴圈的不同之處。
普通 for 迴圈介紹
我們可以使用 for 迴圈多次執行程式碼塊。此外，我們可以定義想要執行程式碼塊的次數。對於 for 迴圈的每次迭代，我們都可以對變數執行不同的操作。
語法
您可以按照以下語法在 TypeScript 中使用 for 迴圈。
for(initialization; condition: step){
// code block of for loop
}
for 迴圈多次執行在花括號內編寫的程式碼。
引數
使用者可以在語法中觀察到，for 迴圈採用三個不同的引數，用“;”分隔。
初始化 - 這是啟動迴圈的初始化條件。當 for 迴圈開始時，它將呼叫在第一個分號之前編寫的全部程式碼，這意味著在初始化塊中。
條件 - 這是迴圈的終止條件，允許我們停止 for 迴圈的迭代。在 for 迴圈的每次迭代之後，它都會檢查條件是否返回 true，只有在這種情況下，for 迴圈才會進行下一次迭代；否則，它將停止迭代。
步進 - 這是移動 for 迴圈並在每次迭代後更改可迭代變數的步驟。
示例 1
在下面的示例中，我們使用了 for 迴圈來列印五次訊息。在初始化步驟中，我們將 k 變數初始化為 1。每次迭代後，for 迴圈都會檢查 k 的值是否小於或等於 5，如果是，則執行下一次迭代。此外，for 迴圈將在步進中將 k 變數增加 1。
在輸出中，使用者可以看到 for 迴圈運行了 5 次程式碼，這些程式碼寫在 for 迴圈的範圍內。
// using the for loop to print the message multiple times
for (let k = 1; k <= 5; k = k + 1) {
console.log("printing the message for " + k + "time");
}
編譯後，它將生成以下 JavaScript 程式碼：
// using the for loop to print the message multiple times
for (var k = 1; k <= 5; k = k + 1) {
console.log("printing the message for " + k + "time");
}
輸出
以上程式碼將產生以下輸出：
printing the message for 1time printing the message for 2time printing the message for 3time printing the message for 4time printing the message for 5time
示例 2
在下面的示例中，我們演示瞭如何在 for 迴圈中使用 break 和 continue 關鍵字。使用者可以看到，我們在 for 迴圈的終止條件中寫了 true。因此，它永遠不會停止迴圈。
我們使用了“break”關鍵字來停止其中的 for 迴圈。在輸出中，使用者可以觀察到 for 迴圈不會為 k==1 執行程式碼，並跳轉到下一次迭代。
for (let k = 0; true; k++) {
// if the value of k==1, the loop will jump to the
// next iteration without executing the below code
if (k == 1) {
continue;
// termination condition in the for loop
} else if (k == 6) {
break;
} else {
// code to execute
console.log("The value of iterable k is " + k);
}
}
編譯後，它將生成以下 JavaScript 程式碼：
for (var k = 0; true; k++) {
// if the value of k==1, the loop will jump to the
//next iteration without executing the below code
if (k == 1) {
continue;
// termination condition in the for loop
}
else if (k == 6) {
break;
}
else {
// code to execute
console.log("The value of iterable k is " + k);
}
}
輸出
以上程式碼將產生以下輸出：
The value of iterable k is 0 The value of iterable k is 2 The value of iterable k is 3 The value of iterable k is 4 The value of iterable k is 5
for...of 迴圈介紹
for...of 迴圈是 for 迴圈的子型別。我們可以使用 for...of 迴圈迭代可迭代物件的數值。例如，我們可以使用 for...of 迴圈迭代陣列並從每個索引獲取數值。
與 for 迴圈相比，for...of 迴圈提供了一種更簡單的語法來迭代可迭代物件。
語法
您可以按照以下語法使用 for...of 迴圈迭代可迭代物件。
for (let element of iterableArray) {
// perform some operations with the element
}
在上述語法中，element 是陣列元素。for...of 迴圈從起始索引迭代每個陣列元素。
示例
在下面的示例中，我們使用了 for...of 迴圈來迭代陣列的每個值。由於字串在 TypeScript 中是可迭代物件，因此我們使用了 for...of 迴圈來迭代字串的每個字元。
我們可以在 for...of 迴圈的塊內對字串字元或陣列元素執行任何所需的操作。
// Creating the iterable array of type any
let iterableArray: any[] = [
10,
"Hi",
"TutorialsPoint",
75,
false,
true,
87,
"JavaScript",
"TypeScript",
];
// using the for-of loop to iterate through the array
for (let element of iterableArray) {
console.log("The value of element is " + element);
}
let str: string = "Welcome!";
// iterating through every character of the string
for (let char of str) {
console.log("The char is " + char);
}
編譯後，它將生成以下 JavaScript 程式碼：
// Creating the iterable array of type any
var iterableArray = [
10,
"Hi",
"TutorialsPoint",
75,
false,
true,
87,
"JavaScript",
"TypeScript",
];
// using the for-of loop to iterate through the array
for (var _i = 0, iterableArray_1 = iterableArray; _i < iterableArray_1.length; _i++) {
var element = iterableArray_1[_i];
console.log("The value of element is " + element);
}
var str = "Welcome!";
// iterating through every character of the string
for (var _a = 0, str_1 = str; _a < str_1.length; _a++) {
var char = str_1[_a];
console.log("The char is " + char);
}
輸出
以上程式碼將產生以下輸出：
The value of element is 10 The value of element is Hi The value of element is TutorialsPoint The value of element is 75 The value of element is false The value of element is true The value of element is 87 The value of element is JavaScript The value of element is TypeScript The char is W The char is e The char is l The char is c The char is o The char is m The char is e The char is !
for...in 迴圈介紹
for...in 迴圈的工作方式幾乎與 for...of 迴圈相同。for...in 迴圈迭代物件的鍵而不是物件的數值。當我們對陣列使用 for...in 迴圈時，它會迭代陣列索引。
語法
您可以按照以下語法在 TypeScript 中使用 for...in 迴圈。
for (let element in iterable) {
// element can be an object key or array index
}
示例
在這個例子中，我們建立了物件並使用 for...in 迴圈迭代每個物件的屬性。在輸出中，我們可以看到 for...in 迴圈列印所有物件屬性。
// creating the object with different key-value pairs
let obj = {
obj_name: "Shubham",
hair_color: "black",
eye_color: "black",
};
// getting all keys of an object
for (let key in obj) {
console.log("The key is " + key);
}
輸出
編譯後，它將在 JavaScript 中生成相同的程式碼。
它將產生以下輸出：
The key is obj_name The key is hair_color The key is eye_color
我們學習了 TypeScript 中 for 迴圈的不同子型別。但是，無論我們可以用 for...of 和 for...in 迴圈做什麼，我們都可以使用普通的 for 迴圈，但是 for...of 和 for...in 迴圈提供了清晰的語法和編碼器對迭代的迭代。
此外，for...of 迴圈和 for...in 迴圈之間的區別在於，for...of 迴圈迭代可迭代物件的數值，而 for...in 迴圈迭代可迭代物件的屬性。
273 次瀏覽
