JavaScript 运算符详解
🎯 引言
JavaScript 里的运算符是我们写代码时不可或缺的元素，无论是做简单的数学计算，还是判断条件，甚至给变量赋值，都离不开它们。掌握好各种运算符，不仅能够让你的代码更简洁，还能让程序运行更高效，逻辑更清晰。
通过本文，你将全面了解 JavaScript 中常见的算术运算符、比较运算符、逻辑运算符、赋值运算符、条件（三元）运算符，以及运算符的优先级和结合性。学会这些内容，能帮助你写出更稳定和高质量的代码。
➕ 算术运算符
算术运算符主要用于执行数学计算，包括加、减、乘、除等。下面是常用的算术运算符：
| 运算符 | 含义 | 示例 | 结果 |
|---|---|---|---|
| + | 加法 | 3 + 4 | 7 |
| - | 减法 | 10 - 6 | 4 |
| * | 乘法 | 5 * 8 | 40 |
| / | 除法 | 20 / 5 | 4 |
| % | 取模（求余数） | 9 % 4 | 1 |
| ++ | 自增（加1） | i++ 或 ++i | i 值加1 |
| -- | 自减（减1） | i-- 或 --i | i 值减1 |
例子说明
var a = 5;
var b = 3;
var sum = a + b; // 8
var mod = a % b; // 2
var i = 10;
i++; // i 变成 11
--i; // i 变回 10
🔍 比较运算符
比较运算符用于比较两个值，返回布尔值（true 或 false）。常见的比较运算符有：
| 运算符 | 含义 | 说明 |
|---|---|---|
| == | 等于 | 值相等（会类型转换） |
| === | 全等 | 值和类型都相等 |
| != | 不等于 | 值不等（会类型转换） |
| !== | 不全等 | 值或类型不相等 |
| > | 大于 | 左边大于右边 |
| < | 小于 | 左边小于右边 |
| >= | 大于等于 | 左边大于或等于右边 |
| <= | 小于等于 | 左边小于或等于右边 |
例子说明
var x = 10;
var y = '10';
console.log(x == y); // true，因为类型会转换
console.log(x === y); // false，因为类型不同
console.log(x !== y); // true
console.log(x > 5); // true
🤔 逻辑运算符
逻辑运算符用于组合多个布尔表达式，返回布尔值。主要有：
| 运算符 | 含义 | 说明 |
|---|---|---|
| && | 逻辑与 | 两边都为 true 才返回 true |
| || | 逻辑或 | 一方为 true 即返回 true |
| ! | 逻辑非 | 取反，将 true 变 false，false 变 true |
例子说明
var a = true;
var b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
逻辑运算符常用于条件语句或控制流判断。
📝 赋值运算符
赋值运算符用于给变量赋值，除了简单的 = 之外，还有很多复合赋值运算符：
| 运算符 | 含义 | 例子 | 说明 |
|---|---|---|---|
| = | 赋值 | x = 10 | 直接赋值 |
| += | 加并赋值 | x += 5 | 等同于 x = x + 5 |
| -= | 减并赋值 | x -= 3 | 等同于 x = x - 3 |
| *= | 乘并赋值 | x *= 2 | 等同于 x = x * 2 |
| /= | 除并赋值 | x /= 4 | 等同于 x = x / 4 |
| %= | 取模并赋值 | x %= 3 | 等同于 x = x % 3 |
例子说明
var x = 10;
x += 5; // x = 15
x *= 2; // x = 30
❓ 条件（三元）运算符
它是 JS 中唯一的三元运算符，语法格式：
条件表达式 ? 表达式1 : 表达式2
如果条件表达式为 true，返回表达式1，否则返回表达式2。
例子说明
var age = 20;
var status = age >= 18 ? '成年人' : '未成年人';
console.log(status); // 成年人
三元运算符可以简化 if-else 代码，写法更简洁。
⚖️ 运算符优先级和结合性
不同运算符的优先级不同，优先级高的先执行。此外，结合性决定了运算符如何从左向右或从右向左计算。
| 运算符 | 说明 | 优先级 | 结合性 |
|---|---|---|---|
| () | 圆括号 | 21 | 从左到右 ✅ 推荐多用 |
| ++, -- | 自增、自减 | 18 | 从右到左 |
| *, /, % | 乘除取模 | 15 | 从左到右 |
| +, - | 加减 | 14 | 从左到右 |
| <, <=, >, >= | 比较 | 12 | 从左到右 |
| ==, != | 相等、不等 | 11 | 从左到右 |
| && | 逻辑与 | 6 | 从左到右 |
| || | 逻辑或 | 5 | 从左到右 |
| =, += 等 | 赋值 | 3 | 从右到左 |
| ?: | 条件（三元） | 4 | 从右到左 |
例子说明
var a = 2 + 3 * 4; // 3*4先算，结果14
var b = (2 + 3) * 4; // 括号先算，结果20
🧾 小节总结
- 算术运算符负责数学计算，包括加减乘除和自增自减；
- 比较运算符用于判断两个值关系，建议优先使用全等（===）；
- 逻辑运算符用来组合布尔表达式，控制程序流程；
- 赋值运算符不仅有简单赋值，还有加减乘除复合赋值；
- 条件（三元）运算符帮助简化 if-else 逻辑，写法简洁；
- 运算符优先级和结合性决定计算顺序，括号能明确优先级。
❓ 知识问答（Q&A）
Q：++ 运算符前置和后置有什么区别？
A：前置（++i）先自增再使用，后置（i++）先使用变量原值再自增。
Q：为什么建议使用 === 而不是 ==？
A：=== 不会进行类型转换，避免类型隐式转换带来的错误，更加安全。
Q：逻辑运算符 && 和 || 的短路特性是什么？
A：&& 左边为 false，右边不再计算；|| 左边为 true，右边不再计算，提升效率。
🧪 小练习
练习 1：算术运算和赋值操作
小明的钱包里有 10 块钱，他赚了 5 块钱（用 += 表示），然后不小心掉了 1 块（用 -- 表示），请用 JavaScript 写出这个过程，并输出他现在还有多少钱。
var money = 10;
// 在此处编写你的代码
练习 2：使用三元运算符判断奇偶数
根据变量 num，使用三元运算符判断它是奇数还是偶数，并输出相应字符串。
var num = 7;
// 在此处编写你的代码
alert(result); // 奇数
🎉 恭喜你已经掌握了 JS 的算术、比较、逻辑、赋值、条件运算符及运算符优先级知识啦！继续练习这些知识点，你的前端编程技能会越来越棒！