JS流程控制——分支语句
目标：掌握流程控制，写出能“思考”的程序
语句的三大结构
- 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
- 有的时候要根据条件选择执行代码，这种就叫分支结构
- 某段代码被重复执行，就叫循环结构
今天我们着重学习一下分支语句
If分支语句
（一）作用以及组成
作用
分支语句可以让我们有选择性的执行想要的代码
组成
分支语句包含：If分支语句 和 三元运算符
if语句
分类
if语句有三种使用：单分支、双分支、多分支
单分支使用语法
条件成立直接执行if里面的代码，如果不成立就跳过if语句，执行之后的代码
- 括号内的条件为true时，进入大括号里执行代码
- 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
代码块展示：
<script>
// 1.if 语句的语法结构 如果if
/* if (条件表达式) {
执行语句
} */
/* 2.执行思路：如果 if里面的表达式结果为真 true，则执行大括号内的 执行语句
如果 if里面的表达式结果为假 ，则不执行大括号内的 执行语 执行if语句后面的代码 */
// 3代码体验
// 3.1满足if里面的条件
if (3 > 2) {
alert('这是一次正确的测试')// 条件满足，会直接执行大括号内的代码
}
//3.2 不满足if里面的条件，则执行if语句后面的代码
if (5 < 3) {
alert('这是一个错误的示范')
}
alert('算错啦') // 直接输出这个
</script>
if单分支案例
案例1：用户输入年龄，如果年龄大于18，则提示可以去网吧上网
案例思路：需要有一个变量可以存储数据
<script>
let age = prompt('请输入您的年龄')
if (age >= 18) {
alert(`您的年龄为${age},已成年可以上网`)
}
</script>
案例2：用户输入高考成绩，如果分数大于700，则提示恭喜考入山东蓝翔
<script>
let mark = prompt('请输入您的高考成绩：')
if (mark > 700) {
alert(`您的成绩为${mark}，恭喜您成功考入山东蓝翔,加入蓝翔大家庭`)
}
</script>
if-else 双分支语句
双分支if语法：
代码块
<script>
/* 1. 语法结构 ：if 如果 else 否则 */
/* if （条件表达式）{
执行语句1
}else{
执行语句2
}
*/
/* 2.执行思路 如果表达式结果为真，那么执行语句1；如果表达式结果为假，就执行else里面的代码 */
// 3.代码验证
let age = prompt('请输入您的年龄：')
if (age >= 18) {
alert('有空一起去网吧开黑呀')
} else {
alert('未成年还是在家写作业吧')
}
</script>
if-else双分支语句案例
案例1：用户输入，如果工龄大于1年，年底奖金+2000， 否则年底没奖金
<script>
let workingAge = prompt('请输入您的工龄')
if (workingAge > 1) {
alert(`您的工龄为${workingAge}年，年底奖金+2000`)
} else {
alert(`您的工龄不足1年，没有年终奖`)
}
</script>
案例2：让用户输入年份，判断这一年是闰年还是平年并输出
- 能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
- 需要逻辑运算符
<script>
let years = prompt('请输入查询的年份')
if (years % 4 == 0 && years % 100 != 0 || years % 400 == 0) {
alert('您输入的年份是闰年')
} else {
alert('您输入的年份是平年')
}
</script>
if-else if多分支语句
多分支if语法：
执行方式：
- 先判断条件1，若满足条件1就执行代码1，其他不执行
- 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
- 若依然不满足继续往下判断，依次类推
- 若以上条件都不满足，执行else里的代码n
- 注：可以写N个条件，但这里演示只写2个
执行流程：
代码块
<script>
/* if else if多分支语句
语法：
if（条件表达式）{
输出语句1
} else if （条件表达式2）{
输出语句2
}else if （条件表达式3）{
输出语句3
}
*/
//根据输入不同时间，输出不同的问候语
/*
12点以前， 输出上午好
18点以前， 输出下午好
20点以前， 输出晚上好
*/
let times = prompt('请输入时间')
if (times < 12) {
alert(`现在是${times}点,早上好`)
} else if (times < 18) {
alert(`现在是${times}点,下午好`)
} else if (times < 20) {
alert(`现在是${times}点,晚上好`)
} else {
alert('现在不早了，该休息了')
}
</script>
案例练习
案例1：
代码块：
<script>
let grade = prompt('请输入您的分数：')
if (grade >= 90) {
alert('恭喜你得到了A')
} else if (grade >= 80) {
alert('恭喜你得到了B')
} else if (grade >= 70) {
alert('恭喜你得到了C')
} else if (grade >= 60) {
alert('恭喜你得到了D')
} else {
alert('你的成绩不及格')
}
</script>
在这个案例中可得知，条件分支是会一个个筛选排查的，下一个条件是建立在筛选了上一个条件的基础上的。
案例2：设置一个简单的计算机，用户输入两个数字，第三次输入“+ ，-，*,/ ”任意一个运算符，都可以成功计算
代码块：
<script>
let num1 = +prompt('请输入第一个数字') //隐式转换将用户输出的值转换成数字
let num2 = +prompt('请输入第二个数字')
let result = prompt('请选择运算符，可选择“+ - * /”')
// let add = parseFloat(num1) + parseFloat(num2);
let add = (num1 + num2); //失败，还是字符串
console.log(typeof add);
if (result == '+') {
alert(add)
} else if (result == '-') {
alert(num1 - num2)
} else if (result == '*') {
alert(num1 * num2)
} else if (result = '/') {
alert(num1 / num2)
} else {
alert('请输入正确的运算符号')
}
</script>
三元运算符
可以看作是简单版的if else，相比之下更加简洁
三元表达式
由三元运算符组成的式子我们称为三元表达式
基本语法：
符号：? 与 : 配合使用
语法：条件满足则输出第一个，不满足则输出第二个
用法：一般用来取值
代码块
<script>
/* 1.语法结构
条件表达式 ？ 表达式1 :表达式2
2.执行思路
如果条件表达式结果为真 则 返回表达式1的值；
如果条件表达式结果为假 则 返回表达式2的值
*/
// 3.代码体验
let num = 10
num = num > 6 ? '是的' : '不是的'
console.log(num);
</script>
练习
案例1：
代码块：
<script>
let num1 = prompt('请输入第一个值')
let num2 = prompt('请输入第二个值')
// 三元表达式
let result = num1 > num2 ? num1 : num2
alert(`输入的最大值为：${result}`)
</script>
案例2：
代码块：
<script>
// 数字补0案例
let num = prompt('请输入您想要的数字：')
let result = num >= 10 ? num : '0' + num
alert(`您输入的数字为${result}`)
console.log(typeof result);
</script>
switch 语句
也是分支语句之一，多选一，比较适用与数值比较确定的案例中，或者分支比较多的情况下。
表达式
/* 语法：
switch(表达式){
case value1：
执行语句1；
break；
case value2：
执行语句2；
break；
...
default：
执行最后的语句；
}
*/
案例：用户输入水果名称，查询该水果的价格，查询到结果就弹窗告知客户，如果没有该水果就显示没有。
代码块
<script>
// 查询水果案例
let fruit = prompt('请输入您想要查询的水果：')
switch (fruit) {
case '苹果':
alert('苹果的价格为3.5元/斤');
break;
case '橙子':
alert('橙子的价格为5元/斤');
break;
case '榴莲':
alert('榴莲的价格为55元/斤');
break;
default:
alert('查询有误，没有此水果')
}
</script>
switch 语句跟if else语句的区别
- 一般情况下,它们两个语句可以相互替换
- switch..case 语句通常处理case为比较确定值的情况,而i..e..语句更加灵活,常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句, 效率更高。而if.. .else语句有几种条件,就得判断多少次。
- 当分支比较少时, if.. else语句的执行效率比switch语句高。
- 当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。
循环语句-while
while 循环语法
解释：
- 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
- while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
while 循环注意事项
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，循环需要具备三要素：
- 变量起始值
- 终止条件（没有终止条件，循环会一直执行，造成死循环）
- 变量变化量（用自增或者自减）
代码块
<script>
/*
while (条件){
执行语句
变量变化量
}
*/
let i = 1;
while (i <= 10) {
document.write('月入过万<br>')
++i
}
</script>
练习
练习1
需求：使用while循环，页面中打印，可以添加换行效果 页面输出1-100
代码块
<script>
// 输出1 - 100
let sum = 1
while (sum <= 100) {
console.log(sum);
sum++
}
</script>
练习2
计算从1加到100的总和并输出
<script>
let i = 0, sum = 0;
while (i <= 99) {
i++
sum += i
console.log(sum);
}
</script>
练习3
计算从1加到100的偶数总和并输出
<script>
let i = sum = 0;
while (i <= 100) {
if (i % 2 == 0) {
sum += i
}
i++
}
alert(sum)
</script>
下方是采用短路运算的方式，更加简洁
<script>
// 使用短路运算的方式
while (i <= 100) {
i % 2 === 0 && (sum += i)
i++;
}
console.log(sum);
</script>
练习4
<script>
let str;
while (str !== '爱') {
str = prompt('你爱我吗？')
} alert('爱你')
</script>
综合练习
思路：我们作为新手，光是在脑海中构思该案例的需求，会一下子感觉收集到的信息过多，这个时候可以采用文字书写的方式去分析需求，易于打通我们的思路。
代码块
<Script>
/* ATM取款机案例：建议先将需求给写出来，然后在进行书写
*/
let input, money = 0, num1 = 0, num2 = 0
while (input !== 4) {
input = +prompt('请输入您的指令：')
if (input === 1) {
num1 = +prompt('请输入您的取款金额')
money -= num1
} else if (input === 2) {
num2 = +prompt('请输入您的存款金额')
money += num2
} else if (input === 3) {
alert(`您的余额为${money}`)
} else if (input === 4) {
// alert('欢迎下次再来')
}
}
</Script>
