TypeScript - 嵌套的 If 說明：初學者指南

你好啊，未來的編程超級巨星！今天，我們將要深入 TypeScript 中嵌套的 if 說明的精彩世界。如果你是編程新手，別擔心——我將會是你這次冒險中的友好導師，就像我過去幾年來對無數學生所做的一樣。所以，拿起你喜歡的飲料，舒適地坐好，讓我們一起踏上這趟旅程吧！

TypeScript - Nested If Statements

甚麼是嵌套的 If 說明？

在我們跳進深水區之前，讓我們先從基礎開始。想像你正在玩一個視頻遊戲，你的角色需要做出多個決定。每個決定都會導致另一組選擇。這就是編程中的嵌套 if 說明——決定中的決定！

在 TypeScript（以及許多其他編程語言）中，我們使用 if 說明來在代碼中做出決定。當我們將一個 if 說明放在另一個 if 說明內部時，我們稱之為“嵌套的 if 說明”。

為何使用嵌套的 If 說明？

你可能會想，“我們為什麼需要這些嵌套的決定？”讓我給你講一個小故事。

想像你正在為一家咖啡店創建一個程序。你想要給顧客提供折扣，但這取決於兩件事：他們是否為常客，以及他們是否購買了超過3杯咖啡。你可以使用嵌套的 if 說明來檢查這兩個條件。這就像問，“他們是常客嗎？如果是，他們是否購買了超過3杯咖啡？”

現在，讓我們看看我們如何在 TypeScript 中寫這些！

嵌套的 If 說明的語法

這裡是嵌套的 if 說明的基本結構：

if (condition1) {
// 如果 condition1 為真的代碼
if (condition2) {
// 如果 condition1 和 condition2 都為真的代碼
}
}

別讓這個嚇到你！它看起來比實際的複雜。讓我們分解一下：

我們從檢查 condition1 的外部 if 說明開始。
如果 condition1 為真，我們進入第一個代碼塊。
在這個塊內部，我們有另一個檢查 condition2 的 if 說明。
如果 condition2 也為真，我們執行最內部的代碼塊。

範例：咖啡店折扣

讓我們用一些代碼將我們的咖啡店故事變成現實：

let isRegularCustomer: boolean = true;
let numberOfCoffees: number = 4;

if (isRegularCustomer) {
console.log("歡迎回來！我們來看看你是否符合折扣資格。");
if (numberOfCoffees > 3) {
console.log("好消息！你將獲得訂單20%的折扣。");
} else {
console.log("再買一杯咖啡，你就能獲得20%的折扣！");
}
} else {
console.log("歡迎！考慮加入我們的忠誠計劃以獲得優惠折扣。");
}

讓我們解釋一下這段代碼：

我們聲明兩個變量：isRegularCustomer 和 numberOfCoffees。
外部的 if 說明檢查顧客是否為常客。
如果他們是，我們歡迎他們回來並進入內部的 if 說明。
內部的 if 檢查他們是否購買了超過3杯咖啡。
如果兩個條件都為真，他們會收到折扣信息。
如果他是常客但購買3杯或更少的咖啡，他們會收到購買更多的鼓勵信息。
如果他們不是常客，他們會收到不同的歡迎信息。

運行這段代碼，你會看到折扣信息，因為兩個條件都為真！

Else...If 過渡

現在，讓我們升級我們的遊戲，使用 else...if 過渡。這在檢查多個條件時非常有用。

Else...If 過渡的語法

這是它的樣子：

if (condition1) {
// condition1 的代碼
} else if (condition2) {
// condition2 的代碼
} else if (condition3) {
// condition3 的代碼
} else {
// 如果沒有條件為真的代碼
}

範例：咖啡溫度偏好

讓我們使用 else...if 過渡來處理不同的咖啡溫度偏好：

let coffeeTemperature: number = 70; // 溫度，攝氏度

if (coffeeTemperature > 80) {
console.log("注意：你的咖啡非常熱！");
} else if (coffeeTemperature >= 70) {
console.log("你的咖啡熱騰騰的，可以喝了。");
} else if (coffeeTemperature >= 60) {
console.log("你的咖啡溫度適中。");
} else if (coffeeTemperature >= 50) {
console.log("你的咖啡變涼了，最好馬上喝。");
} else {
console.log("你的咖啡已經冷了。你要我們為你重新加熱嗎？");
}

在這個例子中：

我們根據不同的溫度閾值檢查咖啡溫度。
根據溫度，我們提供不同的信息。
如果沒有條件符合（溫度低於50°C），我們假設咖啡已經冷了。

這種結構使我們能夠有效地處理多種情況，而不需要過度嵌套。

嵌套的 If 說明的最佳實踐

在我們結束之前，這裡有一些我過去幾年學到的黃金法則：

保持簡單：試著不要過度嵌套。如果你發現自己超過了3個層次，考慮重構你的代碼。
使用清晰的條件：讓你的條件容易理解。if (isHungry && timeIsPastNoon) 比起 if (a && b) 更清晰。
考慮使用 Switch 說明：如果多個條件檢查同一個變量，switch 說明可能更清晰。
使用早期返回：有時候，你可以通過早期返回來簡化代碼，而不是嵌套。

這裡有一個早期返回的快速範例：

function checkAge(age: number): string {
if (age < 0) {
return "無效的年齡";
}
if (age < 18) {
return "你是未成年人";
}
if (age < 65) {
return "你是成年人";
}
return "你是老年人";
}

這通常比嵌套多個 if-else 說明更乾淨。

結論

恭喜你！你剛剛通過嵌套的 if 說明和 else...if 過渡升級了你的 TypeScript 技能。記住，這些是你編程工具包中的強大工具，但就像任何工具一樣，要明智地使用。

練習這些概念，嘗試不同的條件，很快你就能輕鬆地創建複雜的決策樹。誰知道呢？也許你會使用這些技能來創造下一個大熱的視頻遊戲或革命性的應用程序！

繼續編碼，繼續學習，最重要的是，玩得開心！直到下一次，這是你的友好鄰居編碼老師告別。快樂 TypeScript！

Credits: Image by storyset

上一教程:

TypeScript - 如果則語句

下一教程:

TypeScript - Switch語句