流程控制
- 编程语言都有三大流程控制结构
- 顺序结构：代码从上往下顺序执行
- 分支结构：代码选择执行
- 循环结构：代码重复执行
分支结构
分支结构作用：代码根据条件执行
- 为什么要有分支结构？
- 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我今天考试了，考的好与坏与回家的状态不一样的？
- 考的好：回家有赏
- 靠的不好：回家有伤
- 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我今天考试了，考的好与坏与回家的状态不一样的？
1.1-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">
<title>if单分支结构</title>
</head>
<body>
<script>
//1.默认情况下，代码是从上往下执行的（顺序结构）
console.log ( "我今天考试了" );
console.log ( "我回家了" );
console.log ( "爸爸打了我一顿" );
console.log ( "我睡觉了" );
//需求：考试不及格爸爸才打我，及格了就不打
//2.if分支结构：根据条件来执行代码
/**if结构语法
if ( 条件 true/false ){
条件成立时需要执行的代码
}
*/
//示例1
if(1>0){
console.log ( "我被执行了" );
}
console.log ( "111" );//只有大括号内的代码才是根据条件执行的，大括号后面的代码还是顺序执行
//需求实现
let score = 80;
console.log ( "我今天考试了" );
console.log ( "我回家了" );
if(score < 60){
console.log ( "爸爸打了我一顿" );
}
console.log ( "我睡觉了" );
//注意点：小括号中的条件可以是哪些呢
/*
(1) [通常]关系表达式：结果一定是布尔类型
(2) 布尔类型的值：true和false
(3) 其他表达式和值：都先转换成布尔类型再判断真会和假
*/
let num = 10;
if(num){
//num是10，转换成布尔类型是true，所以会执行大括号代码
alert('num满足了条件');
}
</script>
</body>
</html>
1.2-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" />
<title>if-else双分支结构</title>
</head>
<body></body>
<script>
//需求：(1)如果不及格，爸爸就打我 (2)如果及格，爸爸给我买奥迪
//1.用if实现
let score = 80;
console.log("我今天考试了");
console.log("我回家了");
if (score >= 60) {
//及格
console.log("爸爸给我买了一辆奥迪");
}
if (score < 60) {
//不及格
console.log("爸爸打了我一顿");
}
console.log("我睡觉了");
//2.if-else结构：用于两个互斥的条件
//优点：只需要一次判断
/*语法
if(条件){
条件成立时需要执行的代码
}else{
条件不成立时需要执行的代码
}
if-else结构注意点：if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行
*/
score = 80;
console.log("我今天考试了");
console.log("我回家了");
if (score >= 60) {
//及格
console.log("爸爸给我买了一辆奥迪");
} else {
//不及格
console.log("爸爸打了我一顿");
}
console.log("我睡觉了");
//if-else结构注意点：if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行
//💘世界上最遥远的距离不是生与死，而是我在if里，你在esle里，看起来那么近却永远不能在一起
if (5 > 3) {
alert("执行了if中的语句");
} else {
alert("执行了else中的语句");
}
</script>
</html>
1.3-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可以是多个，末尾的else可以省略（一般都不会省略）
- (2)if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if-else if-else多分支结构</title>
</head>
<body></body>
<script>
//需求：(1)如果不及格，爸爸就打我 (2)如果60-70，爸爸给我买奥迪 （3）如果70-80分，爸爸给我买保时捷
//(4)如果超过80分，爸爸给我买法拉利
/**
* if-elseif-else结构语法：用于多种条件判断
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件3成立时需要执行的代码
}else{
以上所有条件都不成立时需要执行的代码
}
* 注意点：
* (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）
* (2)if-else if-else语句中所有的大括号中的代码最多只会执行一个，不会执行多个
*/
let score = 50;
console.log("我今天考试了");
console.log("我回家了");
if (score >= 80) {
console.log("爸爸给我买了一辆法拉利");
} else if (score >= 70) {
//隐藏条件: score < 80
console.log("爸爸给我买了一辆保时捷");
} else if (score >= 60) {
//隐藏条件: socre < 70
console.log("爸爸给我买了一辆奥迪");
} else {
//隐藏条件： score < 60
console.log("爸爸打了我一顿");
}
console.log("我睡觉了");
</script>
</html>
分支补充
switch-case分支结构
- 1.语法
switch(表达式){ // 不是布尔类型：是一个确定的变量
case 值1: // 值1,值2...都是字面量
表达式的结果 === 值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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分支补充 - Switch-case</title>
</head>
<body></body>
<script>
/*
switch(表达式){ // 不是布尔类型：是一个确定的变量
case 值1: // 值1,值2...都是字面量
表达式的结果 === 值1，需要执行的代码
break;
case 值2:
表达式的结果 === 值2，需要执行的代码
break;
case 值3：
表达式的结果 === 值3，需要执行的代码
break;
.......
default:
表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
break;
}
*/
// 需求:随机产生 0-6 之间的随机数:输出对应的星期几
let day = Math.round(Math.random() * 6);
// switch判定
switch (day) {
case 0:
// 表示 day 的值是 0
document.body.innerText = "星期天";
break;
case 1:
// 表示 day 的值不是 0 ,是 1
document.body.innerText = "星期一";
break;
case 2:
// 表示 day 的值不是 0 ,也不是 1 ,是 2
document.body.innerText = "星期二";
break;
case 3:
document.body.innerText = "星期三";
break;
case 4:
document.body.innerText = "星期四";
break;
case 5:
document.body.innerText = "星期五";
break;
case 6:
document.body.innerText = "星期六";
break;
default:
document.body.innerText = "无效日期";
break;
}
</script>
</html>
switch-case穿透用法
- 合理穿透：多种值需要执行相同代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分支补充 - Switch-case - 案例 - 网页版计算器</title>
</head>
<body>
<input type="text" name="num1" />
<select name="op">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="x">x</option>
<option value="X">X</option>
<option value="/">/</option>
<option value="÷">÷</option>
<option value="%">%</option>
</select>
<input type="text" name="num2" />
<button>=</button>
<input type="text" name="res" disabled />
</body>
<script>
// 穿透效果: if中条件判定的逻辑或问题
// if(条件1 || 条件2 || 条件3 ...){ 共用代码 }
/*
switch(){
case 条件1:
case 条件2:
case 条件3:
代码: 条件1,条件2,条件3 共用代码
break
}
*/
// 需求: 简易版网页计算器
document.querySelector("button").onclick = function () {
// 获取数据
let num1 = document.querySelector('[name="num1"]').value.trim() - 0;
let num2 = document.querySelector('[name="num2"]').value.trim() - 0;
let res = document.querySelector('[name="res"]');
let op = document.querySelector("select").children[document.querySelector("select").selectedIndex].value;
// select.selectedIndex 表示获取到select元素中被选中的option对应的下标
// 判定操作符(认为:用户输入的数据是安全的)
switch (op) {
case "+":
res.value = num1 + num2;
break;
// 复杂: 除法: / 和 ÷
case "/": // 没有break: case会自动穿透
case "÷":
res.value = num1 / num2;
break; // 见到break: 自动结束分支
case "-":
res.value = num1 - num2;
break;
case "*":
case "x":
case "X":
res.value = num1 * num2;
break;
default:
res.value = num1 % num2;
break;
}
// // 清空
// document.querySelector('[name="num1"]').value = "";
// document.querySelector('[name="num2"]').value = "";
};
</script>
</html>
三元表达式
-
1.运算符根据参与运算的值数量分为一元、二元、三元运算符
- 一元运算符：只能操作一个值 ++ – ！
- 二元运算符：操作两个值 1 + 1 1 > 0
- 三元运算符：操作三个值
-
2.三元运算符语法
-
三元运算符：
?: -
三元表达式：
表达式?代码1：代码2- 1.如果表达式成立则执行代码1，否则执行代码2
-
-
2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个
-
三元运算符做的事和if-else类似，只是代码更简洁
-
三元表达式中：表达式部分永远是条件，最终代表整个结果的不是代码1 就是 代码2
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分支补充 - 三元表达式</title>
</head>
<body>
<span class="sec">15</span>
</body>
<script>
// 三元表达式: 简化代替 简单if-else语句( 赋值 )
let res;
if (true) {
res = 1;
} else {
res = 0;
}
// 三元语法: 表达式条件 ? 代码1 : 代码2
// 作用: 如果条件成立, 代码1代表整个结果; 否则 代码2 代表整个结果
false ? console.log(123) : console.log(456);
// 需求: 倒计时, 到0结束
let s = document.querySelector(".sec");
let timeId = setInterval(function () {
// 获取时间(数字)
let sTime = s.innerText - 0;
// 描述-1
sTime--;
// 前导0
// if (sTime < 10) {
// sTime = '0' + sTime
// }
// 三元处理: 三元运算常用点, 用于判定条件赋值
sTime = sTime < 10 ? "0" + sTime : sTime;
// 赋值
s.innerText = sTime;
// 判定
if (sTime == 0) {
clearInterval(timeId);
}
}, 100);
// 总结
// 三元运算: 简化if-else的赋值行为
// 三元运算理论上可以代替任何分支(可以超级复杂), 实际不用
// age是人的年龄: 年龄划分层次: 14一下 豆蔻, 14-20 弱冠, 20 - 30 青年 30 - 40 而立 40-50 不惑 50-60知天命 60-70花甲 70-80 古稀 80-之后 耄耋
// age > 14 ? (age > 20 ? (age > 30 ? (age > 40 ? '其他' : '而立') : '青年') : '弱冠') : '豆蔻'
//
</script>
</html>
三种分支结构语法总结
- 1.原则上，三种分支结构语句之间可以互转，只不过每一种分支结构语句适用场景不一样
- 2.if分支结构：适合条件判断
- 最常用：if-else 两种互斥条件判断
- 3.switch-case 适合做固定值匹配
- 4.三元表达式： 比if-else代码更简洁，但是代码量较多时易读性变差
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
