let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// 条件为真。此块中的代码将会运行。
console.log("Getting a new laptop!");
}
因为 1000 >= 800 计算结果为 true，代码块内的内容得以执行，控制台打印出“Getting a new laptop!”。
flowchart TD
A["? 程序开始"] --> B{"? currentMoney >= laptopPrice?"}
B -->|true| C["? '买新笔记本电脑！'"]
B -->|false| D["⏭️ 跳过代码块"]
C --> E["? 继续程序"]
D --> E
F["? If语句结构"] --> F1["if (condition) {"]
F1 --> F2[" // 如果条件为真时运行的代码"]
F2 --> F3["}"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
style F fill:#e3f2fd
If..Else 语句
但是如果你想在条件为假时执行不同的操作呢？这时就用到 else —— 就像有备选方案一样。
else 语句让你说“如果这个条件不为真，那就执行另一件事情。”
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// 条件为真。此代码块中的代码将运行。
console.log("Getting a new laptop!");
} else {
// 条件为假。此代码块中的代码将运行。
console.log("Can't afford a new laptop, yet!");
}
现在由于 500 >= 800 为 false，JavaScript跳过第一个代码块，转而执行 else 代码块。你会看到控制台打印“Can't afford a new laptop, yet!”。
flowchart TD
A["? 评估条件"] --> B{"条件为真？"}
B -->|是| C["? 执行 IF 块"]
B -->|否| D["? 执行 ELSE 块"]
C --> E["✅ 一条路径被执行"]
D --> E
F["? 现实示例"] --> F1["用户登录状态"]
F --> F2["年龄验证"]
F --> F3["表单验证"]
F --> F4["游戏状态变化"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#e3f2fd
style F fill:#f3e5f5
switch (expression) {
case x:
// 代码块
break;
case y:
// 代码块
break;
default:
// 代码块
}
它的结构如下：
JavaScript只计算表达式一次
遍历每个 case 寻找匹配项
找到匹配时执行该代码块
break 使JavaScript停止并退出switch
如果没有匹配项执行 default 块（如果存在）
// 使用 switch 语句的周日程序
let dayNumber = 2;
let dayName;
switch (dayNumber) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
dayName = "Unknown day";
break;
}
console.log(`Today is ${dayName}`);
在该例中，JavaScript看到 dayNumber 为 2，匹配到 case 2，将 dayName 设置为"Tuesday"，然后跳出switch。结果就是控制台打印“Today is Tuesday”。
flowchart TD
A["? switch(表达式)"] --> B["? 只计算一次"]
B --> C{"匹配案例 1?"}
C -->|是| D["? 执行案例 1"]
C -->|否| E{"匹配案例 2?"}
E -->|是| F["? 执行案例 2"]
E -->|否| G{"匹配案例 3?"}
G -->|是| H["? 执行案例 3"]
G -->|否| I["? 执行默认"]
D --> J["? break"]
F --> K["? break"]
H --> L["? break"]
J --> M["✅ 退出 switch"]
K --> M
L --> M
I --> M
style A fill:#e3f2fd
style B fill:#fff3e0
style M fill:#e8f5e8
✅ 通过运行这段代码和接下来的代码来测试你的理解。改变变量 a 的值，观察控制台输出变化。
? Switch 语句掌握：多选项处理
测试你的switch理解：
如果忘了写 break 会发生什么？
你什么时候会选择用 switch 而不是多个 if-else 语句？
即使你认为涵盖了所有可能，为什么 default 情况仍然有用？
pie title "何时使用每种决策结构"
"简单的 if-else" : 40
"复杂的 if-else 链" : 25
"Switch 语句" : 20
"三元运算符" : 15
flowchart LR
A["? 逻辑运算符"] --> B["&& 与"]
A --> C["|| 或"]
A --> D["! 非"]
B --> B1["两者都必须为真"]
B --> B2["真 && 真 = 真"]
B --> B3["真 && 假 = 假"]
C --> C1["至少一个为真"]
C --> C2["真 || 假 = 真"]
C --> C3["假 || 假 = 假"]
D --> D1["取反值"]
D --> D2["!真 = 假"]
D --> D3["!假 = 真"]
E["? 真实例子"] --> E1["年龄 >= 18 && 有驾照"]
E --> E2["是周末 || 是假日"]
E --> E3["!已登录"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
逻辑运算符的条件与决策
来看一个更现实的例子，演示这些逻辑运算符的用法：
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // 笔记本电脑价格打八折
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
// 条件为真。此代码块中的代码将被执行。
console.log("Getting a new laptop!");
} else {
// 条件为假。此代码块中的代码将被执行。
console.log("Can't afford a new laptop, yet!");
}
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
两种写法结果相同。三元运算符较简洁，而传统的if-else结构在复杂条件下更易读。
flowchart LR
A["? 三元运算符"] --> B["条件 ?"]
B --> C["值为真时 :"]
C --> D["值为假时"]
E["? 传统的 If-Else"] --> F["if (条件) {"]
F --> G[" 返回 值为真"]
G --> H["} else {"]
H --> I[" 返回 值为假"]
I --> J["}"]
K["⚡ 何时使用"] --> K1["简单赋值"]
K --> K2["简短条件"]
K --> K3["内联决策"]
K --> K4["返回语句"]
style A fill:#e3f2fd
style E fill:#fff3e0
style K fill:#e8f5e8
graph TD
A["? JavaScript 决策"] --> B["? 布尔逻辑"]
A --> C["? 条件语句"]
A --> D["? 逻辑运算符"]
A --> E["⚡ 高级模式"]
B --> B1["true/false 值"]
B --> B2["比较运算符"]
B --> B3["真值概念"]
C --> C1["if 语句"]
C --> C2["if-else 链"]
C --> C3["switch 语句"]
D --> D1["&& (与)"]
D --> D2["|| (或)"]
D --> D3["! (非)"]
E --> E1["三元运算符"]
E --> E2["短路求值"]
E --> E3["复杂条件"]
F["? 关键原则"] --> F1["清晰易读的条件"]
F --> F2["一致的比较风格"]
F --> F3["正确的运算符优先级"]
F --> F4["高效的求值顺序"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
journey
title 你的逻辑思维进化
section 今天
布尔困惑: 3: You
If-Else 理解: 4: You
操作符识别: 5: You
section 本周
复杂条件: 4: You
Switch 精通: 5: You
逻辑组合: 5: You
section 下个月
高级模式: 5: You
性能意识: 5: You
教授他人: 5: You
