update: switch 语句

This commit is contained in:
qianguyihao 2020-06-06 20:53:28 +08:00
parent 8709362803
commit 956b6850ad
2 changed files with 332 additions and 368 deletions

View File

@ -1,24 +1,17 @@
## 代码块
`{}`包围起来的代码就是代码块
JS中的代码块只具有**分组**的作用没有其他的用途
代码块中的内容在外部是完全可见的举例
ES5 语法中代码块只具有**分组**的作用没有其他的用途代码块中的内容在外部是完全可见的举例
```javascript
{
var a = 2;
alert("qianguyihao");
console.log("永不止步");
alert('qianguyihao');
console.log('永不止步');
}
console.log("a = " + a);
console.log('a = ' + a);
```
打印结果可以看出虽然变量 a 是定义在代码块中的但是在外部依然可以访问
@ -28,7 +21,6 @@ console.log("a = " + a);
a = 2
```
## 流程控制语句
在一个程序执行的过程中各条语句的执行顺序对程序的结果是有直接影响的所以我们必须清楚每条语句的执行流程而且很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能
@ -41,7 +33,6 @@ a = 2
- 循环结构while 语句for 语句
## 顺序结构
按照代码的先后顺序依次执行结构图如下
@ -61,14 +52,11 @@ if语句有以下三种。
```javascript
if (条件表达式) {
// 条件为真时,做的事情
}
```
### 2条件分支语句
格式 1
```javascript
@ -81,7 +69,6 @@ if (条件表达式) {
}
```
格式 2多分支的 if 语句
```javascript
@ -127,21 +114,21 @@ BMI =体重÷身高的平方
```javascript
//第一步,输入身高和体重
var height = parseFloat(prompt("请输入身高,单位是米"));
var weight = parseFloat(prompt("请输入体重,单位是公斤"));
var height = parseFloat(prompt('请输入身高,单位是米'));
var weight = parseFloat(prompt('请输入体重,单位是公斤'));
//第二步计算BMI指数
var BMI = weight / Math.pow(height, 2);
//第三步if语句来判断。注意跳楼现象
if (BMI < 18.5) {
alert("偏瘦");
alert('偏瘦');
} else if (BMI < 25) {
alert("正常");
alert('正常');
} else if (BMI < 28) {
alert("过重");
alert('过重');
} else if (BMI <= 32) {
alert("肥胖");
alert('肥胖');
} else {
alert("非常肥胖");
alert('非常肥胖');
}
```
@ -149,21 +136,21 @@ if (BMI < 18.5) {
```javascript
//第一步,输入身高和体重
var height = parseFloat(prompt("请输入身高,单位是米"));
var weight = parseFloat(prompt("请输入体重,单位是公斤"));
var height = parseFloat(prompt('请输入身高,单位是米'));
var weight = parseFloat(prompt('请输入体重,单位是公斤'));
//第二步计算BMI指数
var BMI = weight / Math.pow(height, 2);
//第三步if语句来判断。注意跳楼现象
if (BMI > 32) {
alert("非常肥胖");
alert('非常肥胖');
} else if (BMI >= 28) {
alert("肥胖");
alert('肥胖');
} else if (BMI >= 25) {
alert("过重");
alert('过重');
} else if (BMI >= 18.5) {
alert("正常")
alert('正常');
} else {
alert("偏瘦");
alert('偏瘦');
}
```
@ -180,13 +167,12 @@ if (BMI > 32) {
![](http://img.smyhvae.com/20180117_2232.png)
代码实现如下
```javascript
//第一步,输入
var bianhao = parseInt(prompt("您想加什么油填写92或者97"));
var sheng = parseFloat(prompt("您想加多少升?"));
var bianhao = parseInt(prompt('您想加什么油填写92或者97'));
var sheng = parseFloat(prompt('您想加多少升?'));
//第二步,判断
if (bianhao == 92) {
@ -204,18 +190,17 @@ if (bianhao == 92) {
var price = sheng * 7;
}
} else {
alert("不好意思,没有这个编号的汽油!");
alert('不好意思,没有这个编号的汽油!');
}
alert("价格是" + price);
alert('价格是' + price);
```
## switch 语句条件分支语句
switch 语句也叫条件分支语句
格式
### 语法格式
```javascript
switch(表达式) {
@ -236,15 +221,7 @@ switch(表达式) {
}
```
**注意**
- switch 可以理解为开关转换 case 可以理解为案例选项
- switch 后面的**括号里**可以是**表达式**或者**** 通常是一个**变量**通常做法是先把表达式或者值存放到变量中
- JS 是属于弱类型语言case 后面的`值1``值2`可以是 `'a'``6``true` 等任意数据类型的值也可以是表达式
**解释**switch 可以理解为开关转换 case 可以理解为案例选项
### switch 语句的执行流程
@ -258,6 +235,58 @@ switch(表达式) {
2然后如果所有的 case 都和表达式的值不匹配就会执行 default 语句体部分
### switch case 后面的值含代码举例
switch 后面的**括号里**可以是**表达式**或者**** 通常是一个**变量**通常做法是先把表达式或者值存放到变量中
JS 是属于弱类型语言case 后面的`值1``值2`可以是 `'a'``6``true` 等任意数据类型的值也可以是**表达式**注意在这里**字符串`'6'` 数字 `6` 是不一样的**
举例1
```js
let msg = 'notice';
switch (msg) {
case 'notice':
console.log('提示');
break;
case 'warning':
console.log('警告');
break;
case 'error':
console.log('错误');
break;
default:
console.log('默认文案');
break;
}
```
举例2case 后面的是表达式
```js
let age = 28;
switch (true) {
case age < 18:
console.log('未成年人');
break;
case age >= 18 && age <= 65:
console.log('还能干活儿');
break;
case age > 65:
console.log('该退休了');
break;
default:
console.log('默认文案');
break;
}
```
代码解释由于 switch 里的值是 true所以在众多的 case 语句中会去匹配第一个符合 `case true`的语句然后命中这条语句
### switch 语句的结束条件非常重要
@ -267,10 +296,12 @@ switch(表达式) {
我们来看下面的两个例子就明白了
### case穿透的问题
### case 穿透
switch 语句中的`break`可以省略但一般不建议对于新手而言否则结果可能不是你想要的会出现一个现象**case 穿透**
当然如果你能利用好 case 穿透会让代码些得十分优雅
**举例 1**case 穿透的情况
```javascript
@ -279,31 +310,30 @@ switch 语句中的`break`可以省略,但一般不建议(对于新手而言
//switch判断语句
switch (num) {
case 1:
console.log("星期一");
console.log('星期一');
break;
case 2:
console.log("星期二");
console.log('星期二');
break;
case 3:
console.log("星期三");
console.log('星期三');
break;
case 4:
console.log("星期四");
console.log('星期四');
//break;
case 5:
console.log("星期五");
console.log('星期五');
//break;
case 6:
console.log("星期六");
console.log('星期六');
break;
case 7:
console.log("星期日");
console.log('星期日');
break;
default:
console.log("你输入的数据有误");
console.log('你输入的数据有误');
break;
}
```
上方代码的运行结果可能会令你感到意外
@ -314,7 +344,6 @@ switch 语句中的`break`可以省略,但一般不建议(对于新手而言
星期六
```
上方代码的解释因为在 case 4 case 5 中都没有 break那语句走到 case 6 break 才会停止
**举例 2**
@ -325,19 +354,18 @@ switch 语句中的`break`可以省略,但一般不建议(对于新手而言
switch (number) {
default:
console.log("我是defaul语句");
console.log('我是defaul语句');
// break;
case (2):
console.log("第二个呵呵:" + number);
case 2:
console.log('第二个呵呵:' + number);
//break;
case (3):
console.log("第三个呵呵:" + number);
case 3:
console.log('第三个呵呵:' + number);
break;
case (4):
console.log("第四个呵呵:" + number);
case 4:
console.log('第四个呵呵:' + number);
break;
}
```
上方代码的运行结果你也许会意外
@ -350,14 +378,13 @@ switch 语句中的`break`可以省略,但一般不建议(对于新手而言
上方代码的解释代码走到 default 因为没有遇到 break所以会继续往下走直到遇见 break 或者走到程序的末尾 从这个例子可以看出switch 语句的结束与 default 的顺序无关
### switch 语句的实战举例替换 if 语句
## switch 语句的实战举例替换 if 语句
我们实战开发中经常需要根据接口的返回码 retCode 来让前端做不同的展示
这种场景是业务开发中经常出现的请一定要掌握然而很多人估计会这么写
**写法1**不推荐这种写法太挫了
### 写法 1不推荐这种写法太挫了
```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
@ -384,12 +411,13 @@ if (retCode == 0) {
}
```
如果你是按照上面的 `if else`的方式来写各种条件判断说明你的代码水平太初级了会被人喷的千万不要这么写那要怎么改进呢继续往下看
如果你是按照上面的 `if else`的方式来写各种条件判断说明你的代码水平太初级了会被人喷的千万不要这么写这种写法容易导致**嵌套太深可读性很差**
**写法2**推荐通过 return 的方式将上面的写法进行改进
那要怎么改进呢继续往下看
### 写法 2推荐通过 return 的方式将上面的写法进行改进
```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
handleRetCode(retCode);
@ -439,15 +467,13 @@ function handleRetCode(retCode) {
alert('系统君失联了,请稍候再试');
return;
}
```
上面的写法 2是比较推荐的写法直接通过 return 的方式 function 里的代码不再继续往下走这就达到目的了对了因为要用到 return 所以需要单独封装到一个 function 里面
如果你以后看到有前端小白采用的是**写法 1**请一定要把**写法 2**传授给他不需要那么多的 if else直接用 return 返回就行了
**写法3**推荐 if else 改为 switch
### 写法 3推荐 if else 改为 switch
```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
@ -491,10 +517,8 @@ switch (retCode) {
}
```
在实战开发中方式 3 是非常推荐的写法甚至比方式 2 还要好我们尽量不要写太多的 if 语句避免代码嵌套过深
### switch 语句的优雅写法适时地去掉 break
我们先来看看下面这段代码不推荐
@ -536,7 +560,6 @@ switch (day) {
}
```
上面的代码咋一看好像没啥毛病但你有没有发现重复代码太多了
实战开发中凡是有重复的地方我们都必须要想办法简化写代码就是在不断重构的过程
@ -566,19 +589,14 @@ switch (day) {
}
```
你没看错就是上面的这种写法能达到同样的效果非常优雅
小白可能认为这样的写法可读性不强所以说他是小白我可以明确告诉你改进后的这种写法才是最优雅的最简洁可读性最好的
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>****id`qianguyihao`
想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20200101.png)

View File

@ -1,6 +1,3 @@
## 前言
循环语句通过循环语句可以反复的执行一段代码多次
@ -29,8 +26,6 @@ for(①初始化表达式; ②条件表达式; ④更新表达式){
④执行更新表达式更新表达式执行完毕继续重复②
```
for 循环举例
```javascript
@ -45,12 +40,10 @@ for (var i = 1; i <= 100; i++) {
### for 循环举例
```javascript
for (var i = 1; i < 13; i = i + 4) {
console.log(i);
}
```
上方代码的遍历步骤
@ -87,9 +80,7 @@ for (var i = 1; i < 10; i = i + 3) {
**题目 2**
```javascript
for (var i = 1; i <= 10; i++) {
}
for (var i = 1; i <= 10; i++) {}
console.log(i);
```
@ -98,9 +89,7 @@ console.log(i);
**题目 3**
```javascript
for(var i = 1; i < 7; i = i + 3){
}
for (var i = 1; i < 7; i = i + 3) {}
console.log(i);
```
@ -140,10 +129,8 @@ while语句在执行时先对条件表达式进行求值判断
如果值为false则终止循环
```
**如果有必要的话我们可以使用 break 来终止循环**
### do...while 循环
语法
@ -166,7 +153,6 @@ do...while语句在执行时会先执行循环体
```
### while 循环和 do...while 循环的区别
这两个语句的功能类似不同的是
@ -177,7 +163,6 @@ do...while语句在执行时会先执行循环体
### while 循环举例
**题目**假如投资的年利率为 5%试求从 1000 块增长到 5000 需要花费多少年
**代码实现**
@ -185,11 +170,10 @@ do...while语句在执行时会先执行循环体
```html
<!DOCTYPE html>
<html lang="">
<head>
<meta>
<meta>
<meta>
<meta />
<meta />
<meta />
<title>Document</title>
</head>
@ -217,17 +201,12 @@ do...while语句在执行时会先执行循环体
}
console.log(money);
console.log("一共需要" + count + "年");
console.log('一共需要' + count + '年');
</script>
</body>
</html>
```
打印结果
```
@ -236,7 +215,6 @@ do...while语句在执行时会先执行循环体
一共需要33年
```
另外你也可以自己算一下假如投资的年利率为 5% 1000 块增长到 1 万块需要花费 48
```
@ -244,7 +222,6 @@ do...while语句在执行时会先执行循环体
一共需要48年
```
## break continue
> 这个知识点非常重要
@ -257,7 +234,6 @@ do...while语句在执行时会先执行循环体
- 可以为循环语句创建一个 label来标识当前的循环格式label:循环语句使用 break 语句时可以在 break 后跟着一个 label这样 break 将会结束指定的循环而不是最近的
**举例 1**通过 break 终止循环语句
```javascript
@ -267,7 +243,6 @@ for (var i = 0; i < 5; i++) {
break; // 注意,虽然在 if 里 使用了 break但这里的 break 是服务于外面的 for 循环。
}
}
```
打印结果
@ -278,36 +253,32 @@ i的值:1
i的值:2
```
**举例 2**label 的使用
```javascript
outer:
for (var i = 0; i < 5; i++) {
console.log("外层循环 i 的值:" + i)
outer: for (var i = 0; i < 5; i++) {
console.log('外层循环 i 的值:' + i);
for (var j = 0; j < 5; j++) {
break outer; // 直接跳出outer所在的外层循环这个outer是我自定义的label
console.log("内层循环 j 的值:" + j);
console.log('内层循环 j 的值:' + j);
}
}
```
打印结果
```
外层循环 i 的值0
```
### continue
- continue 可以用来跳过**当次**循环继续下一次循环
- 同样continue 默认只会离他**最近**的循环起作用
- 同样如果需要跳过指定的当次循环可以使用 label 标签
举例
```javascript
@ -333,7 +304,6 @@ i的值:7
i的值:9
```
## 各种练习
### 练习一质数相关
@ -345,22 +315,20 @@ i的值:9
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
/*
质数只能被1和它自身整除的数1不是质数也不是合数质数必须是大于1的自然数
*/
var num = prompt("请输入一个大于1的整数:");
var num = prompt('请输入一个大于1的整数:');
//判断这个值是否合法
if (num <= 1) {
alert("该值不合法!");
alert('该值不合法!');
} else {
//先用flag标志位来保存当前的数的状态
//默认当前num是质数
var flag = true;
@ -380,20 +348,16 @@ i的值:9
//如果num是质数则输出
if (flag) {
alert(num + "是质数!!!");
alert(num + '是质数!!!');
} else {
alert("这个不是质数")
alert('这个不是质数');
}
}
</script>
</head>
<body>
</body>
<body></body>
</html>
```
### 练习二质数相关
@ -405,26 +369,22 @@ i的值:9
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
/*
* 打印出1-100之间所有的质数
*/
//打印2-100之间所有的数
for (var i = 2; i <= 100; i++) {
//创建一个布尔值用来保存结果默认i是质数
var flag = true;
//判断i是否是质数
//获取到2-i之间的所有的数
for (var j = 2; j < i; j++) {
//判断i是否能被j整除
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
@ -436,17 +396,12 @@ i的值:9
if (flag) {
console.log(i);
}
}
</script>
</head>
<body>
</body>
<body></body>
</html>
```
打印结果
@ -460,9 +415,8 @@ i的值:9
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
body {
@ -475,7 +429,6 @@ i的值:9
}
</style>
<script type="text/javascript">
/*
* 1.打印99乘法表
* 1*1=1
@ -491,18 +444,16 @@ i的值:9
for (var i = 1; i <= 9; i++) {
//创建一个内层循环来控制图形的宽度
for (var j = 1; j <= i; j++) {
document.write("<span>" + j + "*" + i + "=" + i * j + "</span>");
document.write('<span>' + j + '*' + i + '=' + i * j + '</span>');
}
//输出一个换行
document.write("<br />");
document.write('<br />');
}
</script>
</head>
<body>
</body>
<body></body>
</html>
```
@ -510,7 +461,6 @@ i的值:9
![](http://img.smyhvae.com/20181229_1410.png)
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>****id`qianguyihao`
@ -518,7 +468,3 @@ i的值:9
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外
![](http://img.smyhvae.com/2016040102.jpg)