不用 if else，实现 JavaScript 条件判断优雅处理的超实用方法

在前端开发过程中，如果采用传统的 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. && 和 || 运算符巧用

// 替代简单 if
user.isAdmin && showAdminPanel();
// 设置默认值
const name = user.name || 'unnamed';
// 空值合并运算符
const count = data?.users ?? [];

5. Switch 模式匹配

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

6. 使用 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);

7. 函数式编程方法

// 组合条件
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);

8. 状态机模式

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

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() {
        // 编辑文档
    }
}

以上关于不用 if else，实现 JavaScript 条件判断优雅处理的超实用方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。