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

条件语句

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

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

1. if (条件) {
2.   // 条件为真时执行
3. } else if (其他条件) {
4.   // 前一个条件为假且当前条件为真时执行
5. } else if (其他条件) {
6.   // 前面所有条件为假且当前条件为真时执行
7. } else {
8.   // 所有条件均为假时执行
9. }

复制代码

基础用法：

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

复制代码

if & else 用法：

1. const age = 20;
2. if (age < 18) {
3.   console.log('未成年');
4. } else {
5.   console.log('成年人');
6. }
7. // 也可省略花括号
8. if (age < 18) console.log('未成年');
9. else console.log('成年人');

复制代码

完整示例：

1. const age = 20;
2. if (age < 18) {
3.   console.log('未成年');
4. } else if (age >= 18 && age < 50) {
5.   console.log('成年人');
6. } else if (age >= 50 && age < 65) {
7.   console.log('中年人');
8. } else {
9.   console.log('老年人');
10. }

复制代码

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

switch 语句和 if 语句很像，都用于条件判断，但 switch 语句中不支持条件表达式，case 后面只能是一个值或者运算表达式。
使用时特别注意 break 关键字，如果少了这个，您的代码会出大篓子。
使用 switch 语句：

1. const fruit = 'apple';
3. switch (fruit) {
4.   case 'apple':
5.     console.log('苹果');
6.     break;
7.   case 'banana':
8.     console.log('香蕉');
9.     break;
10.   case 'orange':
11.     console.log('橘子');
12.     break;
13.   default:
14.     console.log('其他水果');
15.     break;
16. }

复制代码

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

1. const age = 20;
2. switch (age) {
3.   case age < 18:
4.     console.log('未成年');
5.     break;
6.   case age >= 18 && age < 50:
7.     console.log('成年人');
8.     break;
9.   case age >= 50 && age < 65:
10.     console.log('中年人');
11.     break;
12.   default:
13.     console.log('老年人');
14. }

复制代码

但可以这样用：

1. const fruit = 'apple';
2. const apple = 'apple';
3. switch (fruit) {
4.   case apple: // 可以使用变量
5.     console.log('苹果');
6.     if (true) { // case 中可以使用条件语句
7.       console.log('进入条件语句');
8.     }
9.     break;
10.   case 'ban' + 'ana': // 可以使用运算符
11.     console.log('香蕉');
12.     break;
13.   default:
14.     console.log('其他水果');
15.     break;
16. }

复制代码

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

1. const fruit = 'apple';
3. switch (fruit) {
4.   case 'apple':
5.     console.log('苹果');
6.     // 没有 break，代码会走到下一个 case
7.   case 'banana':
8.     console.log('香蕉');
9.     // 依然没有 break，继续往下走
10.   case 'orange':
11.     console.log('橘子');
12.     // 仍然没有 break，继续
13.   default:
14.     console.log('其他水果');
15.     // switch 结束了
16. }

复制代码

以上代码会同时输出：

1. 苹果
2. 香蕉
3. 橘子
4. 其他水果

复制代码

if 优化

代码中免不了会出现很多 if 判断情况，如果代码组织能力太差，那就像捅了 if 窝一样~~
看一个在曾经项目中前辈写的代码：

1. if (score.length != 0) {
2.   if (score >= 0 && score <= 10) {
3.     if (res1.status === '1') {
4.       if (res2.status === '1') {}
5.       if (viewShow) {
6.       } else {}
7.     } else {}
8.   } else {}
9. } else {}

复制代码

卫语句优化后：

1. function checkOrder(order) {
2.   if (order.isValid) {
3.     if (order.items.length > 0) {
4.       if (order.total > 0) {
5.         // 核心逻辑
6.         return '1';
7.       } else {
8.         return '2';
9.       }
10.     } else {
11.       return '3';
12.     }
13.   } else {
14.     return '4';
15.   }
16. }

复制代码

优化后：
[code]function isProductAvailable(product) { // 判断产品是否有库存  if (product.stock

感谢，下载保存了

感谢分享

前排留名，哈哈哈

感谢分享，下载保存了，貌似很强大

感谢发布原创作品，程序园因你更精彩

新版吗？好像是停更了吧。

谢谢楼主提供！

用心讨论，共获提升！

感谢分享

用心讨论，共获提升！

谢谢分享，试用一下

感谢发布原创作品，程序园因你更精彩

前排留名，哈哈哈

谢谢楼主提供！

喜欢鼓捣这些软件，现在用得少，谢谢分享！

用心讨论，共获提升！

分享、互助 让互联网精神温暖你我

感谢分享，下载保存了，貌似很强大

过来提前占个楼