第三节：条件语句与循环：控制程序流程

第三节：条件语句与循环：控制程序流程

目标：熟练运用条件判断、循环结构，实现动态逻辑与重复操作，掌握常见算法的底层实现。

---

一、条件语句：让程序“聪明”起来

1. if-else 基础语法

• 作用：根据条件执行不同代码块。

• 语法模板：

  if (条件1) {
    // 条件1成立时执行
  } else if (条件2) {
    // 条件2成立时执行
  } else {
    // 其他情况执行
  }
  

• 示例：

  let age = 18;
  if (age < 13) {
    console.log("儿童");
  } else if (age >= 13 && age < 18) {
    console.log("青少年");
  } else {
    console.log("成年人"); // 输出：成年人
  }
  

2. 三元运算符（简化版 if-else）

• 语法：条件 ? 表达式1 : 表达式2

• 示例：

  let isMember = true;
  let price = isMember ? 99 : 199; // 会员价 99，非会员 199
  

3. switch 语句：多条件分支

• 适用场景：替代多个 if-else if，匹配离散值。

• 语法：

  switch (变量) {
    case 值1:
      // 代码1
      break;
    case 值2:
      // 代码2
      break;
    default:
      // 其他情况
  }
  

• 示例：

  let day = "Monday";
  switch (day) {
    case "Monday":
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
    case "Friday":
      console.log("工作日");
      break;
    case "Saturday":
    case "Sunday":
      console.log("周末");
      break;
    default:
      console.log("无效日期");
  }
  

• 注意：

  • 每个 case 后需加 break，否则会“穿透”执行后续代码。

---

二、循环结构：重复执行的高效方式

1. for 循环：经典循环语法

• 语法：

  for (初始化; 条件; 迭代) {
    // 循环体
  }
  

• 示例：

  // 计算 1~10 的和
  let sum = 0;
  for (let i = 1; i <= 10; i++) {
    sum += i;
  }
  console.log(sum); // 55
  

2. while 循环：先判断后执行

• 适用场景：循环次数不确定时（如用户输入验证）。

• 示例：

  let password = "";
  while (password !== "123456") {
    password = prompt("请输入密码：");
  }
  console.log("登录成功！");
  

3. do-while 循环：先执行后判断

• 特点：至少执行一次循环体。

• 示例：

  let num = 0;
  do {
    console.log(num); // 输出 0
    num++;
  } while (num > 10); // 条件为 false，但循环体已执行一次
  

4. 循环控制：break 与 continue

• break：立即终止循环。

  for (let i = 1; i <= 10; i++) {
    if (i === 5) break; // 输出 1,2,3,4 后终止
    console.log(i);
  }
  

• continue：跳过当前迭代，进入下一次循环。

  for (let i = 1; i <= 5; i++) {
    if (i === 3) continue; // 跳过 3
    console.log(i); // 输出 1,2,4,5
  }
  

5. 数组遍历：for...of 与 forEach

• for...of：直接获取元素值（无需索引）。

  let fruits = ["apple", "banana", "orange"];
  for (let fruit of fruits) {
    console.log(fruit); // 依次输出元素
  }
  

• forEach：数组方法，接受回调函数。

  fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`); // 输出索引和值
  });
  

• 对比：

  方法	是否能 break	能否获取索引	适用场景
  for...of	❌ 不能	❌ 需额外声明	简单遍历
  forEach	❌ 不能	✔️ 直接提供	函数式编程（链式调用）
  for	✔️ 能	✔️ 直接声明	需要中断或复杂逻辑的循环

---

三、综合案例：猜数字游戏

目标：实现一个用户输入数字，与随机数比较的猜数字游戏。

代码实现：

// 1. 生成随机数（1~100）
const target = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
 
// 2. 循环接收用户输入
while (true) {
  const guess = parseInt(prompt("猜一个 1~100 的数字："));
  attempts++;
 
  // 3. 判断结果
  if (guess === target) {
    console.log(` 猜对了！用了 ${attempts} 次。`);
    break; // 退出循环
  } else if (guess > target) {
    console.log("太大了！");
  } else {
    console.log("太小了！");
  }
}

---

四、常见陷阱与优化技巧

1. 死循环

• 错误示例：

  for (let i = 0; i < 10; i--) { // i-- 导致条件永远成立
    console.log(i); // 无限输出负数
  }
  

• 修复方法：确保迭代表达式能改变循环条件。

2. 变量作用域泄漏

• 错误示例：

  for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 输出 3,3,3（循环已结束）
  }
  

• 修复方法：

  • 使用 let（块级作用域）或立即执行函数（IIFE）。

  for (let i = 0; i < 3; i++) {
    setTimeout((j) => console.log(j), 100, i); // 输出 0,1,2
  }
  

3. 性能优化

• 减少循环内操作：将不变量移到循环外。

  // 低效：每次循环都计算数组长度
  for (let i = 0; i < arr.length; i++) { ... }
   
  // 高效：缓存长度
  const len = arr.length;
  for (let i = 0; i < len; i++) { ... }
  

---

五、课后任务

基础任务

1. 用 if-else 判断一个数字是正数、负数还是零。
2. 用 while 循环计算 1~100 的偶数和。
3. 用 for...of 遍历数组并输出每个元素的平方。

进阶任务

1. 改进猜数字游戏，限制最多 5 次猜测机会。

2. 用嵌套循环打印九九乘法表：

   1×1=1
   1×2=2 2×2=4
   ...
   

---

关键点总结

1. 条件语句：
   • if-else 适合复杂条件，switch 适合离散值匹配。
2. 循环结构：
   • for 适合已知次数，while 适合未知次数，for...of 适合数组遍历。
3. 性能与陷阱：
   • 避免死循环，注意变量作用域，优化循环内操作。

---

下一节预告

「函数：代码复用的魔法」

• 掌握参数传递、返回值、作用域链的底层原理。
• 破解闭包与高阶函数的实战应用。
• 动手实现一个计算器模块。

---

如果需要调整内容深度或补充示例（如更详细的 VSCode 调试配置），可以随时告诉我！