add: if else 的优雅写法
This commit is contained in:
qianguyihao
parent
26452883f4
commit
e7a406b75d
@ -1,6 +1,5 @@
|
||||
|
||||
|
||||
> 本文首发于[博客园](http://www.cnblogs.com/smyhvae/p/8310295.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
|
||||
## 代码块
|
||||
@ -186,29 +185,29 @@ if语句有以下三种。
|
||||
|
||||
```javascript
|
||||
//第一步，输入
|
||||
var bianhao = parseInt(prompt("您想加什么油？填写92或者97"));
|
||||
var sheng = parseFloat(prompt("您想加多少升？"));
|
||||
var bianhao = parseInt(prompt("您想加什么油？填写92或者97"));
|
||||
var sheng = parseFloat(prompt("您想加多少升？"));
|
||||
|
||||
//第二步，判断
|
||||
if (bianhao == 92) {
|
||||
//第二步，判断
|
||||
if (bianhao == 92) {
|
||||
//编号是92的时候做的事情
|
||||
if (sheng >= 20) {
|
||||
var price = sheng * 5.9;
|
||||
} else {
|
||||
var price = sheng * 6;
|
||||
}
|
||||
} else if (bianhao == 97) {
|
||||
} else if (bianhao == 97) {
|
||||
//编号是97的时候做的事情
|
||||
if (sheng >= 30) {
|
||||
var price = sheng * 6.95;
|
||||
} else {
|
||||
var price = sheng * 7;
|
||||
}
|
||||
} else {
|
||||
} else {
|
||||
alert("对不起，没有这个编号的汽油！");
|
||||
}
|
||||
}
|
||||
|
||||
alert("价格是" + price);
|
||||
alert("价格是" + price);
|
||||
```
|
||||
|
||||
|
||||
@ -218,7 +217,7 @@ switch语句也叫条件分支语句。
|
||||
|
||||
格式：
|
||||
|
||||
```
|
||||
```javascript
|
||||
switch(表达式) {
|
||||
case 值1：
|
||||
语句体1;
|
||||
@ -237,10 +236,11 @@ switch(表达式) {
|
||||
}
|
||||
```
|
||||
|
||||
注意， JS 是属于弱类型语言，这里面的`值1`、`值2`可以是 `'a'`、`6`、`true` 等任意数据类型。
|
||||
|
||||
### switch语句的执行流程
|
||||
|
||||
流程图如下：
|
||||
流程图如下：
|
||||
|
||||
|
||||
|
||||
@ -261,8 +261,7 @@ switch(表达式) {
|
||||
|
||||
### case穿透的问题
|
||||
|
||||
switch 语句中的`break`可以省略，但一般不建议。否则结果可能不是你想要的，会出现一个现象：**case穿透**。
|
||||
|
||||
switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case穿透**。
|
||||
|
||||
**举例1**：（case穿透的情况）
|
||||
|
||||
@ -343,6 +342,107 @@ switch 语句中的`break`可以省略，但一般不建议。否则结果可能
|
||||
|
||||
上方代码的解释：代码走到 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`）。
|
||||
|
||||
@ -11,15 +11,15 @@
|
||||
|
||||
## 预编译前奏
|
||||
|
||||
> 在讲预编译前，我们先来普及下面两句话。
|
||||
> 在讲预编译前，我们先来普及下面两个规律。
|
||||
|
||||
### 两个规律
|
||||
|
||||
**规律1、任何变量，如果未经声明就赋值，此变量是属于 window 的属性**。（注意，无论在哪个作用域内赋值）
|
||||
**规律1：任何变量，如果未经声明就赋值，此变量是属于 window 的属性**。（注意，无论在哪个作用域内赋值）
|
||||
|
||||
比如说，如果我们直接在代码里写 `console.log(a)`，这肯定会报错的，提示找不到 `a`。但如果我直接写 `a = 100`，这就不会报错，此时，这个 `a` 就是 `window.a`。
|
||||
|
||||
**规律2、一切声明的全局变量，全是window的属性**。（注意，我说的是在全局作用域内声明的变量，不是说局部变量）
|
||||
**规律2：一切声明的全局变量，全是window的属性**。（注意，我说的是在全局作用域内声明的变量，不是说局部变量）
|
||||
|
||||
比如说，当我定义 `var a = 200` 时，这此时这个 `a` 就是 `window.a`。
|
||||
|
||||
|
||||
@ -12,15 +12,24 @@
|
||||
|
||||
- 据说这个项目，是宝藏：<https://github.com/dexteryy/spellbook-of-modern-webdev>
|
||||
|
||||
|
||||
## TS
|
||||
|
||||
- TypeScript 教程：<https://github.com/xcatliu/typescript-tutorial>
|
||||
|
||||
## 数据结构和算法
|
||||
## 算法类
|
||||
|
||||
- 数据结构和算法：<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>
|
||||
@ -29,7 +38,6 @@
|
||||
|
||||
- 反向面试（反问面试官的问题）：<https://github.com/yifeikong/reverse-interview-zh>
|
||||
|
||||
|
||||
- 掘金前端面试题合集：<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md>
|
||||
|
||||
## 博客
|
||||
@ -46,3 +54,7 @@
|
||||
|
||||
- 中国程序员容易发音错误的单词：<https://github.com/shimohq/chinese-programmer-wrong-pronunciation>
|
||||
|
||||
## 学会提问
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user