告別 if else：JavaScript 條件判斷的優雅之道

在 JavaScript 編程世界里，條件判斷是構建邏輯的關鍵環節。傳統的if else語句雖基礎且常用，但面對復雜邏輯時，代碼易變得冗長、雜亂，維護成本直線上升。有沒有更優雅、高效的替代方案呢？答案是肯定的！本文將帶你探索多種避開if else的條件判斷技巧，讓代碼更簡潔、易讀。

一、對象映射：以數據驅動邏輯

在處理基于特定值進行不同操作的場景時，對象映射是if else的絕佳替代品。假設我們要根據用戶類型獲取對應的價格，傳統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)();
}

通過創建包含不同用戶類型對應處理函數的對象，直接根據用戶類型獲取結果，代碼簡潔明了，新增或修改條件時也更輕松。

二、Array.includes：簡化多條件判斷

當需要檢查某個值是否匹配多個條件之一時，Array.includes能讓代碼更簡潔。比如檢查狀態是否為錯誤狀態：
傳統寫法：

if (status === 'failed' || status === 'error' || status ==='rejected') {
    handleError();
}

使用Array.includes后：

const errorStatus = ['failed', 'error','rejected'];
if (errorStatus.includes(status)) {
    handleError();
}

將多個條件值存入數組，用includes方法判斷，邏輯更清晰，避免了冗長的||連接。

三、三元運算符鏈式使用：簡潔的分支判斷

對于簡單的多分支判斷，三元運算符鏈式使用可替代if else。以成績等級判斷為例：
傳統寫法：

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? '及格' : '不及格';

一行代碼完成判斷賦值，簡潔高效，但要注意嵌套層級不宜過多，否則會影響可讀性。

四、巧用 && 和 || 運算符：精簡邏輯判斷

&&和||運算符在特定場景可巧妙替代if else。比如根據用戶權限顯示管理面板：

user.isAdmin && showAdminPanel();

當user.isAdmin為true時，才會執行showAdminPanel()。

在設置默認值場景，||運算符非常實用：

const name = user.name || 'unamed';

若user.name存在則取其值，否則使用默認值'unamed'。還有空值合并運算符??，能更精準處理null和undefined：

const count = data?.users?? [];

當data.users為null或undefined時，count取值為[]。

五、Switch 模式匹配：靈活的條件處理

Switch模式匹配可根據不同條件執行不同操作。結合Map對象和RegExp，能實現復雜的模式匹配：

const actions = new Map([
    [/^vip/, handleVip],
    [/^user/, handleUser],
    [/^admin/, handleAdmin]
]);
const handleRequest = (type) => {
    const action = [...actions].find(([key]) => key.test(type));
    return action? action[1]() : handleDefault();
};

根據傳入的type，通過正則表達式匹配找到對應的處理函數，相比if else更靈活強大。

六、使用 Proxy 進行條件攔截：動態控制訪問

Proxy可用于攔截對象的訪問操作，實現條件判斷和控制。比如根據用戶類型提供不同服務：

const handler = {
    get: (target, property) => {
        return property in target? target[property] : target.default;
    }
};
const services = new Proxy({
    admin: () => 'Admin Service',
    user: () => 'User Service',
    default: () => 'Default Service'
}, handler);

當訪問services對象屬性時，Proxy會根據屬性是否存在進行處理，不存在則返回默認服務。

七、函數式編程方法：組合邏輯判斷

函數式編程通過函數組合實現復雜邏輯判斷。例如判斷用戶是否有權限訪問：

const isAdult = age => age >= 18;
const hasPermission = role => ['admin','superuser'].includes(role);
const canAccess = user => isAdult(user.age) && hasPermission(user.role);

將多個簡單判斷函數組合成復雜判斷邏輯，方便復用和維護。配合數組方法，可輕松篩選符合條件的用戶：

users.filter(canAccess).forEach(grantAccess);

八、狀態機模式：管理狀態轉換

在涉及狀態轉換的場景，狀態機模式能清晰管理狀態變化。例如文章發布狀態管理：

const stateMachine = {
    draft: {
        publish: 'published',
        delete: 'deleted'
    },
    published: {
        unpublish: 'draft',
        archive: 'archived'
    },
    archived: {
        restore: 'draft'
    }
};
const changeState = (currentState, action) => stateMachine[currentState]?.[action] || currentState;

根據當前狀態和執行動作，通過狀態機對象獲取新狀態，代碼結構清晰，易于擴展。

九、使用裝飾器處理條件：增強函數功能

裝飾器可在不修改原函數代碼的情況下，為函數添加額外功能。比如權限驗證：

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() {
        // 編輯文檔
    }
}

示例：

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() {
        console.log('正在編輯文檔...');
    }
}

// 創建 Document 實例
const doc = new Document();

// 情況 1: 用戶有編輯權限
doc.user = { hasPermission: true };
try {
    doc.edit();
} catch (error) {
    console.error(error.message);
}

// 情況 2: 用戶沒有編輯權限
doc.user = { hasPermission: false };
try {
    doc.edit();
} catch (error) {
    console.error(error.message);
}

優勢：分離業務邏輯與校驗邏輯，代碼更整潔，符合開閉原則。

總結

擺脫 if-else 的關鍵在于根據場景選擇合適的工具：

簡單分支：用對象映射、三元運算符或邏輯運算符；
多值匹配：用 Array.includes 或 Map；
復雜狀態 / 模式：用狀態機、Proxy 或正則匹配；
函數增強：用裝飾器或函數式組合。

合理運用這些技巧，能讓代碼更簡潔、易讀，同時降低維護成本。你還有哪些更優雅的條件處理方式？歡迎補充！

posted on 2025-04-25 16:24 xzqyun 閱讀(102) 評論(0) 收藏舉報

刷新頁面返回頂部

告別 if else：JavaScript 條件判斷的優雅之道

一、對象映射：以數據驅動邏輯

二、Array.includes：簡化多條件判斷

三、三元運算符鏈式使用：簡潔的分支判斷

四、巧用 && 和 || 運算符：精簡邏輯判斷