webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: switch 语句

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

324
04-JavaScript基础/08-流程控制语句：选择结构（if和switch）.md
View File

@ -1,24 +1,17 @@
## 代码块 ## 代码块
用`{}`包围起来的代码，就是代码块。 用`{}`包围起来的代码，就是代码块。
在 ES5 语法中，代码块，只具有**分组**的作用，没有其他的用途。代码块中的内容，在外部是完全可见的。举例：
JS中的代码块，只具有**分组**的作用，没有其他的用途。
代码块中的内容，在外部是完全可见的。举例：
```javascript ```javascript
{ {
var a = 2; var a = 2;
alert("qianguyihao"); alert('qianguyihao');
console.log("永不止步"); console.log('永不止步');
} }
console.log("a = " + a); console.log('a = ' + a);
``` ```
打印结果：（可以看出，虽然变量 a 是定义在代码块中的，但是在外部依然可以访问） 打印结果：（可以看出，虽然变量 a 是定义在代码块中的，但是在外部依然可以访问）
@ -28,7 +21,6 @@ console.log("a = " + a);
a = 2 a = 2
``` ```
## 流程控制语句 ## 流程控制语句
在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。 在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。
@ -37,10 +29,9 @@ a = 2
- 顺序结构 - 顺序结构
- 选择结构：if语句、switch语句 - 选择结构：if 语句、switch 语句
- 循环结构：while语句、for语句
- 循环结构：while 语句、for 语句
## 顺序结构 ## 顺序结构
@ -48,9 +39,9 @@ a = 2
![](http://img.smyhvae.com/20181227_1200.png) ![](http://img.smyhvae.com/20181227_1200.png)
## if语句 ## if 语句
if语句有以下三种。 if 语句有以下三种。
### 1、条件判断语句 ### 1、条件判断语句
@ -61,15 +52,12 @@ if语句有以下三种。
```javascript ```javascript
if (条件表达式) { if (条件表达式) {
// 条件为真时，做的事情 // 条件为真时，做的事情
} }
``` ```
### 2、条件分支语句 ### 2、条件分支语句
格式 1：
格式1：
```javascript ```javascript
if (条件表达式) { if (条件表达式) {
@ -81,8 +69,7 @@ if (条件表达式) {
} }
``` ```
格式 2：（多分支的 if 语句）
格式2：（多分支的if语句）
```javascript ```javascript
if (条件表达式1) { if (条件表达式1) {
@ -123,53 +110,53 @@ BMI =体重÷身高的平方
**答案**： **答案**：
写法1： 写法 1：
```javascript ```javascript
//第一步，输入身高和体重 //第一步，输入身高和体重
var height = parseFloat(prompt("请输入身高，单位是米")); var height = parseFloat(prompt('请输入身高，单位是米'));
var weight = parseFloat(prompt("请输入体重，单位是公斤")); var weight = parseFloat(prompt('请输入体重，单位是公斤'));
//第二步，计算BMI指数 //第二步，计算BMI指数
var BMI = weight / Math.pow(height, 2); var BMI = weight / Math.pow(height, 2);
//第三步，if语句来判断。注意跳楼现象 //第三步，if语句来判断。注意跳楼现象
if (BMI < 18.5) { if (BMI < 18.5) {
alert("偏瘦"); alert('偏瘦');
} else if (BMI < 25) { } else if (BMI < 25) {
alert("正常"); alert('正常');
} else if (BMI < 28) { } else if (BMI < 28) {
alert("过重"); alert('过重');
} else if (BMI <= 32) { } else if (BMI <= 32) {
alert("肥胖"); alert('肥胖');
} else { } else {
alert("非常肥胖"); alert('非常肥胖');
} }
``` ```
写法2： 写法 2：
```javascript ```javascript
//第一步，输入身高和体重 //第一步，输入身高和体重
var height = parseFloat(prompt("请输入身高，单位是米")); var height = parseFloat(prompt('请输入身高，单位是米'));
var weight = parseFloat(prompt("请输入体重，单位是公斤")); var weight = parseFloat(prompt('请输入体重，单位是公斤'));
//第二步，计算BMI指数 //第二步，计算BMI指数
var BMI = weight / Math.pow(height, 2); var BMI = weight / Math.pow(height, 2);
//第三步，if语句来判断。注意跳楼现象 //第三步，if语句来判断。注意跳楼现象
if (BMI > 32) { if (BMI > 32) {
alert("非常肥胖"); alert('非常肥胖');
} else if (BMI >= 28) { } else if (BMI >= 28) {
alert("肥胖"); alert('肥胖');
} else if (BMI >= 25) { } else if (BMI >= 25) {
alert("过重"); alert('过重');
} else if (BMI >= 18.5) { } else if (BMI >= 18.5) {
alert("正常") alert('正常');
} else { } else {
alert("偏瘦"); alert('偏瘦');
} }
``` ```
### if语句的嵌套 ### if 语句的嵌套
我们通过下面这个例子来引出if语句的嵌套。 我们通过下面这个例子来引出 if 语句的嵌套。
``` ```
一个加油站为了鼓励车主多加油，所以加的多有优惠。 一个加油站为了鼓励车主多加油，所以加的多有优惠。
@ -180,42 +167,40 @@ if (BMI > 32) {
![](http://img.smyhvae.com/20180117_2232.png) ![](http://img.smyhvae.com/20180117_2232.png)
代码实现如下： 代码实现如下：
```javascript ```javascript
//第一步，输入 //第一步，输入
var bianhao = parseInt(prompt("您想加什么油？填写92或者97")); var bianhao = parseInt(prompt('您想加什么油？填写92或者97'));
var sheng = parseFloat(prompt("您想加多少升？")); var sheng = parseFloat(prompt('您想加多少升？'));
//第二步，判断 //第二步，判断
if (bianhao == 92) { if (bianhao == 92) {
//编号是92的时候做的事情 //编号是92的时候做的事情
if (sheng >= 20) { if (sheng >= 20) {
var price = sheng * 5.9; var price = sheng * 5.9;
} else { } else {
var price = sheng * 6; var price = sheng * 6;
} }
} else if (bianhao == 97) { } else if (bianhao == 97) {
//编号是97的时候做的事情 //编号是97的时候做的事情
if (sheng >= 30) { if (sheng >= 30) {
var price = sheng * 6.95; var price = sheng * 6.95;
} else { } else {
var price = sheng * 7; var price = sheng * 7;
} }
} else { } else {
alert("不好意思，没有这个编号的汽油！"); alert('不好意思，没有这个编号的汽油！');
} }
alert("价格是" + price); alert('价格是' + price);
``` ```
## switch 语句（条件分支语句）
## switch语句（条件分支语句） switch 语句也叫条件分支语句。
switch语句也叫条件分支语句。 ### 语法格式
格式：
```javascript ```javascript
switch(表达式) { switch(表达式) {
@ -236,17 +221,9 @@ switch(表达式) {
} }
``` ```
**解释**：switch 可以理解为“开关、转换” 。case 可以理解为“案例、选项”。
**注意**： ### switch 语句的执行流程
- switch 可以理解为“开关、转换” 。case 可以理解为“案例、选项”。
- switch 后面的**括号里**可以是**表达式**或者**值**， 通常是一个**变量**（通常做法是：先把表达式或者值存放到变量中）。
- JS 是属于弱类型语言，case 后面的`值1`、`值2`可以是 `'a'`、`6`、`true` 等任意数据类型的值，也可以是表达式。
### switch语句的执行流程
流程图如下： 流程图如下：
@ -254,56 +231,109 @@ switch(表达式) {
执行流程如下： 执行流程如下：
（1）首先，计算出表达式的值，和case依次比较，一旦有对应的值，就会执行相应的语句，在执行的过程中，遇到break就会结束。 （1）首先，计算出表达式的值，和 case 依次比较，一旦有对应的值，就会执行相应的语句，在执行的过程中，遇到 break 就会结束。
（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;
}
```
举例2：（case 后面的是表达式）
```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`的语句，然后命中这条语句。
（2）然后，如果所有的case都和表达式的值不匹配，就会执行default语句体部分。
### switch 语句的结束条件【非常重要】 ### switch 语句的结束条件【非常重要】
- 情况a：遇到break就结束，而不是遇到default就结束。（因为break在此处的作用就是退出switch语句） - 情况 a：遇到 break 就结束，而不是遇到 default 就结束。（因为 break 在此处的作用就是退出 switch 语句）
- 情况b：执行到程序的末尾就结束。 - 情况 b：执行到程序的末尾就结束。
我们来看下面的两个例子就明白了。 我们来看下面的两个例子就明白了。
### case穿透的问题 ### case 穿透
switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case穿透**。 switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case 穿透**。
**举例1**：（case穿透的情况） 当然，如果你能利用好 case 穿透，会让代码些得十分优雅。
**举例 1**：（case 穿透的情况）
```javascript ```javascript
var num = 4; var num = 4;
//switch判断语句
switch (num) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
//break;
case 5:
console.log("星期五");
//break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("你输入的数据有误");
break;
}
//switch判断语句
switch (num) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
//break;
case 5:
console.log('星期五');
//break;
case 6:
console.log('星期六');
break;
case 7:
console.log('星期日');
break;
default:
console.log('你输入的数据有误');
break;
}
``` ```
上方代码的运行结果，可能会令你感到意外： 上方代码的运行结果，可能会令你感到意外：
@ -314,30 +344,28 @@ switch 语句中的`break`可以省略，但一般不建议（对于新手而言
星期六 星期六
``` ```
上方代码的解释：因为在 case 4 和 case 5 中都没有 break，那语句走到 case 6 的 break 才会停止。
上方代码的解释：因为在case 4和case 5中都没有break，那语句走到case 6的break才会停止。 **举例 2**：
**举例2**：
```javascript ```javascript
//switch判断语句 //switch判断语句
var number = 5; var number = 5;
switch (number) {
default:
console.log("我是defaul语句");
// break;
case (2):
console.log("第二个呵呵:" + number);
//break;
case (3):
console.log("第三个呵呵:" + number);
break;
case (4):
console.log("第四个呵呵:" + number);
break;
}
switch (number) {
default:
console.log('我是defaul语句');
// break;
case 2:
console.log('第二个呵呵:' + number);
//break;
case 3:
console.log('第三个呵呵:' + number);
break;
case 4:
console.log('第四个呵呵:' + number);
break;
}
``` ```
上方代码的运行结果，你也许会意外： 上方代码的运行结果，你也许会意外：
@ -350,14 +378,13 @@ switch 语句中的`break`可以省略，但一般不建议（对于新手而言
上方代码的解释：代码走到 default 时，因为没有遇到 break，所以会继续往下走，直到遇见 break 或者走到程序的末尾。 从这个例子可以看出：switch 语句的结束与 default 的顺序无关。 上方代码的解释：代码走到 default 时，因为没有遇到 break，所以会继续往下走，直到遇见 break 或者走到程序的末尾。 从这个例子可以看出：switch 语句的结束与 default 的顺序无关。
## switch 语句的实战举例：替换 if 语句
### switch 语句的实战举例：替换 if 语句
我们实战开发中，经常需要根据接口的返回码 retCode ，来让前端做不同的展示。 我们实战开发中，经常需要根据接口的返回码 retCode ，来让前端做不同的展示。
这种场景是业务开发中经常出现的，请一定要掌握。然而，很多人估计会这么写： 这种场景是业务开发中经常出现的，请一定要掌握。然而，很多人估计会这么写：
**写法1**：（不推荐。这种写法太挫了） ### 写法 1（不推荐。这种写法太挫了）
```javascript ```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况 let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
@ -379,17 +406,18 @@ if (retCode == 0) {
} else if (retCode == 1004) { } else if (retCode == 1004) {
alert('（风控用户）提示 活动太火爆啦~军万马都在挤，请稍后再试'); alert('（风控用户）提示 活动太火爆啦~军万马都在挤，请稍后再试');
} else { } else {
// 其他异常返回码 // 其他异常返回码
alert('系统君失联了，请稍候再试'); alert('系统君失联了，请稍候再试');
} }
``` ```
如果你是按照上面的 `if else`的方式来写各种条件判断，说明你的代码水平太初级了，会被人喷的，千万不要这么写。那要怎么改进呢？继续往下看。 如果你是按照上面的 `if else`的方式来写各种条件判断，说明你的代码水平太初级了，会被人喷的，千万不要这么写。这种写法，容易导致**嵌套太深，可读性很差**。
**写法2**：（推荐。通过 return 的方式，将上面的写法进行改进） 那要怎么改进呢？继续往下看。
### 写法 2（推荐。通过 return 的方式，将上面的写法进行改进）
```javascript ```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况 let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
handleRetCode(retCode); handleRetCode(retCode);
@ -439,15 +467,13 @@ function handleRetCode(retCode) {
alert('系统君失联了，请稍候再试'); alert('系统君失联了，请稍候再试');
return; return;
} }
``` ```
上面的写法 2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以需要单独封装到一个 function 里面。
上面的写法2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以需要单独封装到一个 function 里面。 如果你以后看到有前端小白采用的是**写法 1**，请一定要把**写法 2**传授给他：不需要那么多的 if else，直接用 return 返回就行了。
如果你以后看到有前端小白采用的是**写法1**，请一定要把**写法2**传授给他：不需要那么多的 if else，直接用 return 返回就行了。 ### 写法 3（推荐。将 if else 改为 switch）
**写法3**：（推荐。将 if else 改为 switch）
```javascript ```javascript
let retCode = 1003; // 返回码 retCode 的值可能有很多种情况 let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
@ -484,16 +510,14 @@ switch (retCode) {
alert('（风控用户）提示 活动太火爆啦~军万马都在挤，请稍后再试'); alert('（风控用户）提示 活动太火爆啦~军万马都在挤，请稍后再试');
break; break;
// 其他异常返回码 // 其他异常返回码
default: default:
alert('系统君失联了，请稍候再试'); alert('系统君失联了，请稍候再试');
break; break;
} }
``` ```
在实战开发中，方式 3 是非常推荐的写法，甚至比方式 2 还要好。我们尽量不要写太多的 if 语句，避免代码嵌套过深。
在实战开发中，方式3是非常推荐的写法，甚至比方式2还要好。我们尽量不要写太多的 if 语句，避免代码嵌套过深。
### switch 语句的优雅写法：适时地去掉 break ### 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)

376
04-JavaScript基础/09-流程控制语句：循环结构（for和while）.md
View File

@ -1,13 +1,10 @@
## 前言 ## 前言
循环语句：通过循环语句可以反复的执行一段代码多次。 循环语句：通过循环语句可以反复的执行一段代码多次。
## for循环 ## for 循环
### for循环的语法 ### for 循环的语法
语法： 语法：
@ -29,13 +26,11 @@ for(①初始化表达式; ②条件表达式; ④更新表达式){
④执行更新表达式，更新表达式执行完毕继续重复② ④执行更新表达式，更新表达式执行完毕继续重复②
``` ```
for 循环举例：
for循环举例：
```javascript ```javascript
for (var i = 1; i <= 100; i++) { for (var i = 1; i <= 100; i++) {
console.log(i); console.log(i);
} }
``` ```
@ -43,14 +38,12 @@ for (var i = 1; i <= 100; i++) {
![](http://img.smyhvae.com/20180117_2248_2.png) ![](http://img.smyhvae.com/20180117_2248_2.png)
### for循环举例 ### for 循环举例
```javascript ```javascript
for (var i = 1; i < 13; i = i + 4) { for (var i = 1; i < 13; i = i + 4) {
console.log(i); console.log(i);
} }
``` ```
上方代码的遍历步骤： 上方代码的遍历步骤：
@ -73,52 +66,48 @@ for (var i = 1; i < 13; i = i + 4) {
接下来做几个题目。 接下来做几个题目。
**题目1**： **题目 1**：
```javascript ```javascript
for (var i = 1; i < 10; i = i + 3) { for (var i = 1; i < 10; i = i + 3) {
i = i + 1; i = i + 1;
console.log(i); console.log(i);
} }
``` ```
输出结果：2、6、10 输出结果：2、6、10
**题目2**： **题目 2**：
```javascript ```javascript
for (var i = 1; i <= 10; i++) { for (var i = 1; i <= 10; i++) {}
}
console.log(i); console.log(i);
``` ```
输出结果：11 输出结果：11
**题目3**： **题目 3**：
```javascript ```javascript
for(var i = 1; i < 7; i = i + 3){ for (var i = 1; i < 7; i = i + 3) {}
}
console.log(i); console.log(i);
``` ```
输出结果：7 输出结果：7
**题目4**： **题目 4**：
```javascript ```javascript
for (var i = 1; i > 0; i++) { for (var i = 1; i > 0; i++) {
console.log(i); console.log(i);
} }
``` ```
死循环。 死循环。
## while循环语句 ## while 循环语句
### while循环 ### while 循环
语法： 语法：
@ -140,11 +129,9 @@ while语句在执行时，先对条件表达式进行求值判断：
如果值为false，则终止循环 如果值为false，则终止循环
``` ```
**如果有必要的话，我们可以使用 break 来终止循环**。 **如果有必要的话，我们可以使用 break 来终止循环**。
### do...while 循环
### do...while循环
语法： 语法：
@ -166,68 +153,60 @@ do...while语句在执行时，会先执行循环体：
``` ```
### while 循环和 do...while 循环的区别
### while循环和 do...while循环的区别
这两个语句的功能类似，不同的是： 这两个语句的功能类似，不同的是：
- while是先判断后执行，而do...while是先执行后判断。 - while 是先判断后执行，而 do...while 是先执行后判断。
也就是说，do...while可以保证循环体至少执行一次，而while不能。 也就是说，do...while 可以保证循环体至少执行一次，而 while 不能。
### while循环举例 ### while 循环举例
**题目**：假如投资的年利率为 5%，试求从 1000 块增长到 5000 块，需要花费多少年？
**题目**：假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年？
**代码实现**： **代码实现**：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head>
<meta />
<meta />
<meta />
<title>Document</title>
</head>
<head> <body>
<meta> <script>
<meta> /*
<meta> * 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
<title>Document</title> *
</head> * 1000 1000*1.05
* 1050 1050*1.05
*/
<body> //定义一个变量，表示当前的钱数
<script> var money = 1000;
/*
* 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
*
* 1000 1000*1.05
* 1050 1050*1.05
*/
//定义一个变量，表示当前的钱数 //定义一个计数器
var money = 1000; var count = 0;
//定义一个计数器 //定义一个while循环来计算每年的钱数
var count = 0; while (money < 5000) {
money *= 1.05;
//定义一个while循环来计算每年的钱数 //使count自增
while (money < 5000) { count++;
money *= 1.05; }
//使count自增
count++;
}
console.log(money);
console.log("一共需要" + count + "年");
</script>
</body>
console.log(money);
console.log('一共需要' + count + '年');
</script>
</body>
</html> </html>
``` ```
打印结果： 打印结果：
``` ```
@ -236,38 +215,34 @@ do...while语句在执行时，会先执行循环体：
一共需要33年 一共需要33年
``` ```
另外，你也可以自己算一下，假如投资的年利率为 5%，从 1000 块增长到 1 万块，需要花费 48 年：
另外，你也可以自己算一下，假如投资的年利率为5%，从1000块增长到1万块，需要花费48年：
``` ```
10401.269646942128 10401.269646942128
一共需要48年 一共需要48年
``` ```
## break 和 continue ## break 和 continue
> 这个知识点非常重要。 > 这个知识点非常重要。
### break ### break
- break可以用来退出switch语句或退出**整个**循环语句（循环语句包括for循环、while循环。不包括if。if里不能用 break 和 continue，否则会报错）。 - break 可以用来退出 switch 语句或退出**整个**循环语句（循环语句包括 for 循环、while 循环。不包括 if。if 里不能用 break 和 continue，否则会报错）。
- break会立即终止离它**最近**的那个循环语句。 - break 会立即终止离它**最近**的那个循环语句。
- 可以为循环语句创建一个label，来标识当前的循环（格式：label:循环语句）。使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。 - 可以为循环语句创建一个 label，来标识当前的循环（格式：label:循环语句）。使用 break 语句时，可以在 break 后跟着一个 label，这样 break 将会结束指定的循环，而不是最近的。
**举例 1**：通过 break 终止循环语句
**举例1**：通过 break 终止循环语句
```javascript ```javascript
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
console.log('i的值:' + i); console.log('i的值:' + i);
if (i == 2) { if (i == 2) {
break; // 注意，虽然在 if 里 使用了 break，但这里的 break 是服务于外面的 for 循环。 break; // 注意，虽然在 if 里 使用了 break，但这里的 break 是服务于外面的 for 循环。
} }
} }
``` ```
打印结果： 打印结果：
@ -278,35 +253,31 @@ i的值:1
i的值:2 i的值:2
``` ```
**举例 2**：label 的使用
**举例2**：label的使用
```javascript ```javascript
outer: outer: for (var i = 0; i < 5; i++) {
for (var i = 0; i < 5; i++) { console.log('外层循环 i 的值：' + i);
console.log("外层循环 i 的值：" + i)
for (var j = 0; j < 5; j++) { for (var j = 0; j < 5; j++) {
break outer; // 直接跳出outer所在的外层循环（这个outer是我自定义的label） break outer; // 直接跳出outer所在的外层循环（这个outer是我自定义的label）
console.log("内层循环 j 的值:" + j); console.log('内层循环 j 的值:' + j);
} }
} }
``` ```
打印结果： 打印结果：
``` ```
外层循环 i 的值：0 外层循环 i 的值：0
``` ```
### continue ### continue
- continue可以用来跳过**当次**循环，继续下一次循环。 - continue 可以用来跳过**当次**循环，继续下一次循环。
- 同样，continue默认只会离他**最近**的循环起作用。 - 同样，continue 默认只会离他**最近**的循环起作用。
- 同样，如果需要跳过指定的当次循环，可以使用 label 标签。
举例： 举例：
@ -333,7 +304,6 @@ i的值:7
i的值:9 i的值:9
``` ```
## 各种练习 ## 各种练习
### 练习一：质数相关 ### 练习一：质数相关
@ -345,164 +315,145 @@ i的值:9
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <title></title>
<title></title> <script type="text/javascript">
<script type="text/javascript"> /*
/*
质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。 质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。
*/ */
var num = prompt("请输入一个大于1的整数:"); var num = prompt('请输入一个大于1的整数:');
//判断这个值是否合法 //判断这个值是否合法
if (num <= 1) { if (num <= 1) {
alert("该值不合法！"); alert('该值不合法！');
} else { } else {
//先用flag标志位，来保存当前的数的状态
//默认当前num是质数
var flag = true;
//先用flag标志位，来保存当前的数的状态 //判断num是否是质数
//默认当前num是质数 //获取2-num之间的数
var flag = true; for (var i = 2; i < num; i++) {
//console.log(i);
//判断num是否能被i整除
if (num % i == 0) {
//一旦发现：如果num能被i整除，则说明num一定不是质数，
//此时：设置flag为false，然后跳出 for 循环
flag = false;
break;
}
}
//判断num是否是质数 //如果num是质数则输出
//获取2-num之间的数 if (flag) {
for (var i = 2; i < num; i++) { alert(num + '是质数！！！');
//console.log(i); } else {
//判断num是否能被i整除 alert('这个不是质数');
if (num % i == 0) {
//一旦发现：如果num能被i整除，则说明num一定不是质数，
//此时：设置flag为false，然后跳出 for 循环
flag = false;
break;
} }
} }
</script>
</head>
//如果num是质数则输出 <body></body>
if (flag) {
alert(num + "是质数！！！");
} else {
alert("这个不是质数")
}
}
</script>
</head>
<body>
</body>
</html> </html>
``` ```
### 练习二：质数相关 ### 练习二：质数相关
**题目**：打印1~100之间的所有质数 **题目**：打印 1~100 之间的所有质数
代码实现： 代码实现：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
/*
* 打印出1-100之间所有的质数
*/
<head> //打印2-100之间所有的数
<meta charset="UTF-8"> for (var i = 2; i <= 100; i++) {
<title></title> //创建一个布尔值，用来保存结果，默认i是质数
<script type="text/javascript"> var flag = true;
/* //判断i是否是质数
* 打印出1-100之间所有的质数 //获取到2-i之间的所有的数
*/ for (var j = 2; j < i; j++) {
//判断i是否能被j整除
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
}
}
//打印2-100之间所有的数 //如果是质数，则打印i的值
for (var i = 2; i <= 100; i++) { if (flag) {
console.log(i);
//创建一个布尔值，用来保存结果，默认i是质数
var flag = true;
//判断i是否是质数
//获取到2-i之间的所有的数
for (var j = 2; j < i; j++) {
//判断i是否能被j整除
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
} }
} }
</script>
</head>
//如果是质数，则打印i的值 <body></body>
if (flag) {
console.log(i);
}
}
</script>
</head>
<body>
</body>
</html> </html>
``` ```
打印结果： 打印结果：
![](http://img.smyhvae.com/20181229_1415.png) ![](http://img.smyhvae.com/20181229_1415.png)
### 练习三：99乘法表 ### 练习三：99 乘法表
代码实现： 代码实现：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <title></title>
<title></title> <style type="text/css">
<style type="text/css"> body {
body { width: 2000px;
width: 2000px;
}
span {
display: inline-block;
width: 80px;
}
</style>
<script type="text/javascript">
/*
* 1.打印99乘法表
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4=8 3*4=12 4*4=16
* ....9*9=81
*
* 2.打印出1-100之间所有的质数
*/
//创建外层循环，用来控制乘法表的高度
for (var i = 1; i <= 9; i++) {
//创建一个内层循环来控制图形的宽度
for (var j = 1; j <= i; j++) {
document.write("<span>" + j + "*" + i + "=" + i * j + "</span>");
} }
//输出一个换行 span {
document.write("<br />"); display: inline-block;
} width: 80px;
</script> }
</head> </style>
<script type="text/javascript">
/*
* 1.打印99乘法表
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4=8 3*4=12 4*4=16
* ....9*9=81
*
* 2.打印出1-100之间所有的质数
*/
<body> //创建外层循环，用来控制乘法表的高度
</body> for (var i = 1; i <= 9; i++) {
//创建一个内层循环来控制图形的宽度
for (var j = 1; j <= i; j++) {
document.write('<span>' + j + '*' + i + '=' + i * j + '</span>');
}
//输出一个换行
document.write('<br />');
}
</script>
</head>
<body></body>
</html> </html>
``` ```
@ -510,7 +461,6 @@ i的值:9
![](http://img.smyhvae.com/20181229_1410.png) ![](http://img.smyhvae.com/20181229_1410.png)
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@ -518,7 +468,3 @@ i的值:9
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/2016040102.jpg)