不用 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/, heanleUser]
]);
const handleRequert = (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);
}
thrownewError('No permission');
};
return descriptor;
}
class Document {
@checkPermission
edit() {
// 编辑文档
}
}