Web前端入门第 59 问：JavaScript 条件语句中善用 return 让代码更清晰

条件语句

JS 的条件语句不太多，就 if 和 switch 两个，不过他们的使用方式也可以算是眼花缭乱了。

if 语句

if 字面意思：如果 xxx。程序中的用法也是这样，如果条件为真，则执行执行代码块，反之则不执行。

语法：

if (条件) {
 // 条件为真时执行
} else if (其他条件) {
 // 前一个条件为假且当前条件为真时执行
} else if (其他条件) {
 // 前面所有条件为假且当前条件为真时执行
} else {
 // 所有条件均为假时执行
}

基础用法：

if (true) {
 console.log('条件为真执行代码块');
}
// 如果代码块中只有一个语句，可以省略花括号
if (true) console.log('条件为真执行代码块');

if & else 用法：

const age = 20;
if (age < 18) {
 console.log('未成年');
} else {
 console.log('成年人');
}
// 也可省略花括号
if (age < 18) console.log('未成年');
else console.log('成年人');

完整示例：

const age = 20;
if (age < 18) {
 console.log('未成年');
} else if (age >= 18 && age < 50) {
 console.log('成年人');
} else if (age >= 50 && age < 65) {
 console.log('中年人');
} else {
 console.log('老年人');
}

虽然 if 条件语句的语法上支持省略花括号，但在实际编码中，还是不太建议这么做，代码可读性降低，导致维护成本增加。

switch 语句

switch 语句和 if 语句很像，都用于条件判断，但 switch 语句中不支持条件表达式，case 后面只能是一个值或者运算表达式。

使用时特别注意 break 关键字，如果少了这个，您的代码会出大篓子。

使用 switch 语句：

const fruit = 'apple';
 
switch (fruit) {
 case 'apple':
 console.log('苹果');
 break;
 case 'banana':
 console.log('香蕉');
 break;
 case 'orange':
 console.log('橘子');
 break;
 default:
 console.log('其他水果');
 break;
}

以下代码错误写法，将始终都是 default 分支：

const age = 20;
switch (age) {
 case age < 18:
 console.log('未成年');
 break;
 case age >= 18 && age < 50:
 console.log('成年人');
 break;
 case age >= 50 && age < 65:
 console.log('中年人');
 break;
 default:
 console.log('老年人');
}

但可以这样用：

const fruit = 'apple';
const apple = 'apple';
switch (fruit) {
 case apple: // 可以使用变量
 console.log('苹果');
 if (true) { // case 中可以使用条件语句
 console.log('进入条件语句');
 }
 break;
 case 'ban' + 'ana': // 可以使用运算符
 console.log('香蕉');
 break;
 default:
 console.log('其他水果');
 break;
}

使用 switch 语句时，如果少了 break 关键字，就触发了神奇的 case 穿透 问题。看例子：

const fruit = 'apple';
 
switch (fruit) {
 case 'apple':
 console.log('苹果');
 // 没有 break，代码会走到下一个 case
 case 'banana':
 console.log('香蕉');
 // 依然没有 break，继续往下走
 case 'orange':
 console.log('橘子');
 // 仍然没有 break，继续
 default:
 console.log('其他水果');
 // switch 结束了
}

以上代码会同时输出：

苹果
香蕉
橘子
其他水果

if 优化

代码中免不了会出现很多 if 判断情况，如果代码组织能力太差，那就像捅了 if 窝一样~~

看一个在曾经项目中前辈写的代码：

if (score.length != 0) {
 if (score >= 0 && score <= 10) {
 if (res1.status === '1') {
 if (res2.status === '1') {}
 if (viewShow) {
 } else {}
 } else {}
 } else {}
} else {}

这样的代码看起来舒服吗？反正我不舒服，真的太丑了，一层层的嵌套，像是走到逻辑地狱一样！！

使用卫语句优化

善用 return 优化 if 语句，提前处理异常或简单条件，减少嵌套层级。

优化前的代码：

function checkOrder(order) {
 if (order.isValid) {
 if (order.items.length > 0) {
 if (order.total > 0) {
 // 核心逻辑
 return '1';
 } else {
 return '2';
 }
 } else {
 return '3';
 }
 } else {
 return '4';
 }
}

卫语句优化后：

function checkOrder(order) {
 if (!order.isValid) {
 return '4';
 }
 if (order.items.length === 0) {
 return '3';
 }
 if (order.total <= 0) {
 return '2';
 }
 
 return '1';
}

使用策略模式优化

策略模式 属于设计模式中的一种，通往超神路上，设计模式可以算是一道拦路虎，好的设计模式可以写出更优雅的代码。

在 JS 这个语言中，使用对象可以轻松的实现策略模式，优化不必要的 if 语句。

优化前的代码：

function getUserType(type) {
 if (type === 'A') {
 return '前端';
 } else if (type === 'B') {
 return '后端';
 } else if (type === 'C') {
 return '全干';
 } else {
 return '未知';
 }
}

优化后：

const userMap = {
 A: '前端',
 B: '后端',
 C: '全干',
 D: '未知',
};
function getUserType(type) {
 return userMap[type] ?? userMap.default;
}

使用面向对象设计中的多态

将不同条件分支封装到不同类中，善用对象的多态概念，可以优化一部分代码。

说实话，JS 的代码还是不太习惯面向对象风格，还是习惯函数式编程，但这种优化方式还是值得学习的。

优化前的代码：

// 重构前（if-else 判断角色权限）
function checkPermission(user) {
 if (user.role === 'admin') {
 return true; // 管理员有用所有操作权限
 } else if (user.role === 'editor') {
 return action === 'edit'; // 网站编辑只有编辑权限
 } else {
 return action === 'view'; // 访客只有查看权限
 }
}

优化后：

// 重构后（多态实现）
class Admin { // 管理员有用所有操作权限
 can(action) { return true; }
}
class Editor { // 网站编辑只有编辑权限
 can(action) { return action === 'edit'; }
}
class Guest { // 访客只有查看权限
 can(action) { return action === 'view'; }
}
function checkPermission(user, action) {
 return user.can(action);
}

使用链式判断

利用 ES6 现代语法简化嵌套属性访问和条件判断，ES6 的可选链操作符是真的可以省下很多代码量，再组合使用空值合并，代码逼格瞬间提升。

优化前的代码：

function getUserCity(user) {
 if (user && user.address && user.address.location) {
 return user.address.location.city;
 }
 return '未知';
}

优化后：

// 链式判断 + 空值合并
function getUserCity(user) {
 return user?.address?.location?.city ?? '未知';
}

善用单一职责

将复杂条件拆分为多个独立函数，每个函数只做一件事，代码不要写得太复杂，谁都能看懂的代码才是好代码！

优化前的代码：

// 不同的用户价格计算逻辑
function calcPrice(user, product) {
 if (user.isVIP) {
 if (product.stock > 0) {
 return product.price * 0.8; // VIP 用户打8折
 } else {
 throw new Error('缺货');
 }
 } else {
 if (product.stock > 0) {
 return product.price; // 非 VIP 用户原价
 } else {
 throw new Error('缺货');
 }
 }
}

优化后：

function isProductAvailable(product) { // 判断产品是否有库存
 if (product.stock <= 0) throw new Error('缺货');
}
function getVIPDiscount(user) {
 return user.isVIP ? 0.8 : 1; // 判断用户是否打折
}
function calcPrice(user, product) {
 isProductAvailable(product); // 先判断产品库存
 return product.price * getVIPDiscount(user); // 计算价格
}

写在最后

代码谁都能写，但写出来的代码好不好看，能不能维护，这就是考验技术的时候了。

总结几个编码原则，仅供参考：

1、单一职责：每个函数/模块只处理一个逻辑。
2、早返早拒：优先处理无效条件，减少嵌套。
3、数据结构化：用对象、Map 或类替代硬编码条件。
4、现代语法：善用 ?.、??、||、&& 等简化代码。