前端javascript基础学习篇三（运算符）

目录

1、运算符

2、算数运算符

3、递增和递减运算符

4、比较运算符

5、逻辑运算符

6、赋值运算符

7、运算符优先级

---

1、运算符

用于执行各种操作的符号或者关键字，他们用于执行算术运算符、比较值、赋值以及执行其他操作

---

2、算数运算符

用于执行两个变量或值的算数运算

常见的运算符：+加、-减、*乘、/除、%取余

以下是算数运算符的表达式和返回值示例：

加法运算符 +： 将两个数相加。

const result = 5 + 3; 

console.log(result); // 输出: 8

减法运算符 -： 将第一个数减去第二个数。

const result = 8 - 3; 

console.log(result); // 输出: 5

乘法运算符 *： 将两个数相乘。

const result = 4 * 3; 

console.log(result); // 输出: 12

除法运算符 /： 将第一个数除以第二个数。

const result = 15 / 5; 

console.log(result); // 输出: 3

取模运算符 %： 返回第一个数除以第二个数的余数。

const result = 10 % 3; 

console.log(result); // 输出: 1

自增运算符 ++： 将操作数的值增加 1。

let x = 5; x++; 

console.log(x); // 输出: 6

自减运算符 --： 将操作数的值减少 1。

let x = 5; x--; 

console.log(x); // 输出: 4

---

3、递增和递减运算符

前置递增和后置递增是指在对变量进行递增（即将变量的值增加1）时，操作符的位置不同导致的行为差异。前置递增使用++i，后置递增使用i++。它们的区别在于变量值增加的时机和返回值的不同。

前置递减和后置递减与前置递增和后置递增类似，区别在于它们是对变量进行递减（即将变量的值减1）。前置递减使用--i，后置递减使用i--。它们的区别在于变量值减少的时机和返回值的不同。

前置递增 (++i)

前置递增操作会先将变量的值增加1，然后再使用增加后的值。也就是说，操作符在变量之前：

int i = 5; 

int j = ++i; // i 先增加1变为6，然后 j 赋值为6

在上面的例子中，i的值先从5增加到6，然后j被赋值为6。

后置递增 (i++)

后置递增操作会先使用变量当前的值，然后再将变量的值增加1。也就是说，操作符在变量之后：

int i = 5; 

int j = i++; // j 先赋值为5，然后 i 增加1变为6

在上面的例子中，j被赋值为i当前的值5，然后i的值从5增加到6。

前置递减 (--i)

前置递减操作会先将变量的值减1，然后再使用减少后的值。也就是说，操作符在变量之前：

int i = 5; 

int j = --i; // i 先减少1变为4，然后 j 赋值为4

在上面的例子中，i的值先从5减少到4，然后j被赋值为4。

后置递减 (i--)

后置递减操作会先使用变量当前的值，然后再将变量的值减少1。也就是说，操作符在变量之后：

int i = 5; 

int j = i--; // j 先赋值为5，然后 i 减少1变为4

在上面的例子中，j被赋值为i当前的值5，然后i的值从5减少到4。

使用场景和影响

• 前置递增和前置递减：适用于需要立即使用递增后的值的场景。例如在一个循环中，如果需要立即用递增或递减后的值进行判断或计算，可以使用前置递增或前置递减。
• 后置递增和后置递减：适用于需要使用变量当前值之后再递增的场景。例如在遍历数组时，使用当前索引值后再增加索引或者减少索引，可以使用后置递增或后置递减。

性能考虑

前置递增可能比后置递增稍微高效，因为后置递增通常需要保留变量的当前值以便在递增后返回，这可能涉及额外的存储操作。这种性能差异通常很小，并且大多数情况下可以忽略不计。

与递增操作类似，前置递减可能比后置递减稍微高效，因为后置递减通常需要保留变量的当前值以便在递减后返回，这可能涉及额外的存储操作。这种性能差异通常很小，并且大多数情况下可以忽略不计。

总结

• 前置递增 (++i)：先递增，再使用递增后的值。
• 后置递增 (i++)：先使用当前值，再递增。

选择前置递增还是后置递增，取决于你在代码中的具体需求，以及你希望在递增操作前后使用的变量值。

• 前置递减 (--i)：先递减，再使用递减后的值。
• 后置递减 (i--)：先使用当前值，再递减。

选择前置递减还是后置递减，取决于你在代码中的具体需求，以及你希望在递减操作前后使用的变量值。

---

4、比较运算符

比较运算符是用于比较两个值的运算符，它们返回一个布尔值（true 或 false），表示比较结果。

常见的比较运算符

1. 等于（==）：

int a = 5; 

int b = 5; 

bool result = (a == b); // result 为 true

1. 不等于（!=）：

int a = 5; 

int b = 3; 

bool result = (a != b); // result 为 true

1. 大于（>）：

int a = 5; 

int b = 3; 

bool result = (a > b); // result 为 true

1. 小于（<）：

int a = 5; 

int b = 3; 

bool result = (a < b); // result 为 false

1. 大于等于（>=）：

int a = 5; 

int b = 5; 

bool result = (a >= b); // result 为 true

1. 小于等于（<=）：

int a = 5; 

int b = 5; 

bool result = (a <= b); // result 为 true

严格等于与严格不等于

除了上述基本的比较运算符，还有严格等于和严格不等于运算符，用于进行更严格的比较：

1. 严格等于（===）：

var a = 5; 

var b = "5"; 

var result = (a === b); // result 为 false，因为类型不同

1. 严格不等于（!==）：

var a = 5; 

var b = "5"; 

var result = (a !== b); // result 为 true，因为类型不同

---

5、逻辑运算符

逻辑运算符用于在编程中进行逻辑运算，它们主要用于结合或反转布尔值，并返回布尔结果。常见的逻辑运算符包括逻辑与（&&）、逻辑或（||）和逻辑非（!）。以下是这些运算符的详细说明：

逻辑运算符

1. 逻辑与（AND）：&&

bool a = true; 

bool b = false; 

bool result = a && b; // result 为 false

1. 逻辑或（OR）：||

bool a = true; 

bool b = false; 

bool result = a || b; // result 为 true

1. 逻辑非（NOT）：!

bool a = true; 

bool result = !a; // result 为 false

逻辑运算符的优先级如下：

• 逻辑非（!）优先级最高。
• 逻辑与（&&）次之。
• 逻辑或（||）优先级最低。

bool a = true; 

bool b = false; 

bool c = true; 

bool result = a && !b || c; // 计算顺序：!b -> a && true -> true || c -> true

短路求值

逻辑运算符通常采用短路求值（short-circuit evaluation），即：

• 对于逻辑与（&&），如果左操作数为false，右操作数不会被计算，因为结果已经确定为false。
• 对于逻辑或（||），如果左操作数为true，右操作数不会被计算，因为结果已经确定为true。

bool a = false; 

bool b = true; 

bool result = a && (b = false); // b 不会被赋值，result 为 false 

bool c = true; 

bool d = false; 

bool result2 = c || (d = true); // d 不会被赋值，result2 为 true

短路求值的特性

逻辑与（&&）的短路求值

• 当第一个操作数为false时，第二个操作数不会被计算，整个表达式的结果为false。
• 当第一个操作数为true时，整个表达式的结果取决于第二个操作数的值。

---

6、赋值运算符

赋值运算符用于将值赋给变量。在编程中，赋值运算符不仅仅是简单的 =，还有许多复合赋值运算符，它们结合了其他运算符和赋值操作。以下是常见的赋值运算符及其详细说明：

基本赋值运算符

简单赋值（=）

int a = 5; // 将 5 赋值给变量 a

复合赋值运算符

复合赋值运算符结合了算术运算和赋值操作，能够简化代码。以下是一些常见的复合赋值运算符：

1. 加法赋值（+=）

int a = 5; 

a += 3; // 等效于 a = a + 3; 结果 a 为 8

1. 减法赋值（-=）

int a = 5; 

a -= 3; // 等效于 a = a - 3; 结果 a 为 2

1. 乘法赋值（*=）

int a = 5; 

a *= 3; // 等效于 a = a * 3; 结果 a 为 15

1. 除法赋值（/=）

int a = 6; 

a /= 3; // 等效于 a = a / 3; 结果 a 为 2

1. 取模赋值（%=）

int a = 5; 

a %= 3; // 等效于 a = a % 3; 结果 a 为 2

位运算赋值运算符

除了算术运算，位运算也可以和赋值操作结合：

1. 按位与赋值（&=）

int a = 6; // 二进制 0110 

a &= 3; // 等效于 a = a & 3; 结果 a 为 2（二进制 0010）

1. 按位或赋值（|=）

int a = 6; // 二进制 0110 

a |= 3; // 等效于 a = a | 3; 结果 a 为 7（二进制 0111）

1. 按位异或赋值（^=）

int a = 6; // 二进制 0110 

a ^= 3; // 等效于 a = a ^ 3; 结果 a 为 5（二进制 0101）

1. 左移赋值（<<=）

int a = 6; // 二进制 0110 

a <<= 1; // 等效于 a = a << 1; 结果 a 为 12（二进制 1100）

1. 右移赋值（>>=）

int a = 6; // 二进制 0110 

a >>= 1; // 等效于 a = a >> 1; 结果 a 为 3（二进制 0011）

总结

赋值运算符是编程中的基本工具，用于将值赋给变量。复合赋值运算符通过结合算术或位运算与赋值操作，使代码更加简洁和高效。

---

7、运算符优先级

• 基本运算符的优先级，从高到低排列：

1. **圆括号**：`()`：括号具有最高的优先级，可以用来提高其他运算符的优先级。

2. **一元运算符**：`+` `-` `++` `--` `!` `~` `typeof` `void` `delete` `await`：包括一元加、一元减、逻辑非、按位非等运算符。

3. **幂运算**：`**`：ES7 中新增的幂运算符，求幂的优先级高于其他算术运算符。

4. **乘法、除法、取模**：`*` `/` `%`：乘法、除法和取模运算符优先级相同，按照从左到右的顺序进行计算。

5. **加法、减法**：`+` `-`：加法和减法运算符的优先级相同，也按照从左到右的顺序进行计算。

6. **位移运算符**：`<<` `>>` `>>>`：左移、右移和无符号右移运算符，优先级略低于加法和减法。

7. **关系运算符**：`<` `<=` `>` `>=`：小于、小于等于、大于、大于等于运算符。

8. **相等运算符**：`==` `!=` `===` `!==`：相等和不相等运算符的优先级略低于关系运算符。

9. **按位与**：`&`：按位与运算符的优先级比相等运算符低。

10. **按位异或**：`^`：按位异或运算符的优先级比按位与运算符低。

11. **按位或**：`|`：按位或运算符的优先级最低，通常用于按位操作的最后一步。

12. **逻辑与**：`&&`：逻辑与运算符的优先级比按位或运算符低。

13. **逻辑或**：`||`：逻辑或运算符的优先级最低，通常用于逻辑操作的最后一步。