05-JavaScript 算数运算符
JavaScript 运算符的概念和 C 语言一样, 都是告诉程序执行特定算术或逻辑操作的符号。
js 表达式
表达式就是利用运算符链接在一起的有意义,有结果的语句; 例如: a + b; 就是一个算数表达式, 它的意义是将两个数相加, 两个数相加的结果就是表达式的结果 注意: 表达式一定要有结果
运算符分类
JavaScript 运算符的分类和 C 语言也一样
按照功能划分:
- 算术运算符
- 位运算符
- 关系运算符
- 逻辑运算符
- 运算符根据参与运算的操作数的个数分为
- 单目运算
- 双目运算
- 三目运算
运算符的优先级和结合性
优先级
- JavaScript 运算符的优先级和 C 语言也一样
- JavaScript 中,运算符的运算优先级共分为 15 级。1 级最高,15 级最低。
| 运算符 | 描述 |
|---|---|
() | 表达式分组 |
++ -- - ~ ! | 一元运算符 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<< >> >>> | 移位 |
< <= > >= | 小于、小于等于、大于、大于等于 |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 条件 |
= += -= *= /= %= | 赋值运算 |
, | 多重求值 |
在表达式中,优先级较高的先于优先级较低的进行运算。 在一个运算量两侧的运算符优先级相同时,则按运算符的结合性所规定的结合方向处理
算数运算符
正负运算符
赋值运算符
简单赋值运算符: = 复合赋值运算符: +=、-=、*=、/=、%=
复合赋值运算符:
+= 加后赋值 变量+=表达式 如:a+=3;即 a=a+3 -= 减后赋值 变量-=表达式 如:a-=3;即 a=a-3 = 乘后赋值 变量=表达式 如:a=3;即 a=a3 /= 除后赋值 变量/=表达式 如:a/=3;即 a=a/3 %= 取模后赋值 变量%=表达式 如:a%=3;即 a=a%3
复合赋值表达式运算
格式: 变量 复合赋值运算符 表达式; 如: a *= 1 + 2; 由于赋值运算符是右结合性, 所以会先计算等号右边, 然后再进行复合运算
自增自减运算符
作用：快速对一个变量中保存的数据进行 ±1 操作(运算符++ --)
无论运算符号在前还是在后, 变量在自身基础上都会改变
前缀表达式:
++x, --x;其中 x 表示变量名,先完成变量的自增自减 1 运算,再用 x 的值作为表 达式的值;
var a, b;
a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (++a) + (++b);
console.log(res); // 32
console.log(a); // 11
console.log(b); // 21
a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (--a) + (--b);
console.log(res); // 28
console.log(a); // 9
console.log(b); // 19
后缀表达式:
x++, x--;先用 x 的当前值作为表达式的值,再进行自增自减 1 运算。
var a, b;
a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (++a) + (++b);
console.log(res); // 32
console.log(a); // 11
console.log(b); // 21
a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (--a) + (--b);
console.log(res); // 28
console.log(a); // 9
console.log(b); // 19
⚠️ 注意
- 自增自减运算符只能出翔在变量的前面或后面，不能出现在常量或表达式的前面或者后面
- 表达式：用运算符连接在一起有意义有结果的语句，称为表达式
(1+1); a * 5; - 在开发中自增自减运算符最好单独出现，不要出现在表达式中
let a = 1,b = 2; //表达式不建议写为 res = a++ + b；
res = a + b; //结果 res = 3
a++; //结果 a = 2
关系运算符
结果只有两个, 要么是 true, 要么是 false
- 如果关系成立, 就返回 true
- 如果关系不成立, 就返回 false
| 序号 | 符号 | 运算符 | 结合性 |
|---|---|---|---|
| 1 | > | 大于 | 左结合 |
| 2 | < | 小于 | 左结合 |
| 3 | >= | 大于等于 | 左结合 |
| 4 | <= | 小于等于 | 左结合 |
| 5 | == | 判断值是否相等 | 左结合 |
| 6 | != | 判断值是否不相等 | 左结合 |
| 7 | === | 判断值和类型是否相等 | 左结合 |
| 8 | !== | 判断值和类型是否不相等 | 左结合 |
关系运算符的注意点
阿塞阀
- 对于非数值类型的数据, 会先转换成数值类型,再进行判断
let res = 10 != 5; - 对于关系运算符来说, 任何数据和 NaN 进行比较,返回值都是 false
let res = 1 > true;
let res = 1 > false; - 如果参与比较的都是字符串类型, 那么不会转换数值类型再比较, 而是直接比较字符对应的 Unicod 编码
let res = "a" > "b"; // let res = 0061 > 0062;
- 在企业开发中千万不要通过
==来判断某一个数据是否是NaN结果永远都是NaN。可以通过isNaN来进行判断
let num = NaN;
let res = isNaN(num);
console.log(res);
关系运算符的结合性和优先级
- 关系运算符都是左结合性(从左至右的运算)
- 关系运算符中
> < >= <=的优先级高于== !==== !== // ==只会判断取值是否相等, 不会判断数据类型否相等
let res = 123 == "123"; // let res =123 == 123; true
// === 不仅会判断取值是否相等, 并且还会判断据类型是否相等,只有取值和数据类型都相等, 才会返回true
let res = 123 === "123"; // let res =123 == 123; false
let res = 123 != "123"; // let res =123 != 123; false
let res = 123 !== "123"; // let res =123 != 123; false
注意点: 正因为关系运算符是左结合性, 所不能利用关系运算符来判断区间
let res = 10 > 5 > 3; //过程分两步 let res =true > 3; let res = 1 > 3; false
let res = 10 <= 25 <= 20; //过程分两步 let res =true <= 20; let res = 1 <= 20; false
逻辑运算符
逻辑与 &&
格式: 条件表达式 A && 条件表达式 B
返回值: true false
特点: 一假则假
let res = (10 > 5) && (20 > 10);
逻辑或 !!
格式: 条件表达式 A || 条件表达式 B
返回值: true false
特点: 一真则真
let res = false || true; // true
逻辑非 !
格式: !条件表达式 返回值: true false 特点: 真变假, 假变真
let res = !true; // false
let res = !false; // true
逻辑运算符的优先级和结合性
- 逻辑运算符的结合性是左结合性(从左至右的运算)
- 在逻辑运算中
&&的优先级高于||
逻辑运算符执行条件判断
|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先进行 ToBoolean 强制类型转换，然后再执行条件判断。
- 进行了布尔值转换的运算，
||和&&只是返回它们其中一个操作数的值，而非条件判断的结果
- 在逻辑与运算中的条件
格式: 条件A && 条件B
- 如果条件A不成立, 那么就返回条件A
- 如果条件A成立, 无论条件B是否成立, 都会返回条件B
1.如果条件A结果为 false, 那么就返回条件A
let res = 0 && 123; //由于0为false，条件不成立，返回为 0
let res = null && 123; //由于null为false，条件不成立，返回为 0
2.如果条件A结果为 true, 无论条件B是否成立, 都会返回条件B
let res = 1 && 123; //条件A为true成立，返回 123
let res = 1 && null; //条件A为true成立，返回 null
- 在逻辑非运算中的条件
和
&&相反，对于||来说，如果条件判断结果为true就返回第一个操作数的值，如果为false就返回第二个操作数的值。
格式: 条件A || 条件B
如果条件A成立, 那么就返回条件A（与「逻辑与」相反）
如果条件A不成立, 无论条件B是否成立, 都会返回件B
逻辑运算短路
为了确保运算结果，算数表达式要注意一下两种情况
- 在逻辑与运算中,有一个逻辑短路现象 格式: 条件 A && 条件 B 由于逻辑与运算的规则是一假则假, 所以只要条件 A 是 假, 那么条件 B 就不会运算
let res = (10 > 20) && (++num > 0); //后面的++num不会运算
- 在逻辑或运算中,有一个逻辑短路现象 格式: 条件 A || 条件 B 由于逻辑或运算的规则是一真则真, 所以只要条件 A 是 真, 那么条件 B 就不会运算
let res = (10 < 20) || (++num > 0); //后面的++num不会运算
逗号运算符
在 JavaScript 中逗号运算符一般用于简化代码
let a = 1,b = 2;
逗号运算符优先级和结合性
- 逗号运算符的结合性是左结合性(从左至右的运算)
- 逗号运算符的优先级是所有运算符中最低的
- 逗号运算符也是一个运算符, 也有运算符结果，逗号运算符的运算符结果就是最后一个表达式的结果：表达式 1, 表达式 2, 表达式 3, ....;
let res = ((1 + 1), (2 + 2), (3 + 3));
console.log(res); //结果为 6
三目运算符(条件运算符)
三目运算符又称之为条件运算符
三目运算符格式
条件表达式 ? 结果 A : 结果 B;
- 在三目运算符中当条件为真的时候, 就会返回结果 A
- 在三目运算符中当条件为假的时候, 就会返回结果 B
三目运算符注意点
在三目运算符中?:不能单独出现, 要么一起出现, 要么一起不出现
let res = true ? 123 : 456; //返回 123
let res = false ? 123 : 456; //返回 456
let res = (10 > 5) ? 10 : 5; //返回 10