分支语句
分支结构作用：代码根据条件执行
-
为什么要有分支结构？
-
现实世界中，我们在做某些事情的时候是有前提条件的，例如：我明天去买一辆法拉利，前提是我今晚要中五百万
-
也就是说：如果我今晚中了五百万，明天就去买法拉利，没中的话就不买
-
语句与表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* 本小节为概念性理解,不需要敲代码
简单概括: 有运算符参与的就是表达式,没有运算符参与的就是语句
*/
//1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
1+1
10 > 9
//2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
//分支语句 循环语句
</script>
</body>
</html>
if单分支结构
-
1.if结构语法：
if(条件 true/false){ 条件成立时需要执行的代码 } -
2.if结构补充说明：
- 1.大括号中可以是任何代码，不限数量
- 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
-
3.注意点:小括号中的条件可以是哪些呢
- (1)关系表达式：结果一定是布尔类型
- (2)布尔类型的值：true和false
- (3)其他表达式和值：都会先转换成布尔类型再判断真和假
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//1.顺序结构(默认) ： 代码从上往下依次执行
// console.log('1-我今天上学了')
// console.log('2-我今天考试了')
// console.log('3-我回家了')
// console.log('4-爸爸打我了')
// console.log('5-我回房间睡觉了')
//2.分支结构 ： 代码根据条件来执行
/*
语法
if(条件 true/false){
满足条件需要执行的代码
}
注意点： 小括号里面的条件可以写哪些代码呢？
(1)比较表达式 ： 比较表达式结果一定是布尔类型
(2)直接写布尔类型的值
(3)写其他的值 ： 编译器会自动转成布尔类型来判断是否成立
*/
//需求：考试不及格爸爸才打我
let score = 59
console.log('1-我今天上学了')
console.log('2-我今天考试了')
console.log('3-我回家了')
if( score < 60 ){
console.log('4-爸爸打我了')
}
console.log('5-我回房间睡觉了')
if( 1 ){//Boolean(1) = true
console.log('满足条件，成立')
}
</script>
</body>
</html>
if-else双分支结构
if（条件）{
条件成立时需要执行的代码
}else{
条件不成立时需要执行的代码
}
-
1.if-esle结构语法:用于两种互斥的条件判断
- 例如：如果(if)我的钱超过100块就洗脚(也就是说钱>=100)，否则(else)不洗脚（也就是说钱<100）
-
2.if-else结构注意点
- if大括号中的代码与else大括号的代码只会执行一个，不会同时执行
-
if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
if-else双分支
语法：
if(条件true/false){
条件成立时需要执行的代码
}else{
条件不成立时需要执行的代码
}
注意点：双分支语句是两个互斥条件(两个条件一定会满足一个，不会同时满足，也不会同时不满足)
if大括号代码 和 else大括号代码 一定会执行一个,不会同时执行，也不会同时不执行
*/
//需求：(1)考试不及格爸爸才打我 (2)考试及格，爸爸给我买奥迪
let score = 89
console.log('1-我今天上学了')
console.log('2-我今天考试了')
console.log('3-我回家了')
if(score < 60 ){
console.log('4-爸爸打我了')
}else{
console.log('4-爸爸给我买奥迪')
}
console.log('5-我回房间睡觉了')
/* 互斥条件：两个条件一定会满足一个，不会同时满足，也不会同时不满足 */
if(1){
console.log('世界上最遥远的距离不是生与死距离，而是我在if里，你在else里。看起来隔得那么近，却永远也无法一起执行');
}else{
console.log('我爱你');
}
</script>
</body>
</html>
if-else if-else多分支结构
- 1.if-else if-else结构语法：
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件3成立时需要执行的代码
}else{
以上所有条件都不成立时需要执行的代码
}
-
2.注意点：
- (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）
- (2)if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
if分支语句
单个条件: if单分支
两个条件: if-else双分支
多个条件： if - else if - else 多分支
语法
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件2成立时需要执行的代码
}
.....
else{
如果前面所有条件都不满足，则执行else代码
}
注意点
(1)多分支所有的大括号代码最多只会执行一个，只有当前面的条件不满足，才会进入后面的条件判断
(2)多分支一定要以if开头，后面else if可以多个，结尾else可以省略
*/
//需求 (1)90以上，买布加迪 (2)80-90,兰博基尼 (3)60-80,特斯拉 (4)不及格，打我一顿
let score = 58
console.log('1-我今天上学了')
console.log('2-我今天考试了')
console.log('3-我回家了')
if (score >= 90) {
console.log('4-爸爸给你买布加迪')
} else if (score >= 80) {//隐藏条件score < 90
console.log('4-爸爸给你买兰博基尼')
} else if (score >= 60) {//隐藏条件score<80
console.log('4-爸爸给你买特斯拉')
}else{//隐藏条件 score<60
console.log('4-爸爸打我一顿')
}
console.log('5-我回房间睡觉了')
</script>
</body>
</html>
switch-case分支结构
- 1.语法
switch(表达式){
case 值1:
表达式的结果 === 值1，需要执行的代码
break;
case 值2:
表达式的结果 === 值2，需要执行的代码
break;
case 值3：
表达式的结果 === 值3，需要执行的代码
break;
.......
default:
表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
break;
}
-
2.注意事项
-
1.表达式的结果要和值一定是全等的关系===
-
2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透
- 穿透：从上一个case代码快执行到下一个case代码快
- break关键字的作用就是防止穿透
-
3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
switch-case分支结构
语法：
switch(匹配值){
case 值1 :
值1 === 匹配值,需要执行的代码
break
case 值2 :
值2 === 匹配值,需要执行的代码
break
......
default :
匹配值与上面所有case的值不匹配(全等)，需要执行的代码
break
}
注意点
(1)匹配值和case值 一定要是 ‘全等’关系
(2)不能省略break关键字,break关键字作用是结束switch语句
如果省略则会发生传统现象： 代码从上一个case无条件执行到下一个case
*/
//需求：弹出一个输入框让用户选择学科
let subject = +prompt(
'请输入您想要选择的学科 1-前端 2-java 3-UI 4-新媒体'
)
switch (subject) {
case 1:
document.write('恭喜你选择前端，2021年最有钱途的学科')
break
case 2:
document.write('恭喜你选择前java，祝你早日聪明绝顶')
break
case 3:
document.write('恭喜你选择UI，祝你早日脱单')
break
case 4:
document.write('恭喜你选择新媒体')
break
default:
document.write('脑子有包')
break
}
</script>
</body>
</html>
switch-case穿透用法
- 合理穿透：多种值需要执行相同代码
<script>
/**合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码
* 用户输入某一个月份，告诉用户这个月份属于什么季节
* 12，1，2 冬季
* 3，4，5 春季
* 6，7，8 夏季
* 9，10，11 秋季
*/
let month = +prompt("请输入月份");
switch (month){
case 12:
case 1:
case 2:
alert("冬季");
break;
case 3:
case 4:
case 5:
alert("春季");
break;
case 6:
case 7:
case 8:
alert("夏季");
break;
case 9:
case 10:
case 11:
alert("秋季");
break;
default:
alert("你来自火星吧？");
break;
}
</script>
if 多分支和switch的区别
共同点
都能实现多分支选择， 多选1
大部分情况下可以互换
区别：
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
结论：
- 当分支比较少时，if…else语句执行效率高。
- 当分支比较多时，switch语句执行效率高，而且结构更清晰。
