[JavaScript] 运算符详解
文章目录
- 算术运算符（Arithmetic Operators）
- 注意事项：
- 比较运算符（Comparison Operators）
- 注意事项：
- 逻辑运算符（Logical Operators）
- 短路运算：
- 逻辑运算符的返回值：
- 赋值运算符（Assignment Operators）
- 三元运算符（Ternary Operator）
- 位运算符（Bitwise Operators）
- 运算符优先级
- 小练习
算术运算符（Arithmetic Operators）
算术运算符用于完成基本的数学计算。
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
+ | 加法 | 5 + 2 | 7 |
- | 减法 | 5 - 2 | 3 |
* | 乘法 | 5 * 2 | 10 |
/ | 除法 | 5 / 2 | 2.5 |
% | 取余（模运算） | 5 % 2 | 1 |
** | 指数（幂运算） | 2 ** 3 | 8 |
++ | 自增（每次加1） | let x = 5; x++ | 5，然后变为6 |
-- | 自减（每次减1） | let x = 5; x-- | 5，然后变为4 |
注意事项：
- 整数除法：JavaScript中没有整数除法，
5 / 2会得到浮点结果2.5。 - 自增/自减运算符可以分为前置和后置：
- 前置
++x：先加1后返回结果。 - 后置
x++：先返回结果后加1。
- 前置
let a = 10;
console.log(a++); // 输出 10，先返回后加1
console.log(a); // 输出 11
console.log(++a); // 输出 12，先加1后返回
比较运算符（Comparison Operators）
比较运算符返回布尔值：true 或 false。
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
== | 相等（值相等） | 5 == '5' | true |
=== | 全等（值和类型都相等） | 5 === '5' | false |
!= | 不相等（值不相等） | 5 != '5' | false |
!== | 不全等（值或类型不相等） | 5 !== '5' | true |
> | 大于 | 5 > 3 | true |
< | 小于 | 5 < 3 | false |
>= | 大于等于 | 5 >= 5 | true |
<= | 小于等于 | 3 <= 5 | true |
注意事项：
==** 与===的区别**：==会进行类型转换，只比较值是否相等。===不会进行类型转换，要求值和类型都相等。
console.log(5 == '5'); // true，因为字符串'5'被转换成数字5
console.log(5 === '5'); // false，因为类型不同
逻辑运算符（Logical Operators）
逻辑运算符用于布尔值运算，主要包括：与、或、非。
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
&& | 逻辑与（AND） | true && false | false |
| ` | ` | 逻辑或（OR） | |
! | 逻辑非（NOT） | !true | false |
短路运算：
&&：遇到false会短路，直接返回false的值。||：遇到true会短路，直接返回true的值。
let x = 5;
console.log(x > 0 && x < 10); // true，x大于0并且小于10
console.log(x > 0 || x < 3); // true，x大于0或小于3
console.log(!(x > 0)); // false，x大于0的反向
逻辑运算符的返回值：
&&和||不总是返回布尔值，它们会返回短路时的具体值。
console.log('a' && 'b'); // 'b'，因为'a'为真，继续返回后一个值
console.log(null || 'hello'); // 'hello'，因为`null`为假，返回`hello`
赋值运算符（Assignment Operators）
赋值运算符用来给变量赋值。
| 运算符 | 描述 | 示例 | 等价于 |
|---|---|---|---|
= | 赋值 | x = 5 | |
+= | 加后赋值 | x += 3 | x = x + 3 |
-= | 减后赋值 | x -= 3 | x = x - 3 |
*= | 乘后赋值 | x *= 3 | x = x * 3 |
/= | 除后赋值 | x /= 3 | x = x / 3 |
%= | 取余后赋值 | x %= 3 | x = x % 3 |
**= | 幂后赋值 | x **= 2 | x = x ** 2 |
三元运算符（Ternary Operator）
三元运算符是一个简单的条件运算符，语法为：条件 ? 表达式1 : 表达式2。
let age = 20;
let isAdult = age >= 18 ? '成年人' : '未成年人';
console.log(isAdult); // 输出：成年人
位运算符（Bitwise Operators）
位运算符操作二进制位，用得较少，但在某些性能优化或算法中很重要。
| 运算符 | 描述 | 示例 |
|---|---|---|
& | 按位与 | 5 & 3（结果：1） |
| ` | ` | 按位或 |
^ | 按位异或 | 5 ^ 3（结果：6） |
~ | 按位取反 | ~5（结果：-6） |
<< | 左移 | 5 << 1（结果：10） |
>> | 右移 | 5 >> 1（结果：2） |
运算符优先级
JavaScript中的运算符是有优先级的，高优先级的运算符会优先计算。
| 优先级 | 运算符 | 说明 |
|---|---|---|
| 1 | () | 括号 |
| 2 | ++ -- | 自增、自减 |
| 3 | ** | 幂运算 |
| 4 | * / % | 乘、除、取余 |
| 5 | + - | 加、减 |
| 6 | < <= > >= | 比较 |
| 7 | == != === !== | 相等、全等等 |
| 8 | && | 逻辑与 |
| 9 | ` | |
| 10 | = | 赋值 |
小练习
可以尝试完成以下练习题：
- 使用三元运算符，根据一个数字是否大于0来输出“正数”或“非正数”。
- 判断一个字符串是否为空（长度为0），使用
||输出默认值。