# 分支语句
* JS 在执行的时候, 是按照 从上往下的顺序执行的
*
* 所以我们书写的所有代码都会执行, 区别就是执行顺序的问题
*
* 但是上述的执行方案会有一个小问题, 比如我想根据某一个条件决定是否执行一段代码
*
*
* 一个代码案例:
* 在访问一个页面的时候, 如果页面地址输入的没问题, 并且网络也能够正常访问页面
* 那么此时一定可以正常访问页面
* 如果上述的条件有一个不满, 比如说地址输入错误, 或者说网线被扒了
* 那么此时页面就无法正常的访问了
*
* 此时如果是前端JS处理, 那么应该是这解决的:
* 如果条件1和条件2都成立, 那么展示一个正常的页面
* 否则, 展示一个错误的页面 (404页面)
*
*
* 所以分支语句的一个核心就是给了我们 基于某一个条件决定执行某一段代码的能力
扩展
如果想要获取到用户输入的内容, 需要借助一个方法
*
* 注意: 一个 var num1 = prompt() 只能拿到用户输入一个内容
*
* 如果需要用户输入多个, 那么需要写多次
*
* 还有一个注意点就是获取到的内容是字符串格式的, 如果你需要数字的话, 请转换一下格式
*
* 推荐这样去转: var num1 = prompt() - 0
*/
// var num1 = prompt() // 这行代码执行完毕后, 会得到用户在浏览器输入的内容
// var num2 = prompt() // 这行代码执行完毕后, 会得到用户在浏览器输入的内容
// console.log(num1, num2)
// var num1 = prompt() - 0 注意这是纯数字，这样写只是更严谨
// var num2 = prompt() - 0
// console.log(num1, num2)
if 语句
true 为 1(真)，false 为 0
*
* 语法1: if (条件) { 书写如果条件成立, 需要执行的代码 }
*
* 条件为真 就会执行 大括号内的 代码, 否则 不执行
* 条件可以直接书写布尔值, 也可以书写一个表达式, 或者一个数字
* 只要你书写的不是一个布尔值, 那么会隐式转换（js自动转）为 一个布尔值
可以用 ！取反值
*
* 语法2:
* if (条件) {
* 书写如果条件成立, 需要执行的代码
* } else {
* 当上边的条件不成立的时候, 我会执行, 如果上边的条件成立了, 我就不执行了
* }
*
* 语法3(不推荐大量使用):
*
* if (条件1) {
* 如果条件1成立, 那么我会执行, 同时后续的所有 else if 或者 else 都不会执行了
* } else if (条件2) {
* 如果条件1不成立, 但是条件2成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
* } else if (条件3) {
* 如果条件1和条件2都不成立, 但是条件3成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
* } .....
*
* 语法4(语法3的一个升级补充):
*
* if (条件1) {
* 如果条件1成立, 那么我会执行, 同时后续的所有 else if 或者 else 都不会执行了
* } else if (条件2) {
* 如果条件1不成立, 但是条件2成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
* } else if (条件3) {
* 如果条件1和条件2都不成立, 但是条件3成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
* } else {
* 如果上述的所有条件都不成立, 那么我会执行, 否则就不执行
* }
*
*
* 注意: if 语句的难点不是如何选择 语法 1 2 3 4
* 难点是 if 语句 的 条件如何书写
*/
小练习
3. 用户输入一个年份, 判断这个年份是不是闰年
* 条件:
* 四年一润, 百年不润
* 四百年补一润
*
* 逻辑:
* 1. 想办法拿到用户输入的年份
* 2. 判断是不是闰年
* 如果一个年份信息满足一下两个条件中的任意一个, 就算是闰年
* 2.1 四年一润, 百年不润
* year % 4 === 0 && year % 100 !== 0
* 2.2 四百年补一润
* year % 400 === 0
*/
// 1. 想办法拿到用户输入的年份
var year = prompt() - 0
// 2. 判断是不是闰年
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
console.log('是闰年')
} else {
console.log('不是')
}
switch 语句
/*
switch中的表达式不会隐式转换为布尔值，而是判断这个表达式是否绝对等于值1，如果绝对等于(===)值1，就会执行语句块1
如果不绝对等于值1，就会向下判断是否绝对等于值2，如果等于值2就会执行语句块2，否则继续向下判断，如果没有一个满足的
则执行default后面的语句块
break是跳出这个switch，当满足某个case对应的值时，执行对应语句块后，执行break就会跳出当前switch语句
如果没有写break，就会不在判断下面的case是否相等，而直接执行下面的case后面的语句块直到break跳出
*/
switch (变量) {
case 100:
当变量的值 === 100 的时候会执行
break;
case 101:
当变量的值 === 101 的时候会执行
break;
default:
当上述条件都不满足的时候, 执行
}
var day = 4 // 取值范围是 1~7 表明 周几
switch (day) {
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
}
switch 的穿透现象 (穿刺现象)
* 在书写 case 的时候, 没有 书写 break
* 那么如果这个 case 符合条件那么就会执行它内部的代码
* 代码执行完毕后, 没有发现 break, 所以会继续向下执行
* 不管 下一个 case 条件是否满足
* 直到遇见下一个 break 或者 当前 switch 代码全都执行完毕
*/
用户输入月份 判断当月有几天
var m = prompt
}
switch (m) {
case 2:
console.log('28天')
break
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log('31天')
break
case 4:
case 6:
case 9:
case 11:
console.log('30天')
break
}
优化
switch (m) {
case 2:
console.log('28天')
break
case 4:
case 6:
case 9:
case 11:
console.log('30天')
break
default:
console.log('31天')
}
例子2
var value = 86;
switch (true) {
// case 值其实也可以是表达式，只需要switch表达式与case中表达式是完全相等就可以
case value > 90:
console.log("a");
break;
case value > 80:
console.log("b");
break;
case value > 70:
console.log("c");
break;
case value > 60:
console.log("d");
break;
default:
console.log("e");
}
状态机
var state="play";
state="run"
switch(state){
case "play":
console.log("执行打击的动画");
break;
case "walk":
console.log("执行行走的动画");
break;
case "run":
console.log("执行跑步的动画");
break;
case "jump":
console.log("执行跳跃的动画");
break;
default:
console.log("执行站立的动画")
}
var states = "play";
// 如果states是play或者run或者walk，执行打印"动画"这个文字
// 如果stats是jump执行"跳出"打印
// 其他默认执行 "继续"打印
// default不需要加break，有要求必须每个switch后面都有default
// 就是为了防止每个条件都不满足的情况下执行default
switch (states) {
case "play":
case "run":
case "walk":
console.log("动画");
break;
case "jump":
console.log("跳出");
break;
default:
console.log("继续");
}
if 与switch 小案例
在上述代码的基础上, 再增加一个输入, 让用户输入一个年份, 根据年份决定 2 月有多少天
var m = prompt("请输入一个月份") - 0
var y = prompt("请输入一个年份") - 0
switch (m) {
case 2:
// 根据用户输入的年份 决定输出 28 还是 29
if (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
.1 四年一润, 百年不润 条件1
year % 4 === 0 && year % 100 !== 0
2 四百年补一润 条件2
year % 400 === 0
console.log('29')
} else {
console.log('28')
}
break
case 4:
case 6:
case 9:
case 11:
console.log('30天')
break
default:
console.log('31天')
}
三元表达式 (三元运算符/三目运算符/问号冒号表达式)
*
* 也是分支语句的一种, 对 if 语句的一个优化
*
* 语法: 条件 ? 条件为真的时候执行的代码(只有一行) : 条件为假的时候执行的代码
*/
/**
* 假设一个变量 box 他的值可能是 1 也可能是 2
*
* 我们要根据 这个变量的值 去创建一个新的变量, 内部的值存储为 成功或者失败
*
* 我们自己约定 如果值 === 1 那么为成功, 其他情况 为失败
*/
// if 语句完成上述需求
// var box = 2
// var msg;
// if (box === 1) {
// msg = '成功'
// } else {
// msg = '失败'
// }
// console.log(msg)
// 利用 三元表达式优化上述的 if 语句
var box = 1
// var msg = 条件 ? 条件为真的时候执行的代码(只有一行) : 条件为假的时候执行的代码
var msg = box === 1 ? '成功' : '失败'
console.log(msg)
分支语句案例
-
一辆出租车, 起步价(2公里内)7元, 超过2公里的按照每公里3元收费, 请根据路程计算费用
* * 逻辑: * 用户输入一个路程 * 判断用户的路程是否超过 2公里 * 超过 * 7元 + (总路程 - 2公里) * 3 * 不超过 * 7 元 */ var n = prompt() - 0 if (n > 2) { // 总路程超过了 起步价范围, 所以需要计算一个总价 console.log(7 + (n - 2) * 3) } else { // 路程不超过 2 公里, 按照 起步价收费 7元 console.log(7) }
2. 根据性别和体重计算献血量
* 女性: 体重不超过 50kg 的献血 200毫升, 否则 250毫升
* 男性: 体重不超过 60kg 的献血 250毫升, 否则 300毫升
逻辑:
1. 有两个输入框 收集用户输入的 性别和体重
约定: 性别输入的内容为 男/女
2. 判断为男性还是女性
3. 确定了性别后, 再次判断 体重
*/
var s = prompt('输入性别')
var t = prompt('输入体重') - 0
// 外层分支语句用于 区分 性别
if (s === '女') {
// 内层的分支语句用于 区分体重
if (t < 50) {
console.log('200毫升')
} else {
console.log('250毫升')
}
} else {
// 内层的分支语句用于 区分体重
if (t < 60) {
console.log('250毫升')
} else {
console.log('300毫升')
}
}
3. 居民用电分为 3 个梯度, * 每月用电量为 150 千瓦时以下时, 每千瓦时收费 1元; * 151---400 这个区间收费为 2 元; * 401千瓦时以上部分为 3 元 * 当用户输入用电量时, 计算出所需支付的电费
逻辑:
1. 用户输入用电量
2. 判断 用户的用电量属于那个区间
150 及以下
n * 1
151---400 注意第二区间点包括151
150 * 1 + (n - 150) * 2
401开始 包括401
150 * 1 + (400 - 150) * 2 + (n - 400) * 3
*/
var n = prompt() - 0
if (n <= 150) {
// 用电量 不超过 150, 此时所有用电量都是 1元1度
console.log(n * 1)
} else if (n > 150 && n < 401) {
// 用电量超过了 150, 但是不超过 400, 计算的时候 这个用电量中 有 150度是1元的, 剩下的是2元1度
console.log(150 * 1 + (n - 150) * 2)
} else {
/**
* 用电量 超过了 400 度
* 但是 内部有 150 度是1元1度
* 还有 (400 - 150) 度是2元1度
* 剩下的才是 3元1度
*/
var box = 150 * 1 + (400 - 150) * 2 + (n - 400) * 3
console.log(box)
}
