如果使用傳統的 if-else 語句,對復雜的條件進行邏輯判斷,代碼很容易變得冗長難維護,分享幾種替代的寫法。
1. 對象映射替代 if-else
傳統寫法
function getPrice(user) {
if (user.type === 'vip') {
return 'VIP價格';
} else if (user.type === 'svip') {
return 'SVIP價格';
} else if (user.type === 'vvip') {
return 'VVIP價格';
} else {
return '普通價格';
}
}
替代寫法
const priceStrategy = {
vip: () => 'VIP價格',
svip: () => 'SVIP價格',
vvip: () => 'VVIP價格',
default: () => '普通價格'
};
function getPrice(user) {
return (priceStrategy[user.type] || priceStrategy.default)();
}
2. Array.includes 替代多條件
傳統寫法
if (status === 'failed' || status === 'error' || status === 'rejected') {
handleError();
}
替代寫法
const errorStatus = ['failed', 'error', 'rejected'];
if (errorStatus.includes(status)) {
handleError();
}
3. 三元運算符鏈式使用
傳統寫法
Let message;
if(score >= 90){
message = '優秀';
} else if(score >= 80){
message = '良好';
} else if(score >= 60){
message = '及格';
} else {
message = '不及格';
}
替代寫法
const message =
Score >= 90 ? '優秀' :
score >= 80 ? '良好' :
score >= 60 ? '及格' : '不及格';
4. && 和 || 運算符巧用

5. Switch 模式匹配

6. 使用 Proxy 進行條件攔截

7. 函數式編程方法

8. 狀態機模式

9. 使用裝飾器處理條件
function checkPermission(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
if (this.user?.hasPermission) {
return original.apply(this, args);
}
throw new Error('No permission');
};
return descriptor;
}
class Document {
@checkPermission
edit() {
// 編輯文檔
}
}
該文章在 2025/2/21 14:36:55 編輯過