day3
运算符
算术运算符
| 运算符 | |
|---|---|
| 加 | + |
| 减 | - |
| 乘 | * |
| 除 | / |
| 求余/取整 | % |
注：求余=取模 % 获得整数
算法是 ：先除法运算 ，计算除法元素后 ，显示获取剩下的余数，如果能除法能除完，会显示0。
如果一行 内出现多个算术运算符 ，
先乘除 后加减 ，如果有括号 就先算括号里的。
如果一行内确实有多个算术运算符， 都建议按照自己的想法来加括号。
写法示例：
<script>
// 算术运算符 加减乘除 求余 取模
let num1 =10;
let num2 =2;
// 加法 +
console.log(num1 + num2);
// 减法 -
console.log(num1 - num2);
// 乘法 *
console.log(num1 * num2);
// 除法 /
console.log(num1 / num2)
// 求余=取模 % 获得整数
// 先除法运算 计算除法元素后 获取剩下的余数，如果能除法能除完，会显示0
console.log(10 % 5);
console.log(10 % 3)
// 如果一行 内出现多个算术运算符
// 先乘除 后加减 ，如果有括号 就先算括号里的。
console.log((10 + 2) / 4);
// 如果一行内确实有多个算术运算符， 都建议按照自己的想法来加括号
console.log((2 + 10) + (5 * 8) / 2);
</script>
圆的面积
在js中如果计算 圆的面积：
-
圆的面积： π * r的平方 ；
-
在js里 Math.PI 代表 π
在js中计算圆的面积 示例：
<script>
// 圆的面积： π * r的平方
// 在js里 Math.PI 代表 π
// 在js中计算圆的面积
let r = prompt("请输入圆的半径");
console.log('圆的面积是' + Math.PI * r * r);
</script>
赋值运算符
赋值运算符 ：+= ， *= ， /= ，-=， %=
一元运算符
自增 ++ 作用：让变量的值+1；
自减 -- 作用：让变量的值-1；
使用场景：经常用于计数来使用。
自增运算符的用法
前置自增： ++在前面 先自加，再运算；
后置自增： ++在后面 先不算++， 直接算后面的算术就行， 但这个时候如果问i的数值是多少的话，是i=i++ 就是i+1=2（假如i是1的话）。后面如果算术还有带 i 的话就是按 i 是2的数值去算。
注意：
-
前置自增和后置自增 单独使用没有区别。
-
一般开发中我们都是独立使用。
-
后面后置自增会使用相对较多。
示例：
<script>
// ++在前面 先算++ 在加后面的数字
// let i = 1;
// console.log(++i + 2) 结果是4
// ++在后面 先不算++， 直接算后面的算术就行， 但这个时候如果问i的数值是多少的话，是i=i++ 就是i+1=2。后面如果算术还有带i的话就是按2的数值去算
let i = 1;
console.log(i++ + 2); //显示结果是3
console.log(i) //i显示是2
</script>
比较运算符
比较运算符 作用 ： 比较两个数据大小，是否相等;
示例使用场景：商城里的优惠卷，满多少额度减
| 符号 | |
|---|---|
| 大于 | |
| < | 小于 |
| == | 等于（只比较结果，不判断类型）如 1 ==‘1’ true |
| >= | 大于或者等于 |
| <= | 小于或者等于 |
| != | 不等于 ，不会判断类型 |
| === | 判断相等 ，判断类型也判断值 |
| !== | 不相等，判断类型也判断值 |
细节总结:
- 比较后显示的结果 其实是一个布尔类型，显示 （对/真）true或者（错/假）false;
- 字符串比较，是比较字符对应的ASCII码（下面有表格图片），从左往右依次比较，比较的少，了解就好。
- 尽量不要比较小数，因为小数有精度问题。
- 比较一般都是对数字和数字的比较,如果是字符串去做大小的比较 判断的标准是把字符串转换成数字，转成数字再进行比较;
- 不能以为两者代码一样就是相等，不是数字比较不相等,如：console.log(NaN === NaN) ，NaN 不等于任何值，包括它本身；
代码示例：
<script>
// 比较后显示的结果 其实是一个布尔类型，显示 true或者false
console.log(3 > 10); //打印出来的结果是 false
console.log(3 > 1); //打印出来的结果是 false
console.log(3 < 10); //打印出来的结果是 true
console.log(3 > 3); //打印出来的结果是 false
console.log(3 <= 3); //打印出来的结果是 true
// 判断是否相等要用两个=号
console.log(3 == 2) //false
console.log(3 == 3) //true
// 判断3 不等于5
console.log(3!=5) //true ！=不等于
// 数字和字符串比较
console.log(3 == "3") //true 因为两个 == 只会判断值，不会判断类型
console.log(3 === "3") //flase 3个等于号，即判断值 又判断类型，所以的flase
console.log(3 === 3) //true
console.log(3 != 3) //flase
console.log(3 != "3") //flase
console.log(3 !== "3") //true
// 比较一般都是对数字的比较
// 如果是字符串去做大小的比较 判断的标准是把字符串转换成数字，转成数字再进行比较
console.log('A' > 'B')
console.log(NaN === NaN) ;//flase 不能以为两者代码一样就是相等，不是数字比较不相等
// js出来小数点 有问题 后面会补充
console.log(0.4 + 0.2 ===0.6) //flase
// 类型转换
console.log(4 > '3') // true
console.log(4 > Number("3")); //true
</script>
逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
| ！ | 逻辑非 | 取反 | true变false，false变true | 真变假，假变真 |
<script>
// 有个数据 大于5 而且 小于10
let num = 6;
// 并且&&
//一假则假
console.log(num > 5 && num < 10); //true
console.log(num > 5 && num < 4); //false 其中一个假则假
// 或者||
// 一真则真
let money = 10;
console.log(money === 10 || money === 0); //true
// 非 取反 ！
// 只要加上！就是取反的结果。
</script>
逻辑运算符的短路
短路运算符的运算规则：
短路只存在于&& 和 || 中 当满足一定条件会让右边代码不执行。
运算结果：无论是&& 还是 || ，运算结果都是最后被执行的表达式值，一般用于变量赋值。
示例：
<script>
// 工作中常见的写法
//示例：如果下雨了就去吃海鲜
let rain = true //成立
//let rain = false 不成立 ，下面的右边不会执行
// 左边若成立了 右边就会执行
// 如果左边不成立， 右边就不会执行
rain && console.log("下雨 去吃海鲜~")
</script>
课堂案例
<script>
// 要求： 1.获取用户的一个输入
// 2.判断是否满足某些条件
// 1.这个数字 是4的倍数；
// 2.而且 不是100的倍数。
let num =prompt("请输入数字")
console.log((num % 4 == 0) && (num % 100 !== 0) )
</script>
运算符优先级
表达式和语句
分支语句
程序三大流程控制语句
-
以前我们写代码，从上往下执行，这种叫做顺序结构。
-
有的时候要根据条件选择执行代码，这种叫做分支结构。
-
某段代码被重复执行，就叫循环结构。
分支语句可以让我们有选择性的执行想要的代码。
if 语句
if语句有三种使用：单分支，双分支，多分支语句。
三种使用的示例：
if 单分支：
<script>
/*
1.获取用户输入的分数
2.分数做判断
如果大于700，录取，
满足条件弹窗恭喜，未满足的话没有提示弹窗
*/
let score = +prompt("请输入您的分数")
// if 单分支
if (score > 700){
alert('恭喜你被录取拉~~~~')
}
</script>
if 双分支语句：
<script>
/*
需求
如果 分数大于700 可以去蓝翔
否则 只能去北大
*/
// if双分支
// 最好加+号 转换一下数字类型
let score = +prompt("请输入您的分数")
if(score >700){
alert('恭喜你被蓝翔录取'); //这里面写满足条件的情况下给的弹窗
}else{
alert('很遗憾,你只能去北大'); //这里面写不满足条件的情况下给的弹窗
}
</script>
多分支语句：
<script>
/*
需求 安排星期几吃什么
1 煲仔饭
2 砂锅粥
3 小龙虾
4 烧烤
5 炸鸡
剩下 吃白饭
*/
let day = +prompt("今天星期几？")
// 多分支语句
if (day === 1){ //用户输入1的话
console.log("吃煲仔饭") //控制台打印显示煲仔饭
} else if(day === 2) {
console.log("吃砂锅粥")
}else if(day === 3) {
console.log("吃小龙虾")
}else if(day === 4) {
console.log("吃烧烤")
}else if(day === 5) {
console.log("吃炸鸡")
}else{ //这个是指除以上1-5以外的数字
console.log("吃白饭")
}
</script>
三元运算符
他是比 if 双分支更简单的写法，有时候也叫三元表达式。
符号 ： ？与：配合使用。
语法：
<script>
/*
条件 ？ 满足条件时执行的代码
： 不满足条件时执行的代码
*/
let num1 = 10;
let num2 = 9;
// 三元表达式
// 满足条件了 显示num1 10
// 不满足条件 显示num2 9
num1 > num2?console.log(num1) :console.log(num2)
</script>
课堂案例
简易计算器
<script>
let num1 = +prompt("请输入数字1")
let num2 = +prompt("请输入数字2")
let operator = prompt("请输入 + - * / 任意一个") //这个是操作符
// 当用户输入的操作符不一样,所执行的代码分别是
// + 数字1 加 数字2
// - 数字1 减 数字2
// * 数字1 乘 数字2
// / 数字1 除 数字2
if (operator === '+'){
console.log(num1 + num2);
} else if(operator === '-'){
console.log(num1 - num2);
}else if(operator === '*'){
console.log(num1 * num2);
}else if(operator === '/'){
console.log(num1 / num2);
}
</script>
数字补0案例
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
background-color: red;
width: 200px;
height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
border-radius: 5px;
}
div span{
background-color: black;
font-weight: 700;
}
</style>
</head>
<body>
<!-- 数字补0案例 -->
<script>
let num = +prompt("请输入时间")
num < 10 ?document.write(`<div>
<h3>22：00点场 距结束</h3>
<span>00</span> ：<span>02</span>：<span>0${num}</span>
</div> `):document.write(`<div>
<h3>22：00点场 距结束</h3>
<span>00</span> ：<span>02</span>：<span>${num}</span>
</div>`)
</script>
