中級 Pro ⏱ 25:00
04-3 (付費) 進階流控:模式匹配與狀態管理
(Pro) 邁向資深開發者。探索模式匹配、複雜狀態機處理,以及如何避免過深的回圈與巢狀。
04-3 (付費) 進階流控:模式匹配與狀態管理
👋 **老師的話 (Script)**:
"歡迎來到高手單元。
你有沒有看過一種程式碼,if 裡面包 if,總共包了 5 層?業界稱之為『毀滅金字塔 (Pyramid of Doom)』。
資深工程師的程式碼往往平整得像一張紙。
他們到底是怎麼把複雜的邏輯打平的?這一單元,我們要教你幾種『降維打擊』的流控技巧。“
1. 打平你的邏輯:Early Exit (衛句)
這是讓程式碼變清晰的最簡單工具。
// ❌ 巢狀寫法
function processUser(user) {
if (user) {
if (user.isActive) {
if (user.hasPermission) {
return "Access Granted";
}
}
}
}
// ✅ 衛句 (Gard Clause)
function processUser(user) {
if (!user) return;
if (!user.isActive) return;
if (!user.hasPermission) return;
return "Access Granted";
}
2. Pattern Matching (模式匹配) 模擬
雖然 JS 官方的 Pattern Matching 提案還在路上,但在 2026 年,我們常用 Object Mapping 來取代繁瑣的 switch。
const userActions = {
ADMIN: (u) => grantAllAccess(u),
GUEST: (u) => limitAccess(u),
BANNED: (u) => redirectToLogin(u),
DEFAULT: () => console.log("Unknown role")
};
const handleUser = (user) => {
const action = userActions[user.role] ?? userActions.DEFAULT;
return action(user);
};
優點:
- 易擴充:加一個新的角色只需要在物件加一行,不需要改
if/else。 - O(1) 效能:直接查表,比
if/else一個個判斷快得多。
3. 分支美學:Switch(true)
這是一個冷門但極強的技巧,適合處理多種範圍判斷。
const score = 85;
switch (true) {
case (score >= 90):
console.log("優秀");
break;
case (score >= 60):
console.log("及格");
break;
default:
console.log("不及格");
}
🧪 Lab 06: 邏輯重構
請嘗試把你專案中某個複雜的
if-else if-else 結構,
使用 Object Mapping 的方式重寫。感受一下維護性的差異。