JavaScript 核心运算符与流程控制详解 | 极客日志

JavaScript大前端java

JavaScript 核心运算符与流程控制详解

JavaScript 运算符涵盖自增、比较与逻辑运算，重点区分 == 与 === 的类型差异。流程控制包括条件判断（if、switch）及循环（while、for），掌握真值假值转换与 break/continue 用法是编写健壮逻辑的关键。

战神发布于 2026/3/210 浏览

JavaScript 核心运算符与流程控制详解

在 JavaScript 中，运算符和流程控制是实现逻辑处理的基础。掌握它们不仅能构建复杂的业务逻辑，还能避免常见的类型转换陷阱。

一、运算符：自增、比较与逻辑

1. 自增运算符（++）

自增分为前缀和后缀，核心区别在于返回值时机：

后缀自增（i++）：先返回当前值，再自增
前缀自增（++i）：先自增，再返回新值

实际开发中容易混淆，看个例子：

let i = 1;
console.log(i++ + ++i + i); // 结果为 7
// 解析：
// 1. i++ 先返回 1，i 变为 2
// 2. ++i 先自增为 3，返回 3
// 3. 此时 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(!9); // false（9 是真值）
console.log(!""); // true（空字符串是假值）

// 语法
if (条件) {
    // 条件为真时执行
} else {
    // 条件为假时执行
}

// 示例：判断空格字符串是否为真
if (" ") {
    console.log(true); // 输出：true
} else {
    console.log(false);
}

// 判断 2 与 "2" 是否绝对相等
document.write(2 === "2" ? "相等" : "不等"); // 输出：不等

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

let n = 5;
while (n--) {
    if (n === 3) continue; // 跳过 n=3 的循环
    document.write(`执行第${n}次<br/>`);
}
// 输出：
// 执行第 4 次
// 执行第 2 次
// 执行第 1 次
// 执行第 0 次

for (初始化；条件；更新) {
    // 循环体
}

// 输出 1-5
for (let i = 1; i <= 5; i++) {
    console.log(i); // 依次输出 1、2、3、4、5
}