add: if else 的优雅写法

This commit is contained in:
qianguyihao 2019-12-05 18:27:20 +08:00
parent 26452883f4
commit e7a406b75d
3 changed files with 142 additions and 30 deletions

View File

@ -1,6 +1,5 @@
> 本文首发于[博客园](http://www.cnblogs.com/smyhvae/p/8310295.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
## 代码块 ## 代码块
@ -218,7 +217,7 @@ switch语句也叫条件分支语句。
格式: 格式:
``` ```javascript
switch(表达式) { switch(表达式) {
case 值1 case 值1
语句体1; 语句体1;
@ -237,6 +236,7 @@ switch(表达式) {
} }
``` ```
注意, JS 是属于弱类型语言,这里面的`值1`、`值2`可以是 `'a'`、`6`、`true` 等任意数据类型。
### switch语句的执行流程 ### switch语句的执行流程
@ -261,8 +261,7 @@ switch(表达式) {
### case穿透的问题 ### case穿透的问题
switch 语句中的`break`可以省略,但一般不建议。否则结果可能不是你想要的,会出现一个现象:**case穿透**。 switch 语句中的`break`可以省略,但一般不建议(对于新手而言)。否则结果可能不是你想要的,会出现一个现象:**case穿透**。
**举例1**case穿透的情况 **举例1**case穿透的情况
@ -343,6 +342,107 @@ switch 语句中的`break`可以省略,但一般不建议。否则结果可能
上方代码的解释:代码走到 default 时,因为没有遇到 break所以会继续往下走直到遇见 break 或者走到程序的末尾。 从这个例子可以看出switch 语句的结束与 default 的顺序无关。 上方代码的解释:代码走到 default 时,因为没有遇到 break所以会继续往下走直到遇见 break 或者走到程序的末尾。 从这个例子可以看出switch 语句的结束与 default 的顺序无关。
### switch 语句的应用举例:替换 if 语句
我们实战开发中,经常需要根据接口的返回码 retCode ,来让前端做不同的展示。
这种场景是业务开发中经常出现的,请一定要掌握。然而,很多人估计会这么写:
**写法1**:(不推荐。这种写法太挫了)
```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
if (retCode == 0) {
alert('接口联调成功');
} else if (retCode == 101) {
alert('活动不存在');
} else if (retCode == 103) {
alert('活动未开始');
} else if (retCode == 104) {
alert('活动已结束');
} else if (retCode == 1001) {
alert('参数错误');
} else if (retCode == 1002) {
alert('接口频率限制');
} else if (retCode == 1003) {
alert('未登录');
} else if (retCode == 1004) {
alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
} else {
// 其他异常返回码
alert('系统君失联了,请稍候再试');
}
```
如果你是按照上面的 `if else`的方式来写各种条件判断,说明你的代码水平太初级了,会被人喷的,千万不要这么写。那要怎么改进呢?继续往下看。
**写法2**:(推荐。通过 return 的方式,将上面的写法进行改进)
```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
handleRetCode(retCode);
// 方法:根据接口不同的返回码,处理前端不同的显示状态
function handleRetCode(retCode) {
if (retCode == 0) {
alert('接口联调成功');
return;
}
if (retCode == 101) {
alert('活动不存在');
return;
}
if (retCode == 103) {
alert('活动未开始');
return;
}
if (retCode == 104) {
alert('活动已结束');
return;
}
if (retCode == 1001) {
alert('参数错误');
return;
}
if (retCode == 1002) {
alert('接口频率限制');
return;
}
if (retCode == 1003) {
alert('未登录');
return true;
}
if (retCode == 1004) {
alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
return true;
}
// 其他异常返回码
alert('系统君失联了,请稍候再试');
return;
}
```
上面的写法2是比较推荐的写法直接通过 return 的方式,让 function 里的代码不再继续往下走,这就达到目的了。对了,因为要用到 return ,所以需要单独封装到一个 function 里面。
如果你以后看到有前端小白采用的是**写法1**,请一定要把**写法2**传授给他:不需要那么多的 if else直接用 return 返回就行了。
### switch 的优雅写法
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。 想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。

View File

@ -11,15 +11,15 @@
## 预编译前奏 ## 预编译前奏
> 在讲预编译前,我们先来普及下面两句话 > 在讲预编译前,我们先来普及下面两个规律
### 两个规律 ### 两个规律
**规律1任何变量,如果未经声明就赋值,此变量是属于 window 的属性**。(注意,无论在哪个作用域内赋值) **规律1任何变量,如果未经声明就赋值,此变量是属于 window 的属性**。(注意,无论在哪个作用域内赋值)
比如说,如果我们直接在代码里写 `console.log(a)`,这肯定会报错的,提示找不到 `a`。但如果我直接写 `a = 100`,这就不会报错,此时,这个 `a` 就是 `window.a` 比如说,如果我们直接在代码里写 `console.log(a)`,这肯定会报错的,提示找不到 `a`。但如果我直接写 `a = 100`,这就不会报错,此时,这个 `a` 就是 `window.a`
**规律2一切声明的全局变量全是window的属性**。(注意,我说的是在全局作用域内声明的变量,不是说局部变量) **规律2一切声明的全局变量全是window的属性**。(注意,我说的是在全局作用域内声明的变量,不是说局部变量)
比如说,当我定义 `var a = 200` 时,这此时这个 `a` 就是 `window.a` 比如说,当我定义 `var a = 200` 时,这此时这个 `a` 就是 `window.a`

View File

@ -12,15 +12,24 @@
- 据说这个项目,是宝藏:<https://github.com/dexteryy/spellbook-of-modern-webdev> - 据说这个项目,是宝藏:<https://github.com/dexteryy/spellbook-of-modern-webdev>
## TS ## TS
- TypeScript 教程:<https://github.com/xcatliu/typescript-tutorial> - TypeScript 教程:<https://github.com/xcatliu/typescript-tutorial>
## 数据结构和算法 ## 算法
- 数据结构和算法:<https://github.com/trekhleb/javascript-algorithms> - 数据结构和算法:<https://github.com/trekhleb/javascript-algorithms>
- leetcode解题之路<https://github.com/azl397985856/leetcode>
- 五分钟学算法:<https://github.com/MisterBooo/LeetCodeAnimation>
- LeetCode 攻略 - 2019 年 8 月上半月汇总109 题攻略):<https://juejin.im/post/5d522f7cf265da03c926ede5>
- 极客时间 App 的《数据结构与算法之美》
## 前端教程类
## 其他 ## 其他
- 单元测试:<https://github.com/goldbergyoni/javascript-testing-best-practices> - 单元测试:<https://github.com/goldbergyoni/javascript-testing-best-practices>
@ -29,7 +38,6 @@
- 反向面试(反问面试官的问题):<https://github.com/yifeikong/reverse-interview-zh> - 反向面试(反问面试官的问题):<https://github.com/yifeikong/reverse-interview-zh>
- 掘金前端面试题合集:<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md> - 掘金前端面试题合集:<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md>
## 博客 ## 博客
@ -46,3 +54,7 @@
- 中国程序员容易发音错误的单词:<https://github.com/shimohq/chinese-programmer-wrong-pronunciation> - 中国程序员容易发音错误的单词:<https://github.com/shimohq/chinese-programmer-wrong-pronunciation>
## 学会提问