运算符
运算符也被称为操作符，用来实现赋值，比较及执行算数运算等功能的符合
javascript常见的运算符
- 算数运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
- 递增与递减运算符
算数运算符
用来进行两个变量或值的算术运算
<script>
// 算数运算符包括加减乘除 取余等等
console.log(1 + 1);
console.log(2 - 1);
console.log(1 * 6);
console.log(6 / 3);
console.log(6 % 3);
// 在算数运算符中 浮点数的精度会产生细微的差距，不要拿两个浮点数相比较
console.log(0.1 + 0.2);
console.log(0.7 * 100);
console.log(0.1 + 0.2 == 0.3)
</script>
注意事项
- js中，不能直接比较两个浮点数
- js的运算顺序中，先算乘除，后算加减，有小括号先算小括号
如何判断一个数是否可以被整除？
余数为0 说明这个数可以被整除
表达式
由数字 运算符 标识符组成的式子便叫做表达式
返回值
表达式最终都有一个结果返回给我们，这个结果便叫做返回值
var num = 1 + 1
上述代码中，这样的式子便叫做表达式，右边的公式计算完毕后有一个返回值，这个返回值赋值给左边的num
一元运算符
一元运算符分为前置型与后置型，主要是为了实现变量的自增与自减操作，必须与变量搭配使用。
前置型运算符
前置型运算符 先自增（自减） 再进行运算
前置自增运算符：先自增，再进行运算
<script>
//前置型运算符 先自增（自减） 再进行运算
var num = 10;
++num;
console.log('num的值：', num) //11
var num2 = ++num + 5;
console.log('num2的值：', num2) //17
</script>
前置自减运算符：先自减，再进行运算
<script>
//前置自减运算符
var num = 20;
--num;
console.log('num的值：', num); //19
var num2 = --num + 5;
console.log('num2的值', num2); //23
</script>
后置型运算符
先原值运算，再进行自增或自减操作
后置自增运算符：先原值运算，再进行自增xi
<script>
//后置型自增运算符 先原值运算，再自加
var num = 2;
num++;
console.log('num的值：', num); //3
var num2 = num++ + 2;
console.log('num2的值：', num2) //5
var num3 = num++ + 1;
console.log('num3的值：', num3) //5
</script>
后置自减运算符：先原值计算，再进行自减
<script>
//后置自减运算符 进行原值计算 再自增
var num = 6;
num--;
console.log('num的值:', num); //5
var num2 = num-- + 1;
console.log('num2的值为:', num2); //6
var num3 = num-- + 1;
console.log('num3的值：', num3); //5
</script>
一元运算符之综合练习
<script>
//第一题
var a = 5;
++a;
var b = ++a + 6;
console.log('b的值:', b); //13
//第二题
var c = 10;
c++;
var d = c++ + 2;
console.log('d的值:', d); //13
// 第三题
var e = 10;
var f = e++ + ++e; //首先e++是10 然后自增1 于是++e变成12 所以值为22=10+12
console.log('f的值:', f) //22
</script>
一元运算符之总结
- 一元运算符是为了简化代码操作，主要是为了使变量实现自增或自减操作
- 单独使用时没有任何区别
- 前置自增运算符和前置自减运算符：先自增（自减），再运算
- 后置自增运算符和后置自减运算符：先原值运算，再自增（自减）
- 实际开发过程中，使用后置运算符较多
比较运算符
比较运算符（关系运算符）主要是为了比较两个数据所使用的运算符，会返回一个布尔值，作为比较运算的结果
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//比较运算符 是用来进行两个数据的比较所使用的运算符 得出的结果为布尔值
console.log(5 > 3) //true
console.log(6 < 7) //true
console.log(6 >= 5); //true 解析：因为6大于5 所以正确
console.log(7 <= 8); //true 解析：因为7小于8 所以正确
console.log(8 == '8') //true 解析：比较值而不比较数据类型
console.log(8 != 9); //true
console.log(8 !== 8) //false
console.log(8==="8") //false 解析：===要求数据类型和值都相等
</script>
</head>
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，其结果也是布尔值，在实际开发中，多用于多个条件的判断
<script >
/*
* 逻辑运算符：是用来比较布尔值运算的运算符，其结果也是布尔值，开发中常用于多重条件的判断
*/
console.log(5 > 3 && 3 < 5); //true
console.log(5 < 3 && 3 < 7); //false
console.log(5 < 7 || 5 < 3); //true
console.log(5 < 7 && 5 < 3) //false
console.log(!true) //false
console.log(!false) //true
</script>
逻辑运算符之总结
- &&：两边都为true,其结果才会为true,两边有一个false,其结果也为false
- || :两边都为false，其结果才会为false.两边有一个true，其结果也为true;
- !:取反 ！true的结果为false
逻辑运算符之总结
<script>
var num = 7;
var str = "我爱你，亲爱的中国"
console.log(num > 5 && num <= str.length) //true
console.log(num < 5 && num <= str.length) //false
console.log(!(str.length > 11)) //true
console.log(!(num > 5 || str.length == num)) //fase
</script>
短路效果
当有多个表达式（值）的时候，左边的表达式值能确定的情况下，将不再进行右边表达式的值运算。
逻辑中断之逻辑与
<script>
console.log(234 && 456); //456
console.log(0 && 440) //0
console.log('' && 254 && 546); //""
</script>
逻辑中断之逻辑或
语法：表达式1 || 表达式2
- 表达式1为真的话 则返回表达式1的值
- 表达式1如果为假的话，返回表达式2的值 （可以跟逻辑与相比较记忆）
<script>
console.log(234 || 456); //234
console.log(0 || 440) // 440
console.log('' || 254 || 546); //254
</script>
赋值运算符
将数据赋值给变量的运算符，简称赋值运算符
<script>
var num = 20;
num += 5;
console.log(num); //25
var num2 = 6;
num2 *= 6;
console.log(num2) //36
var num4 = 20;
num4 %= 4;
console.log(num4) //0
</script>
运算符的优先级
- 一元运算符中的！的优先级很高
- 逻辑与比逻辑或等级要高
运算符顺序之练习（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习1</title>
</head>
<body>
</body>
<script>
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
/*
解析：4 >= 6 || '人' != '阿凡达' && true && true
false|| true && true && true
true
结果：true
*/
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22')
/*
* 解析：5==num/2&&(2+2*num).toString()==='22'
5==num/2&&'22'==='22'
5==5&&'22'==='22'
true
结果：true
*/
</script>
</html>
运算符顺序之练习（2）
<script>
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a)
/*
解析：a=false && true && false
结果：a= false
*/
var b = 3 <= 4 || 3 > 1 || 3 != 2
console.log(b);
/*
解析：b= 3 <= 4 || 3 > 1 || 3 != 2
b= 3 <= 4 || 3 > 1 || true
b= true || true || true
结果：true
*/
var c = 2 === "2"
console.log(c);
/*
解析：=== 用来比较数据类型和值是否相等 所以为false
*/
var d = !c || b && a;
console.log(d)
/* 解析： d = !c ||b && a;
d = true||b && a;
d = true||true && false;
d= true
结果为true
*/
</script>
流程控制语句
简单而言，就是控制代码顺序按照不同的结构顺序去执行
流程控制语句：顺序结构 分支结构 循环结构
流程控制语句之顺序结构
在javascript中，代码的执行顺序是从上往下依次执行的，这种执行顺序便被称为顺序结构
分支结构
在代码从上往下的执行过程中，按照不同的条件，执行不同路径上的代码，从而得到不同的结果。
javascript中提供两种分支结构
- if语句
- switch语句
if语句
语法
if(条件表达式) {
//执行的语句
}
注意：条件表达式若为真，则执行语句，条件表达式若为假，则不执行语句
<script>
if(true) {
console.log('条件表达式为真，则执行语句');
}
if(false) {
console.log('条件表达式为假，则不执行语句');
}
</script>
if双分支语句
语法
if(条件表达式) {
//执行的语句
}else {
//执行的语句
}
注意事项
- if与else里面的语句只能执行一个
- else后面没有{}
if双分支语句之网吧案例
要求：弹出一个输入框，用户输入自己的年龄，如果大于等于18岁，提示可以进入网吧，如果小于18，则提示用户不能进入网吧
思路如下
- 1.弹出输入框，把用户输入的值保存为变量
- 2.利用if语句进行判断，根据用户的年龄而执行不同的语句。
<script>
var userName = Number(prompt("请输入年龄")); //Number（）:将字符串类型转换成Number类型
if (userName >= 18) {
alert("恭喜你，可以进入网吧")
} else {
alert("对不起，你不能进入网吧")
}
</script>
if双分支语句之判断闰年与平年
提示：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
思路如下
- 1.用户输入年份，把用户输入的值以变量的形式保存起来
- 2.利用if语句，根据不同的条件而判断闰年及平年
<script>
var userName = Number(prompt("请输入年份"));
if (userName % 4 == 0 && userName % 100 != 0 || userName % 400 == 0) {
alert("闰年")
} else {
alert('平年')
}
</script>
if多分支语句
场景：适用于多重条件的判断
if(条件表达式1) {
语句1；
}else if(条件表达式2) {
语句2；
}else if(条件表达式3) {
语句3；
.....
}else {
//以上代码不成立执行此处代码
}
注意事项
- 根据不同的条件，而执行不同的代码路径，并最终得到结果，是个多选一的过程
- else if后面加条件表达式，而else后面没有条件表达式
if多分支语句之成绩案例
<script>
var source = Number(prompt("请输入分数"))
if (source >= 90) {
alert('A')
} else if (source >= 80) {
alert('B')
} else if (source >= 70) {
alert('C')
} else if (source >= 60) {
alert("D")
} else {
alert('E')
}
</script>
三元表达式
三元表达式可以做一些简单的条件判断，由三元运算符组成的式子叫做三元表达式
语法如下
条件表达式？表达式1：表达式2 条件表达式若为真，则返回表达式1的值，条件表达式为假 则返回表达式2的值
三元表达式之补0
必须使用三元表达式
思路如下
- 1.弹出一个输入框，用户输入0~59之间的数字
- 2.0~9之间的数字前面补0，大于10的数字不做任何操作
- 3.用变量接受一个返回值，输出（程序内部处理）
<script>
var userName = Number(prompt("请输入1~59之间的数字"))
var result = userName <= 9 ? '0' + userName : userName;
alert(result)
</script>
switch语句
switch语句属于多分支语句，执行不同的条件语句得到不同的结果，是多选一的过程。
注意事项
- if多分支语句只要用于判断，而switch语句主要适用于特定值匹配
- switch：开关。 case：选项。
- switch语句后面变量的值与case后面的值且是全等的关系，则执行case后面的语句
- 匹配不上值，则执行default后面的语句
- switch语句后面的表达式是变量。
- 不要忘记写break,否则会一直执行。
switch语句之水果案例
要求：用户输入自己需要的水果，则屏幕弹出水果的价格是多少钱一斤
思路如下
- 弹出一个输入框，用户需要自己的想要的水果
- 把用户输入的值用变量的形式保存起来，当switch后面的条件表达式的值匹配上case后面的值，则弹出相对应的水果价格
- 不要忘记break,否则程序会一直执行下去。
<script>
var fruit = prompt('请输入需要的水果');
switch (fruit) {
case "苹果":
alert("苹果3.5/斤");
break;
case "香蕉":
alert("香蕉5.5/斤");
break;
case "榴莲":
alert("榴莲10.5/斤");
break;
default:
alert("找不到此水果")
}
</script>
switch语句和if else if语句的区别
- switch用于特定值匹配，而if else语句用于条件判断
- switch确定值后直接执行到程序内部，而if语句还要依次判断（执行效率稍低）
- 分支比较少的情况下，用if else效率较高