JavaScript 运算符与流程控制详解
在 JavaScript 开发中，运算符和流程控制是构建业务逻辑的基石。本文将深入讲解比较运算符、逻辑运算、条件判断及循环语句，重点剖析容易踩坑的细节，帮助你写出更健壮的代码。
运算符：自增、比较与逻辑
1. 自增运算符（++）
自增分为前缀（++i）和后缀（i++），核心区别在于返回值时机不同：
- 后缀自增（
i++）：先返回当前值，变量再自增。 - 前缀自增（
++i）：变量先自增，再返回新值。
let i = 1;
console.log(i+++++i + i); // 结果为 7
/*
* 解析过程：
* 1. i++ 先返回 1，此时 i 变为 2
* 2. ++i 先将 i 自增为 3，返回 3
* 3. 最后的 + i 取当前 i 的值 3
* 总和：1 + 3 + 3 = 7
*/
2. 比较运算符
用于判断值的关系，返回布尔值。需特别注意 == 与 === 的区别：
| 运算符 | 特点 | 示例 | 结果 |
|---|---|---|---|
== | 只比较值（隐式转换类型） | 2 == "2" | true（字符串转数字） |
=== | 比较值和类型（无转换） | 2 === "2" | false（类型不同） |
!= | 只比较值不相等 | 2 != "2" | false（值相等） |
!== | 比较值或类型不相等 | 2 !== "2" | true（类型不同） |
特殊规则提示：
- 字符串按字符编码比较（如
"a" < "b"为true）。 NaN与任何值比较都返回false，包括它自身。
console.log(2 == "2"); // true（隐式转换）
console.log(2 === "2"); // false（类型不同）
console.log("aabgg" < "bzzzz"); // true（首字符 "a" < "b"）
3. 逻辑运算符
组合多个条件判断，返回布尔值：
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
&& | 逻辑与（两边都真才真） | 3 < 5 && 3 < 9 | true |
| ` | ` | 逻辑或（至少一边真则真） | |
! | 逻辑非（取反） | !(2 > 5) | true |
真值/假值规则：
- 假值：
0、""、null、undefined、NaN。 - 真值：除假值外的所有值（如非空字符串、非 0 数字）。
console.log(!9); // false（9 是真值）
console.log(!""); // true（空字符串是假值）
条件判断语句
1. if 语句
根据条件执行代码块，条件会隐式转换为布尔值：
// 语法
if (条件) {
// 条件为真时执行
} else {
// 条件为假时执行
}
// 示例：判断空格字符串是否为真
if (" ") {
console.log(true); // 输出：true（空格是非空字符串，为真值）
} else {
console.log(false);
}
2. 三目运算符
if-else 的简写形式，适合简单的赋值或返回场景：
// 判断 2 与 "2" 是否绝对相等
document.write(2 === "2" ? "相等" : "不等"); // 输出：不等
3. switch 语句
用于多条件等值判断（使用 === 比较），务必配合 break 防止穿透：
let num5 = 3;
switch (num5) {
case 1:
console.log("选了 1");
break;
case 2:
console.log("选了 2");
break;
case 3:
console.log("选了 3"); // 匹配成功，输出此句
break;
default:
console.log("无匹配项");
}
// 输出：选了 3
循环语句
1. while 循环
根据条件重复执行代码块，continue 可跳过本次循环剩余部分：
let n = 5;
while (n--) {
if (n === 3) continue; // 跳过 n=3 的循环
document.write(`执行第${n}次<br/>`);
}
// 输出：
// 执行第 4 次
// 执行第 2 次
// 执行第 1 次
// 执行第 0 次
2. for 循环
更灵活的循环方式，适合已知循环次数的场景：
for (初始化；条件；更新) {
// 循环体
}
// 示例：基本用法
for (let i = 1; i <= 5; i++) {
console.log(i); // 依次输出 1、2、3、4、5
}
总结
本文梳理了 JavaScript 的核心运算符和流程控制机制：
- 自增运算符的前缀/后缀差异直接影响返回值。
- 比较运算符中
===比==更严格，建议优先使用。 - 逻辑运算依赖真值/假值转换，需注意边界情况。
- 条件判断：
if适合区间判断，switch适合等值判断。 - 循环控制：
while适合未知次数，for适合已知次数，灵活运用break和continue优化逻辑。