JS流程控制
学习目标
1.掌握算术、比较、逻辑运算符，为程序“能思考”做准备。
2.掌握分支语句。
3.掌握循环语句。
运算符
一、算术运算符
本质：也就是在代码内进行数字的加减乘除和求余的计算
优先：先乘数后加减
代码：
<script>
// 算术运算符
let num1 = 10,
num2 = 2
console.log(num1 + num2) /* 12 */
console.log(num1 - num2) /* 8 */
console.log(num1 * num2) /* 20 */
console.log(num1 / num2) /* 5 */
// 取余数 整数除不尽 剩下就是余数
// 作用：用于判断是否整数等判断问题
console.log(num1 % num2) /* 0 */
</script>
余数：也就是不能被整除的，剩下的数叫做余数； 一个数除以另一个数，要是比另一个数小的话，商为0，余数就是它自己。
建议：如果一行有有个算术运算符 建议按照自己的想法加括号
案例：求圆的面积
语法：在JS中，π有专属的代码：Math.PI
求圆的面积：Math.PI * r * r
代码：
<script>
// 圆的面积：π r * r
let r = prompt('请输入半径')
console.log('圆的面积为'+Math.PI * r * r)
document.write(`圆的面积为：${Math.PI * r*r}`)
</script>
二、赋值运算符
思考：在以前学过的知识中，如何更新变量值 让变量+1？
解决方法：
<script>
// 在以前 我们要更新变量 ＋ 1怎么做？
let num = 10
num = num + 1
console.log(num)
</script>
缺点：这样写不够间接 通过赋值运算符 能更间接
语法：例如+= （其他乘除也是一样的用法）
代码：
<script>
// 现在全新简写方法 +=1 注意：将等号后面的值赋给左边，左边必须是变量！
// 可以这样理解 ： 把加多少？ （+ = 1） 赋给左边变量 （num1）
let num1 = 20
num1 += 1
document.write(`我是全新写法${num1}`)
</script>
三、一元运算符（难点）
思考：之前我们让变量加一，通过+=1 来计算。其实还可以更加简便写法
一元运算符语法：
自增：
符号：++
作用：让变量值＋1
自减：
符号：--
作用：让变量值0-1
应用场景：经常用于计数，比如进行了10次操作，用它来计算 我们进行了多少次
一元运算符的用法：
1.前置自增
2.后置自增
代码：
<script>
// 一元运算符
let i = 1
// 自增 1
i++
++i
// 自减1
// i--
// --i
console.log(i)
// 前置自增 理解为先让num变量 自增 再执行下一步+2
let num = 2
// console.log(++num + 2)
// 可以分解为 先更新num 再运算后面一起加
num = num + 1
console.log(num + 2)
// 后置自增 理解为只算单独变量计算之间，然后在进行下一步自增
let num2 = 3
console.log(num2++ + 1)
// 分拆：只算 num2 + 1
// 第二步 再 执行 num2 + 1 注意：这一步可以理解为计算完之前的num2+1再更新NUM2的值
</script>
理解难点：
主要是后置自增，它并不会首先执行，而是先计算变量本身与数字的运算，得出一个当前值，然后再执行第二步的 自增。可以理解为我先不管这个自增，大家先计算好值，然后计算完毕之后，再更新这个变量的自增。
案例题：
代码：
<script>
let i = 1
console.log(i++ + ++i + i)
// 首先注意 代码是从上到下 从左到后的顺序进行运算的
// 先执行 i++ 先只算变量值 所以i还是1 不过更新了i值 i=i+1
// 第二个 ++i 这个时候i的值为更新后的I+1=2 所以就是++2 等于 3
// 第三个 i 这个时候i的值是3
// 最终就是 1+3+3 = 7
</script>
</body>
理解难点：
1.JS代码是有计算顺序的，从左往右，从上到下计算的
2.第一个i++ ，意思也就是我先计算本身 所以 输出的值还是1 不过 在第二步已经 自增了i的值
3.到第二个++i，这个时候因为前面偷偷自增了i的值，所以这里的++i 就是++2 所以输出值为3
4.此时的i又因为++i=3 所以i值此时为3
总结：在工作中 基本都是独立使用 独立使用没有区别，此题目的只是单纯测试概念使用 不会故意弄复杂
四、比较运算符
作用：比较两个数据大小，类型是否相等
语法：
代码：
<script>
// 大于小于比较
console.log(3>10)
console.log(3 >= 3)
// 两个等于号 比较值是否相同，不比较类型 会自动转换
console.log(3 == "3" )
// 三个等于号 判断值也判断类型，工作中常用！比较严谨
console.log(3 === '3')
// 感叹号加一个等于号，判断值是不是不相等
console.log (3 != 3)
// 加两个等号，判断值不是不是不全等 包含数值
console.log( '3' !== 3 )
// 特殊情况
// 字符串之间的比较,有代码表 了解即可
console.log('a'>'b')
</script>
注意点：
1.NaN 不等于任何的值，包括本身
2.尽量不要用小数，会有精度问题 导致判断不能理解
例如在JS中计算0.4+0.2会等于
所以当比较0.4+0.2 === 0.6 时，会输出 false
3.不同类型之间比较会隐式转换
<script>
// 输出为false 这两个值不等于任何数
console.log(NaN === NaN)
// 小数点问题
console.log(0.4+0.2)
// 类型转换 会发生隐式转换
console.log(4 > '3')
</script>
五、逻辑运算符
思考：如何判断一个数据大于五且小于十
错误写法：5<数据<10；
在JS中要使用逻辑运算符
语法：
代码：
<script>
let num = 1
// && 表示并且，左边满足了 右边也要满足
console.log(num>0 && num<8 )
// || 表示或者，左边不满足 没事 看右边 有一个满足就可
console.log(num<1 || num>0)
</script>
逻辑运算符短路问题
短路：只存在于&& 和 || 当满足其符号条件，后面则不会执行
原因：因为通过代码特性，如果在左边已经满足，就没有必要执行后边，浪费性能
代码：
<script>
// &&短路
// 显示为false 因为并且 左边都对了，可是最后不对则错
console.log(3>2 && 4>2 && 3>1 && 4>2 && 1>2)
// 第一个已经错了 ，所以后面就不在执行， 短路特点
console.log(0>2 && 4>2 && 3>1 && 4>2 && 1>0)
// ||短路
// 为ture 因为第一个不对 就算第二个 对了 后面就不计算了
// 只要一个对 ，后面不计算 不对继续找 没有就false
console.log(3>7 ||3>1 || 4>1 || 3>9 )
// 在工作中项目
// 如果下雨 就执行去 用&& 满足执行用
let rain = true
rain && console.log(`去`)
// 如果不下雨 就打球 用|| 不满住执行用
let Norain = false
Norain || console.log(`去打球`)
</script>
拓展点：
&&和|| 应用于 运算结果时是怎样执行：不管是哪一种，运算结果都是最后被执行的表达值，也就是后面的值。它一般是一个变量赋值。
<script>
//1. let run = 10 > 8 && 8 < 9 输出为false
//当要判断整一大行代码的结果 就用短路 来判断最后执行结果
let run = 1 > 0 && 30
</script>
注意点：
1.工作中满足就执行用&&
2.不满住就执行用||
3.undefined null 0 "空字符串" false本身 NaN转换布尔类型都是 false
逻辑运算符案例：判断一个数 是4的倍数 且不是 100的倍数
<script>
let num = +prompt('请输入一个数')
// 判断一个数 是4的倍数 且不是 100的倍数
console.log(num % 4 == 0 && num % 100 !== 0 )
/* 总结：
1.判断是逻辑与 还是 逻辑或
2.当前几个判断条件 */
</script>
拓展：
b / a =被除数 / 除数 =b 能被 a整除= a 整除 b
逻辑运算符优先级
语句
表达式和语句
表达式：表达式是计算一个值 如 3+4
语句：语句是填写一个代码 来自行运行某种程序 如alert（）
某些特殊情况，也可以把表达式理解为语句 因为也是在计算结果
分支语句
分支语句的三大流程控制程序：
1.从上往下 按顺序走 叫顺序结构
2.根据条件分支进行程序 叫分支结构
3.被重复使用，叫循环结构
分支语句
1.if分支语句
用法：if分支语句分为单分支，双分支，多分支
单分支语法：
<!-- 高考成绩高于700分 恭喜加入黑马 -->
<script>
let num = +prompt('请输入分数')
if (num > 700) {
document.write('恭喜你加入黑马')
}
</script>
双分支语法：
<script>
let boy = +prompt('考试分数')
if (boy > 700){
alert('黑马我来了')
}else{
document.write(`北大我来了`)
}
</script>
多分支语法：
代码：
<script>
let day = Number(prompt(`今天星期几？`))
if (day===1||`星期${day}`) {
alert(`吃猪脚饭`)
}else if(day===2||`星期${day}`) {
alert(`吃黄焖鸡`)
}else if(day===3||`星期${day}`) {
alert(`吃生蚝`)
}else if(day===4||`星期${day}`) {
alert(`吃烤全羊`)
}else if(day===5||`星期${day}`) {
alert(`吃满汉全席`)
} else {
document.write(`你别吃了`)
}
</script>
注意点：括号内如果不是布尔类型，会隐式转换成布尔类型
2.三元运算符
作用：其实和if双分支是相似的写法，不过此种写法更简便
语法：？： 问号表示条件 然后写满足的执行条件 中间写双引号表示否者 后面写不满足执行的条件
代码：
<script>
// 与if双分子类似，不过更加简便
// 三元表达式： “？ ：”
let num1 = 10,
num2 = 20
num1 > num2 ? console.log(num1) : console.log(num2)
</script>
运用三元运算符案例：
案例一：
代码：
<script>
let num1 = prompt(`请输入第一个值`)
num2 = prompt(`请输入第二个值`)
num1>num2 ? document.write(num1) : document.write(num2)
</script>
案例二：
代码：
<script>
let num = prompt(`请输入数值`)
num < 10 ? document.write(`0${num}`):document.write(num)
</script>
老师代码：
<script>
let num = +prompt('请输入时间');
// 2 如果(if或者是三元 条件)
// 条件?执行代码1:执行的代码2
// num < 10?"补0":''
// 0+num = num = 8
// 想让 数字8 前面显示一个 0 转字符串即可
// let strNum = num < 10 ? '0' + num : num;
let strNum;
if (num < 10) {
strNum = '0' + num;
} else {
strNum = num;
}
console.log(strNum);
</script>
解题思路：
1.首先分析需求为先输入。
2.小于10时 用字符串混合变量写法。
3.运用三元表达式。
案例三：
代码：
<script>
let num1 = +prompt(`请输入第一个数字`)
let num2 = +prompt(`请输入第二个数字`)
let math = prompt(`请输入运算符`)
if (math==`+`) {
alert(`您选择的是加号，结果为${num1+num2}`)
}else if(math==`-`) {
alert(`您选择的是减号，结果为${num1-num2}`)
}else if(math==`*`) {
alert(`您选择的是乘号，结果为${num1*num2}`)
}else if(math==`/`) {
alert(`您选择的是除号，结果为${num1/num2}`)
}
</script>
解题思路：
1.还是确定需求 一步一步来 先要三个弹窗。
2.运算符有多种，需要多分支 ，用fi多分支写法。
3.IF中对运算符进行判断。
4.运用好字符串和变量混合写法。
