JavaScript: JavaScript 运算符
运算符就是告诉 JavaScript "做什么操作"的符号。你每天都在用 + 加减乘除，但 JS 里的运算符远不止算术——赋值、比较、逻辑判断全靠它们。这一课把最常用的运算符一网打尽。
1. 算术运算符
| 运算符 | 含义 | 示例 |
|---|---|---|
+ |
加 | 5 + 3 → 8 |
- |
减 | 5 - 3 → 2 |
* |
乘 | 5 * 3 → 15 |
/ |
除 | 6 / 3 → 2 |
% |
取余 | 7 % 3 → 1 |
** |
幂 | 2 ** 3 → 8 |
++ |
自增 | x++ 或 ++x |
-- |
自减 | x-- 或 --x |
取余 % 特别实用——判断奇偶、限幅循环都靠它。** 是 ES2016 新增的幂运算符，和 Math.pow() 效果一样但写起来更顺手。
++ 和 -- 放变量前后的区别：前置先变再用，后置先用再变。别在同一行里连写多个 ++，代码会变成没人能一眼看懂的谜语。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。### ▶ 示例：算术运算符基本用法
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
<h3>算术运算符演示</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var a = 17, b = 5;
var lines = [];
lines.push('a = ' + a + ', b = ' + b);
lines.push('a + b = ' + (a + b));
lines.push('a - b = ' + (a - b));
lines.push('a * b = ' + (a * b));
lines.push('a / b = ' + (a / b));
lines.push('a % b = ' + (a % b));
lines.push('a ** b = ' + (a ** b));
var x = 10;
lines.push('');
lines.push('x = 10');
lines.push('x++ = ' + (x++) + ' (后置：先用后变，x 变成 ' + x + ')');
lines.push('++x = ' + (++x) + ' (前置：先变后用，x 变成 ' + x + ')');
out.textContent = lines.join('\n');
</script>
</body>
</html>
2. 赋值运算符
= 是赋值，不是数学里的"等于"。这是新手最容易踩的坑之一——if (x = 5) 不会报错，它把 5 赋给 x 然后返回 5（真值），条件永远成立。
复合赋值是简写：
| 简写 | 等价于 |
|---|---|
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 |
▶ 示例：赋值运算符
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>赋值运算符</title>
</head>
<body>
<h3>赋值运算符演示</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var score = 80;
lines.push('初始 score = ' + score);
score += 10;
lines.push('score += 10 → ' + score);
score -= 25;
lines.push('score -= 25 → ' + score);
score *= 2;
lines.push('score *= 2 → ' + score);
score /= 3;
lines.push('score /= 3 → ' + score.toFixed(1));
score %= 30;
lines.push('score %= 30 → ' + score.toFixed(1));
out.textContent = lines.join('\n');
</script>
</body>
</html>
3. 比较运算符
| 运算符 | 含义 |
|---|---|
== |
宽松相等（会类型转换） |
=== |
严格相等（不转换类型） |
!= |
宽松不等 |
!== |
严格不等 |
> |
大于 |
< |
小于 |
>= |
大于等于 |
<= |
小于等于 |
⚠️ == vs === 的坑：这是 JS 里最经典的坑，没有之一。== 会偷偷做类型转换，"5" == 5 居然是 true！而 === 要求类型和值都一样，"5" === 5 是 false。永远用 ===，除非你明确需要类型转换。 同理，用 !== 代替 !=。
▶ 示例：== vs === 的坑
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>== vs ===</title>
</head>
<body>
<h3>宽松相等 vs 严格相等</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
lines.push('"5" == 5 → ' + ("5" == 5));
lines.push('"5" === 5 → ' + ("5" === 5));
lines.push('');
lines.push('0 == false → ' + (0 == false));
lines.push('0 === false → ' + (0 === false));
lines.push('');
lines.push('"" == false → ' + ("" == false));
lines.push('"" === false → ' + ("" === false));
lines.push('');
lines.push('null == undefined → ' + (null == undefined));
lines.push('null === undefined → ' + (null === undefined));
lines.push('');
lines.push('5 != "5" → ' + (5 != "5"));
lines.push('5 !== "5" → ' + (5 !== "5"));
out.textContent = lines.join('\n');
</script>
</body>
</html>
看到没？0 == false 和 "" == false 都是 true，这简直反直觉。就像你拿苹果和橘子比，== 说"都是水果，算你相等"；=== 说"不一样就是不一样"。认准 ===，少踩一半 bug。
4. 逻辑运算符
| 运算符 | 含义 | 说明 |
|---|---|---|
&& |
与 | 两边都真才真 |
|| |
或 | 有一边真就真 |
! |
非 | 取反 |
&& 和 || 有个实用特性——短路求值：&& 遇到假就停，|| 遇到真就停，后面的表达式根本不执行。这个特性常用来写简短的条件赋值：
HTML
<script>
var name = userInput || '匿名用户';
</script>
▶ 示例：逻辑运算符与短路求值
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
</head>
<body>
<h3>逻辑运算符演示</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var age = 20;
var hasTicket = true;
lines.push('age = ' + age + ', hasTicket = ' + hasTicket);
lines.push('age >= 18 && hasTicket → ' + (age >= 18 && hasTicket));
lines.push('age >= 18 || hasTicket → ' + (age >= 18 || hasTicket));
lines.push('!hasTicket → ' + (!hasTicket));
lines.push('');
lines.push('--- 短路求值 ---');
lines.push('1 && "hello" → ' + (1 && "hello"));
lines.push('0 && "hello" → ' + (0 && "hello"));
lines.push('1 || "hello" → ' + (1 || "hello"));
lines.push('0 || "hello" → ' + (0 || "hello"));
lines.push('');
var username = '';
var displayName = username || '游客';
lines.push('空字符串 || "游客" → ' + displayName);
out.textContent = lines.join('\n');
</script>
</body>
</html>
5. 字符串拼接的 + 运算符
+ 遇到字符串就变身"拼接工"：只要任意一边是字符串，另一边也会被转成字符串拼起来。
HTML
<script>
"Hello" + " " + "World" // "Hello World"
"数字：" + 42 // "数字：42"
3 + 4 + "px" // "7px"（先算 3+4=7，再拼）
"px" + 3 + 4 // "px34"（从左到右，"px"+3="px3"，再拼4）
</script>
那个 "px" + 3 + 4 得到 "px34" 而不是 "px7"，是面试常考的经典陷阱——+ 从左到右算，左边已经是字符串了，后面就全是拼接。
6. 三元运算符简介
三元运算符是 if...else 的简写，格式：条件 ? 值1 : 值2。
HTML
<script>
var status = age >= 18 ? '成年' : '未成年';
</script>
条件为真取值1，为假取值2。简单判断用三元很优雅，但别嵌套——a ? b ? c : d : e 这种写法是在给自己挖坑。详细用法在第10课展开。
7. 运算符优先级
JS 会按优先级决定先算谁，和你数学课学的规则一致：先乘除后加减，括号最优先。
HTML
<script>
2 + 3 * 4 // 14，不是 20
(2 + 3) * 4 // 20
</script>
常见优先级从高到低：() → ! → ** → * / % → + - → > < >= <= → == === != !== → && → || → ?: → =。
拿不准的时候，加括号。括号不要钱，但 bug 很贵。
❓ 常见问题
Q 为什么
"1" + 2 + 3 得到 "123" 而不是 "15"？A
+ 从左到右执行。先算 "1" + 2 得到字符串 "12"，再算 "12" + 3 得到 "123"。想先算数值部分，用括号："1" + (2 + 3) 得到 "15"。Q
0 == false 为什么是 true？A
== 在比较前会做类型转换，0 和 false 都被转成数字 0，所以相等。这就是为什么推荐用 ===——它不做转换，0 === false 就是 false。Q
x++ 和 ++x 到底有什么区别？A 单独使用时效果一样，都是 x 加 1。区别在于表达式的返回值：
x++ 返回加之前的旧值，++x 返回加之后的新值。比如 var a = 5; var b = a++; 结果 a=6、b=5；而 var a = 5; var b = ++a; 结果 a=6、b=6。📖 小节
- 算术运算符处理数值计算，
%取余和**幂运算在实际开发中很常用 - 赋值运算符的复合写法（
+=、-=等）让代码更简洁 - 比较运算符永远优先用
===和!==，避免==的隐式类型转换带来的 bug - 逻辑运算符
&&和||有短路求值特性，可用于默认值赋值 +遇到字符串变拼接符，注意从左到右算的顺序陷阱- 拿不准优先级就加括号，可读性比"省几个字符"重要得多
📝 作业
- 写一个程序，输入一个三位数（比如 371），分别用
%和/提取它的百位、十位、个位数字并输出。 - 不用
if...else，用三元运算符写一行代码：判断一个年份变量year是否是闰年，结果赋给isLeap（提示：能被4整除且不能被100整除，或能被400整除）。 - 预测以下表达式的结果，然后在浏览器控制台验证：
[] == false、[] == ![]、null == 0。解释为什么——如果解释不出来，说明你需要把==的隐式转换规则再复习一遍，然后坚定地拥抱===。
