add: 通过 switch 替换 if else
This commit is contained in:
		
							parent
							
								
									e7a406b75d
								
							
						
					
					
						commit
						35249d7347
					
				@ -376,7 +376,6 @@ if (retCode == 0) {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
如果你是按照上面的 `if else`的方式来写各种条件判断,说明你的代码水平太初级了,会被人喷的,千万不要这么写。那要怎么改进呢?继续往下看。
 | 
					如果你是按照上面的 `if else`的方式来写各种条件判断,说明你的代码水平太初级了,会被人喷的,千万不要这么写。那要怎么改进呢?继续往下看。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**写法2**:(推荐。通过 return 的方式,将上面的写法进行改进)
 | 
					**写法2**:(推荐。通过 return 的方式,将上面的写法进行改进)
 | 
				
			||||||
@ -440,7 +439,128 @@ function handleRetCode(retCode) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
如果你以后看到有前端小白采用的是**写法1**,请一定要把**写法2**传授给他:不需要那么多的 if else,直接用 return 返回就行了。
 | 
					如果你以后看到有前端小白采用的是**写法1**,请一定要把**写法2**传授给他:不需要那么多的 if else,直接用 return 返回就行了。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### switch 的优雅写法
 | 
					**写法3**:(推荐。将 if else 改为 switch)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```javascript
 | 
				
			||||||
 | 
					let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					switch (retCode) {
 | 
				
			||||||
 | 
					    case 0:
 | 
				
			||||||
 | 
					        alert('接口联调成功');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					    case 101:
 | 
				
			||||||
 | 
					        alert('活动不存在');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 103:
 | 
				
			||||||
 | 
					        alert('活动未开始');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 104:
 | 
				
			||||||
 | 
					        alert('活动已结束');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 1001:
 | 
				
			||||||
 | 
					        alert('参数错误');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 1002:
 | 
				
			||||||
 | 
					        alert('接口频率限制');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 1003:
 | 
				
			||||||
 | 
					        alert('未登录');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 1004:
 | 
				
			||||||
 | 
					        alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    default:
 | 
				
			||||||
 | 
					        alert('系统君失联了,请稍候再试');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					在实战开发中,方式3是非常推荐的写法,甚至比方式2还要好。我们尽量不要写太多的 if 语句,避免代码过于臃肿。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### switch 的优雅写法:适时地去掉 break
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					我们先来看看下面这段代码:(不推荐)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```javascript
 | 
				
			||||||
 | 
					let day = 2;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					switch (day) {
 | 
				
			||||||
 | 
					    case 1:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					    case 2:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 3:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 4:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 5:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 6:
 | 
				
			||||||
 | 
					        console.log('relax');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 7:
 | 
				
			||||||
 | 
					        console.log('relax');
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    default:
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					上面的代码,咋一看,好像没啥毛病。但你有没有发现,重复代码太多了?
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					实战开发中,凡是有重复地方,我们都必须要想办法简化。写代码就是在不断重构的过程。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					上面的代码,可以改进如下:(推荐,非常优雅)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```javascript
 | 
				
			||||||
 | 
					let day = 2;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					switch (day) {
 | 
				
			||||||
 | 
					    case 1:
 | 
				
			||||||
 | 
					    case 2:
 | 
				
			||||||
 | 
					    case 3:
 | 
				
			||||||
 | 
					    case 4:
 | 
				
			||||||
 | 
					    case 5:
 | 
				
			||||||
 | 
					        console.log('work');
 | 
				
			||||||
 | 
					        break; // 在这里放一个 break
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    case 6:
 | 
				
			||||||
 | 
					    case 7:
 | 
				
			||||||
 | 
					        console.log('relax');
 | 
				
			||||||
 | 
					        break; // 在这里放一个 break
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    default:
 | 
				
			||||||
 | 
					        break;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					你没看错,就是上面的这种写法,能达到同样的效果,非常优雅。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					小白可能认为这样的写法可读性不强,所以说他是小白。我可以明确告诉你,改进后的这种写法,才是最优雅的、最简洁、可读性最好的。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## 我的公众号
 | 
					## 我的公众号
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user