02 js基础 操作符 流程控制
# 1. 运算符 #
也称操作符,用于实现赋值、比较和执行算数运算等功能的符号
js中常用的运算符:
算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符
# 2.算数运算符 ##
## 2.1 算数运算符概述 ##
运算符 描述 实例
+ 加 10 + 20 = 30
- 减 10 - 20 = -10
* 乘 10 * 20 = 200
/ 除 10 / 20 = 0.5
% 取余数(取模)返回除法的余数9 % 2 = 1
浮点型运算有问题 不能直接拿着浮点数来进行相比较 是否相等
+ - * / 采用数字优先级
# 3.递增递减运算符 #
## 3.1 递增递减运算符概述 ##
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。
在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时, 我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
必须搭配变量配合使用
++num前置自增 就是自加1 类似于 num = num + 1,但是++num写起来更简单
前置
<script> var num = 1; num = num + 1; num = num + 1; console.log(num) //3 // 2.前置递增运算符 ++ 写在变量前面 var age = 10; ++age; //类似age = age + 1 console.log(age) // 3. 先加1 然后返回值 var c = 10; console.log(++c + 10) </script>
后置
<script> var num = 10; num++; //num = num + 1 console.log(num); //1. 前置自增 和后置自增如果单独使用效果一样 //2. 后置自增 口诀:先返回原值 后自加1 var age = 10; console.log(age++ + 10) console.log(age) </script>
#4. 比较运算符 #
## 4.1 比较运算符概述 ##
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 (true / false)作为比较运算的结果。
运算符名称 说明 案例 结果
< 小于号 1<2 true
> 大于号 1>2 false
>= 大于等于号(大于或者等于) 2>= true
≤= 小于等于号(小于或者等于) 3<= 2 false
== 判等号(会转型) 37 == 37 true
!= 不等号 37 != 37 false
=== !== 全等要求值和数据类型都一致 37 === '37' false
# 5.逻辑运算符 #
## 5.1 逻辑运算符概述 ##
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
逻辑运算符 说明 案例
&& "逻辑与",简称"与”and true && false
|| "逻辑或",简称"或”or true | | false
! "逻辑非",简称"非" not ! true
## 5.2 逻辑与&& ##
两边条件都是true 才返回true , 否则返回false
## 5.3 逻辑与|| ##
两边条件都是false 才返回false , 否则返回true
## 5.4 逻辑非! ##
逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false
isOk = !true;
console.log(isOk); // false
## 5.5 短路运算(逻辑中断) ##
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
1.逻辑与
语法:表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个假,则返回表达式1
2.逻辑或
语法: 表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
语法: 表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
# 6.赋值运算符 #
赋值运算符 说明 案例
= 直接赋值 var usrName =我是值';
+=。= 加、减一个数后在赋值 var age= 10; age+=5; // 15
*= /= %= 乘除、取模后在赋值 var age=2; age*=5;// 10
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算数运算符 先*/%后+-
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ,
# 7.流程控制 #
控制代码的执行顺序
有三种:顺序结构、分支结构、循环结构
## 7.1 顺序结构 ##
按照代码的先后顺序,依次执行
## 7.2 分支结构 ##
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(多选一) 得到不同的结果
- if语句
- switch 语句
// 条件成立执行代码,否则什么也不做
if(条件表达式) {
// 成立执行的代码语句
}
判断年龄是否进入网吧
<script> var age = prompt("请输入年龄"); if (age >= 18) { alert('欢迎光临') } </script>
## 7.3 if else语句(双分支语句) ##
// 条件成立执行代码,否则什么也不做
if(条件表达式) {
// 成立执行的代码语句
}else{
//否则执行的代码
}
## 7.4 if else if 多分支语句 ##
// 适合于检查多重条件。
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3; ....
} else {
// 上述条件都不成立执行此处代码
}
# 8. 三元表达式 #
表达式1?表达式2:表达式3;
如果表达式1位true,则返回表达式2的值,如果表达式1为false,则返回表达式3的值
<script> // var age = prompt("请输入年龄"); // if (age >= 18) { // alert('欢迎光临') // } else { // alert('走开') // } var age = prompt("请输入年龄") age >= 18 ? alert('欢迎') : alert('走开') </script>
# 9. 分支流程switch 语句 #
## 9.1 语法结构 ##
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值 的选项时,就可以使用 switch。
switch( 表达式 ){
case value1: // 表达式 等于 value1 时要执行的代码
break;
case value2: // 表达式 等于 value2 时要执行的代码
break;
default: // 表达式 不等于任何一个 value 时要执行的代码
}
- switch :开关 转换 , case :小例子 选项
- 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
- 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
- switch 表达式的值会与结构中的 case 的值做比较
- 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码 执行结束
- 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码
- 如果case语句中 没有break,则继续执行下一个case
switch水果查询
<script> var fruit = prompt("输入查询的水果") switch (fruit) { case '苹果': alert("苹果一斤1块") break; case '栗子': alert("LLLLL"); default: alert("查无") } </script>
# 10.比较switch语句 与if else if 的区别 #
switch语句 通常处理case 比较确定值的情况,if则更加灵活
分支较少时用if 效率高
分支多时 用switch 结构清晰