Web/03-JavaScript基础/05-流程控制语句:选择结构(if和switch).md

304 lines
6.7 KiB
Markdown
Raw Normal View History

> 本文首发于[博客园](http://www.cnblogs.com/smyhvae/p/8310295.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
2018-03-14 22:49:34 +08:00
## 代码块
用`{}`包围起来的代码,就是代码块。
JS中的代码块只具有**分组**的作用,没有其他的用途。
2018-12-26 21:14:48 +08:00
代码块中的内容,在外部是完全可见的。举例:
```javascript
{
var a = 2;
alert("smyhvae");
console.log("永不止步");
}
console.log("a = " + a);
```
打印结果:(可以看出,虽然变量 a 是定义在代码块中的,但是在外部依然可以访问)
```
永不止步
a = 2
```
2018-03-14 22:49:34 +08:00
2018-12-27 13:06:39 +08:00
## 流程控制语句
在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。所以,我们必须清楚每条语句的执行流程。而且,很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。
### 流程控制语句分类
- 顺序结构
- 选择结构if语句、switch语句
- 循环结构while语句、for语句
2018-12-27 14:10:05 +08:00
## 顺序结构
2018-12-27 13:06:39 +08:00
按照代码的先后顺序,依次执行。结构图如下:
20181227_1200.png
## if语句
2018-12-27 13:06:39 +08:00
if语句有以下三种。
2018-12-27 13:06:39 +08:00
### 1、条件判断语句
> 条件成立才执行。如果条件不成立,那就什么都不做。
格式:
```javascript
if (条件表达式) {
// 条件为真时,做的事情
}
```
### 2、条件分支语句
格式1
```javascript
if (条件表达式) {
// 条件为真时,做的事情
} else {
// 条件为假时,做的事情
}
```
2018-12-27 13:06:39 +08:00
格式多分支的if语句
```javascript
if (条件表达式1) {
// 条件1为真时做的事情
} else if (条件表达式2) {
// 条件1不满足条件2满足时做的事情
} else if (条件表达式3) {
// 条件1、2不满足条件3满足时做的事情
} else {
// 条件1、2、3都不满足时做的事情
}
```
以上所有的语句体中,只执行其中一个。
2018-12-27 13:06:39 +08:00
### 做个题目
```
根据BMI身体质量指数显示一个人的体型。
BMI指数就是体重、身高的一个计算公式。公式是
BMI =体重÷身高的平方
比如老师的体重是81.6公斤身高是1.71米。
那么老师的BMI就是 81.6 ÷ 1.712 等于 27.906022365856163
过轻低于18.5
正常18.5-24.99999999
过重25-27.9999999
肥胖28-32
非常肥胖, 高于32
用JavaScript开发一个程序让用户先输入自己的体重然后输入自己的身高弹出两次prompt框
计算它的BMI根据上表弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。
```
2018-12-27 13:06:39 +08:00
**答案**
写法1
```javascript
//第一步,输入身高和体重
var height = parseFloat(prompt("请输入身高,单位是米"));
var weight = parseFloat(prompt("请输入体重,单位是公斤"));
//第二步计算BMI指数
var BMI = weight / Math.pow(height, 2);
//第三步if语句来判断。注意跳楼现象
if (BMI < 18.5) {
alert("偏瘦");
} else if (BMI < 25) {
alert("正常");
} else if (BMI < 28) {
alert("过重");
} else if (BMI <= 32) {
alert("肥胖");
} else {
alert("非常肥胖");
}
```
写法2
```javascript
//第一步,输入身高和体重
var height = parseFloat(prompt("请输入身高,单位是米"));
var weight = parseFloat(prompt("请输入体重,单位是公斤"));
//第二步计算BMI指数
var BMI = weight / Math.pow(height, 2);
//第三步if语句来判断。注意跳楼现象
if (BMI > 32) {
alert("非常肥胖");
} else if (BMI >= 28) {
alert("肥胖");
} else if (BMI >= 25) {
alert("过重");
} else if (BMI >= 18.5) {
alert("正常")
} else {
alert("偏瘦");
}
```
### if语句的嵌套
我们通过下面这个例子来引出if语句的嵌套。
```
一个加油站为了鼓励车主多加油,所以加的多有优惠。
92号汽油每升6元如果大于等于20升那么每升5.9
97号汽油每升7元如果大于等于30升那么每升6.95
编写JS程序用户输入自己的汽油编号然后输入自己加多少升弹出价格。
```
![](http://img.smyhvae.com/20180117_2232.png)
代码实现如下:
```javascript
//第一步,输入
var bianhao = parseInt(prompt("您想加什么油填写92或者97"));
var sheng = parseFloat(prompt("您想加多少升?"));
//第二步,判断
if (bianhao == 92) {
//编号是92的时候做的事情
if (sheng >= 20) {
var price = sheng * 5.9;
} else {
var price = sheng * 6;
}
} else if (bianhao == 97) {
//编号是97的时候做的事情
if (sheng >= 30) {
var price = sheng * 6.95;
} else {
var price = sheng * 7;
}
} else {
alert("对不起,没有这个编号的汽油!");
}
alert("价格是" + price);
```
2018-12-27 14:10:05 +08:00
## switch语句条件分支语句
2018-12-27 14:10:05 +08:00
switch语句也叫条件分支语句。
2018-12-27 14:10:05 +08:00
格式:
```javascript
2018-12-27 14:10:05 +08:00
switch(表达式) {
case 值1
语句体1;
break;
2018-12-27 14:10:05 +08:00
case 值2
语句体2;
break;
2018-12-27 14:10:05 +08:00
...
...
2018-12-27 14:10:05 +08:00
default
语句体 n+1;
break;
}
```
2018-12-27 14:10:05 +08:00
备注1当所有的比较结果都为false时则只执行default里的语句。
2018-12-27 14:10:05 +08:00
备注2break可以省略但一般不建议。否则结果可能不是你想要的会出现一个现象**case穿透**。
2018-12-27 14:10:05 +08:00
**switch语句的执行流程**
2018-12-27 14:10:05 +08:00
- 首先计算出表达式的值和case依次比较一旦有对应的值就会执行相应的语句在执行的过程中遇到break就会结束。
2018-12-27 14:10:05 +08:00
- 然后如果所有的case都和表达式的值不匹配就会执行default语句体部分然后程序结束掉。
2018-12-27 14:10:05 +08:00
### switch语句的结束条件
2018-12-27 14:10:05 +08:00
- 情况a遇到break就结束而不是遇到default就结束。因为break在此处的作用就是退出switch语句
2018-12-27 14:10:05 +08:00
- 情况b执行到程序的末尾就结束。
2018-12-27 14:10:05 +08:00
我们来举两个例子就明白了。
2018-03-14 22:49:34 +08:00
## break和continue
### break
- break可以用来退出switch语句或**整个**循环语句循环语句包括for、while。不包括if。if里不能用break否则会报错
- break会立即终止离它最近的那个循环语句。
### continue
- continue可以用来跳过**当次**循环。
- 同样continue默认只会离他最近的循环起作用。
## 算法题练习
暂略。
## 我的公众号
2018-12-27 14:10:05 +08:00
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)