TypeScript - For Loop: Mastering Repetition in Programming

您好，有志於成為程序員的各位！我很高興能成為您們在TypeScript循環世界中的引路人。作為一個教學超過十年的编程老師，我可以告訴您，理解循環就像學會騎自行車一樣——一旦掌握了，就永遠不會忘記，並會帶您去從未想象過的地方！

TypeScript - For Loop

The for loop: Your First Step into the World of Iteration

讓我們從經典的 for 循環開始。把它當作一個遵循您指示重複特定任務的友好機器人。

Basic Syntax

這是TypeScript中的 for 循環的樣子：

for (let i = 0; i < 5; i++) {
console.log("Hello, World!");
}

讓我們分解一下：

let i = 0：這是我們開始計數的地方。
i < 5：只要這個條件為真，我們就繼續。
i++：每次循環後，我們的計數增加1。
{ } 內的一切是重複的內容。

當您運行這段代碼時，您會看到 "Hello, World!" 被打印五次。就像告訴我們的機器人朋友，"說五次你好！"

A More Practical Example

讓我們假設您正在製作一個簡單的遊戲，遊戲中的角色需要跳過障礙物。這是您如何使用 for 循環來創建五個障礙物的：

let obstacles: string[] = [];

for (let i = 0; i < 5; i++) {
obstacles.push(`Obstacle ${i + 1}`);
console.log(`Created ${obstacles[i]}`);
}

console.log("All obstacles:", obstacles);

在這個例子中，我們正在創建一個障礙物數組。循環運行五次，每次都向數組中添加一個新的障礙物。注意我們如何使用 i + 1 來從1開始給障礙物編號，而不是從0開始。

The for...in loop: Exploring Object Properties

現在，讓我們來認識 for...in 循環。當您想要查看對象的所有屬性時，這個循環非常合適。這就像有一個好奇的機器人，想要窺探辦公桌上的每一個抽屜。

Basic Syntax

這是一個簡單的例子：

let person = {
name: "Alice",
age: 30,
job: "Developer"
};

for (let key in person) {
console.log(`${key}: ${person[key]}`);
}

這個循環會遍歷 person 對象中的每一個屬性（或"鍵"）並打印出來。當您不確定對象可能有哪些屬性時，這是探索對象的好方法。

A More Complex Example

讓我們假設您正在為角色扮演遊戲建立一個簡單的庫存系統：

let inventory = {
sword: 1,
shield: 1,
potion: 5,
arrow: 20
};

console.log("Your inventory:");

for (let item in inventory) {
if (inventory[item] > 1) {
console.log(`${inventory[item]} ${item}s`);
} else {
console.log(`${inventory[item]} ${item}`);
}
}

這段代碼會列出您的庫存，當您有多於一個項目時，正確地為項目複數化。這就像有一個能夠計數並報告物品的有用的助手！

The for...of loop: Simplifying Array and Iterable Object Traversal

最後但同樣重要的是，讓我們介紹 for...of 循環。當您想要遍歷數組中的每一個項目或任何其他可迭代對象時，這個循環非常合適。這就像有一個機器人能夠走在物品队列中並查看每一個。

Basic Syntax

這是一個使用數組的簡單例子：

let numbers = [1, 2, 3, 4, 5];

for (let num of numbers) {
console.log(num * 2);
}

這個循環會遍歷 numbers 數組中的每一個數字並打印出其兩倍的值。當您只是想要對每一個項目做些事情時，這比使用傳統的 for 循環簡單多了。

A More Interesting Example

讓我們假設您正在創建一個基於文本的冒險遊戲。您有一個可能的動作數組，並想要將它們展示給玩家：

let actions = ["Fight", "Run", "Hide", "Call for help"];

console.log("What would you like to do?");

for (let action of actions) {
console.log(`- ${action}`);
}

// Let's simulate a player choice
let playerChoice = actions[Math.floor(Math.random() * actions.length)];
console.log(`You chose to ${playerChoice.toLowerCase()}.`);

這段代碼會向玩家展示一系列動作，然後模擬一個隨機選擇。for...of 循環使得列出所有選項而不必擔心數組索引變得非常容易。

Comparison of Loop Methods

為了幫助您選擇合適的循環來滿足您的需求，這裡有一個方便的對比表格：

Loop Type	Best Used For	Syntax
`for`	Known number of iterations	`for (let i = 0; i < n; i++)`
`for...in`	Iterating over object properties	`for (let key in object)`
`for...of`	Iterating over array elements or other iterables	`for (let item of iterable)`

記住，選擇正確的循環可以使您的代碼更易於閱讀和高效。這就像為工作選擇正確的工具一樣——用錘子敲釘子，用螺絲刀轉螺釘，為您的數據選擇正確的循環！

總結來說，循環是編程中的基本概念，掌握它們將為您的編程之旅打開一個世界。無論您是重複一個動作，探索一個對象，還是與數組合作，都有一個循環是為此工作而生的。繼續練習，很快您就會像專業人士一樣循環！未來的開發者，快樂編碼！

Credits: Image by storyset