运算符
运算符:也被称为操作符,是用于实现赋值,比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
- 算术运算符
- 赋值运算符
- 递增和递减运算符(一元运算符)
- 比较运算符
- 逻辑运算符
算术运算符
概念:算术运算符运用的符号,用于执行两个变量或值的算术运算。
| 运算符 | 描述 | 案例 |
|---|---|---|
| + | 加 | 10+20=30 |
| - | 减 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| / | 除 | 10/20=0.5 |
| % | 取余数(取模) | 返回除法的余数9%2=1 |
一个数的余数是0就说明这个数能被整除,这就是%取余运算符的主要用途
注意算术运算符优先级,先乘除,后加减,有小括号先算小括号里面的
表达式和返回值
表达式:是由数字,运算符,变量等以能求得数值的有意义排列方式所得的组合
简单理解:是由数字,运算符,变量等组成的式子。
表达式最终都会有一个结果,返回给我们,我们称为返回值。
代码:
let num = 30,
num1 = 5;
/* 加法运算符 */
num2 = num + num1;
/* 减法运算符 */
num3 = num - num1;
/* 乘法运算符 */
num4 = num * num1;
/* 除法运算符 */
num5 = num / num1;
/* 取模 */
num6 = num % num1;
/* 遵循先乘除在加减 */
num7 = num1 + num * num1;
/* 有括号先算括号里的 */
num8 = (num + num1) / num1
console.log(num2); //35
console.log(num3); //15
console.log(num4); //150
console.log(num5); //6
console.log(num6); //0
console.log(num7); //155
console.log(num8); //7
圆面积的计算(π用 Math.PI)
let r = prompt('请输入圆的半径'),
area;
area = Math.PI * r * r;
console.log(area);
赋值运算符
已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他的赋值运算符:
-
+=
-
-=
-
*=
-
/=
-
%=
let num = 30;
num += 3;
// num = num + 3
console.log(num); //33
num -= 3;
// num = num - 3
console.log(num); //30
num *= 3;
// num = num * 3
console.log(num); //90
num /= 3;
// num = num / 3
console.log(num); //30
num %= 4
// num = num % 4
console.log(num); //2
一元运算符
前置递增运算符
++num前置递增,就是自加1,类似于num = num + 1 。但是++num写起来更简单
使用口诀:先自加,后返回值。
后置递增运算符
num++后置递增,就是自加1,类似于num = num+1,但是num++写起来更简单。
使用口诀:先返回原值后自加。
let i = 10,
a;
/* 前置增加 */
a = ++i + 3;
/*
拆解:
++i为结果 ++1=11
i为变量 i=11
a=14
*/
console.log('a的值为:' + a); //14
let num = 10
/* 后置增加 */
num1 = num++ + 6;
/*
拆解:
结果:num++ =10
变量:num=11
num1=16
*/
console.log('num1的值为:' + num1); //16
let b = 3,
c;
c = --b + 2
/*
拆解 :
结果:--b=2
变量:b=2
c=4
*/
console.log('c的值为:' + c);
let x = 3,
y;
y = x-- + 2
/*
拆解:
结果:x--=3
变量:x=2
y=5
*/
console.log('y的值为:' + y);
比较运算符
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。
| 运算符名称 | 说明 | 案例 | |
|---|---|---|---|
| < | 小于号 | 1<2 | true |
| 大于号 | 1>2 | false | |
| >= | 大于等于号(大于或等于) | 2>=2 | true |
| <= | 小于等于号 | 3<=2 | false |
| == | 等于号 | 37==‘37’ | true |
| === | 全等于 要求值和数据类型都一致 | 37===37 | true |
| != | 不等号 | 37 != 37 | true |
| !== | 不全等 要求值和数据类型都不一致 | 37===’37’ | false |
区别:
| 符号 | 作用 | 用法 |
|---|---|---|
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
| === | 全等 | 判断两边的值和数据类型是否完全相同。 |
//比较后的结果,是一个Boolean 类型 true false
console.log(4 > 5); //false
console.log(4 > 3); //true
console.log(3 < 6); //true
console.log(3 < 8); //false
//判断是否相等 要用两个 "=" 号
console.log(3 == 2); //false
//let num = 4
//num=5;//只写一个等于号 赋值
//console.log(num == 5); //两个等于号才是判断
// != 不等于
//console.log(3 != 5); //true
//数字和字符串比较
console.log(3 == '3'); //true "=="只要值相等,不在乎类型是否相等
console.log(3 === '3'); //false "==="值和数据类型都要相等
console.log(3 === 3); //true
console.log(3 != 3); //false
console.log(3 != '3'); //false
console.log(3 !== '3'); //true
//比较一般都是对数字作比较
//对于字符串数比较,跟多是判断两者是否相等
//console.log('A' === 'B');
// 字符串比较,是比较的字符对应的ASCII码
console.log('A' > 'B'); //65 > 66 false
console.log('2'>'19');//比较的是 ‘2’>'1' true
// NaN不等于任何值,包括它本身
console.log(NaN === NaN); //fasle 不能认为 两者代码一样就相等(不是一个数字)
// 尽量不要比较小数,因为小数有精度问题
let resault = 0.1+0.2; 结果不是0.3,而是0.3000000000000004
Console.log(0.07*100); 结果不是7,而是7.000000000000001
// 不同类型之间比较会发生隐式转换
console.log(4 > '3');
// console.log(4 > Number('3'));
逻辑运算符
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值,后面,开发中经常用于多个条件的判断。
| 逻辑运算符 | 说明 | 案例 |
|---|---|---|
| && | “逻辑与”,简称“与”and | true&&false |
| || | “逻辑或”,简称“或”or | true||false |
| ! | “逻辑非”,简称“非”not | !true |
逻辑与 &&
两边都是true才返回true,否则返回false
//逻辑与&&(两个判断条件为真,结果为true)
let a = 33 > 22 && 44 > 20;
console.log(a);//true
逻辑或 ||
两边都为false才返回false,否则都为true
//逻辑或 ||(两个判断条件为假,结果为false)
let b = 33 > 44 || 22 < 11
console.log(b);//false
逻辑非!
逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如true的相反值是false
let c = false
console.log(!c);//true
短路运算
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以通过确定结果时,就不在继续运算右边的表达式的值;
逻辑与
-
语法:表达式1&&表达式2
-
如果第一个表达式的值为真,则返回表达式2
-
如果第一个表达式的值为假,则返回表达式1
//短路(逻辑与:第一个判断条件为真,继续向后面执行)
let num = 33 > 22 && console.log(true);
let num = 33 > 22 && console.log(true);
逻辑或
-
语法:表达式1 || 表达式2
-
如果第一个表达式的值为真,则返回表达式1
-
如果第一个表达式的值为假,则返回表达式2
//逻辑或短路运算 如果 表达式1 结果为真 则返回的是 表达式1 如果 表达式1 结果为假 则返回 表达式2
console.log(123 || 456); //123
console.log(123 || 456 || 456 + 123); //123
console.log(0 || 456 || 456 + 123); //456
运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算数运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | !== == != === |
| 6 | 逻辑运算符 | 先&& 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
流程控制
在一个程序执行的过程中,各条代码的执行顺序结果都是有影响的,很多时候我们要控制代码的执行顺序来实现我们要完成功能。
简单理解:流程控制就是来控制我们的代码按照什么顺序来执行。
流程控制主要有三种结构,分别是顺序结构,分支结构和循环结构,这三种结构代表三种代码执行顺序。
顺序流程控制
顺序结构程序中最简单,最基本的流程结构,他没有特定的语法结构,程序按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。
分支结构
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码,(执行代码多选一的过程),从而得到不同的结果。
JS语言提供了两种分支结构语句
-
if语句
-
Switch语句
语句
语句可以理解为一个行为,循环语句和分支语句就是典型的语句,一个程序由很多个语句组成,一般情况下,会分隔成一个一个的语句。
单分支语句
//1.if的语法结构
// if (条件表达式) {
// 执行语句
// }
//2.执行私立 如果 if 里面的条件表达式结果为真true 则执行大括号里面的执行语句
//如果if条件表达式结果为假 则不执行大括号里面的语句 则执行if语句后面的代码
//3.代码体验
/* 隐式转换:将字符串类型转换为数字类型 */
let score = +prompt('请输入分数');
/* 判断条件 分数大于80 正确 否则 错误 */
if (score > 80) {
alert('恭喜你,成为上忍了')
}
执行流程
双分支语句
//1.语法结构 if 如果 else否则
// if (条件表达式) {
// 执行语句1
// } else {
// 执行语句2
// }
//2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
//3. 代码验证
let age = prompt('请输入您的年龄');
if (age >= 18) {
console.log('可以进入网吧');
} else {
console.log('不可以进入网吧');
}
//5.if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
//6.else后面直接跟大括号
执行流程:
多分支语句
- 语法结构:
//1.多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
//2.if else if 语句是多分支语句
//3.语法规范
// if (条件表达式1) {
// 语句1
// } else if (条件表达式2) {
// 语句2
// } else if (条件表达式3) {
// 语句3
// } else {
// 最后的语句
// }
//4.执行思路
//如果条件表达式 1 满足就执行语句1 执行完毕后,退出整个if分支语句
//如果条件表达式 1 不满足,则判断条件表达式2 满足的话,执行语句2 以此类推
//如果上面的所有条件表达式都不成立,则执行else里面的语句
//5.注意点
//(1) 多分支语句还是多选 1 最后只能有一个语句执行
//(2) else if 里面的条件理论上是可以任意多个的。
let day = +prompt("请输入今天星期几")
if (day === 1) {
alert('今天看火影忍者');
} else if (day === 2) {
alert('今天看海贼王');
} else if (day === 3) {
alert('今天看死神');
} else if (day === 4) {
alert('今天看银魂');
} else if (day === 5) {
alert('今天看城市猎人');
} else if (day === 6) {
alert('今天看七龙珠')
} else {
alert('今天看名侦探柯南')
}
- 执行流程:
三元表达式
三元表达式也能做一些简单的条件选择,有三元运算符组成的式子称为三元表达式。
//1.有三元运算符组成的式子我们称为三元表达式
//2. 语法结构:条件表达式 ? 表达式1:表达式2
//3.执行思路:如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
//4.代码体验
let num1 = +prompt('请输入数字'),
num2 = +prompt('请输入数字');
num = num1 > num2 ? num1 : num2
console.log('最大数为:' + num);