前言

亲爱的循环魔法师们!上节课我们学会了用逻辑运算符连接条件,今天将探索程序最强大的魔法之一——循环🔁!这些神奇的咒语能让计算机不知疲倦地重复工作,就像魔法城堡里的永动齿轮。准备好控制重复的力量了吗?

回顾昨天学的

上节课我们掌握了:

  1. &&逻辑与 → 两个条件都满足才为真
  2. ||逻辑或 → 任一条件满足即为真
  3. !逻辑非 → 取反布尔值
  4. 应用:组合条件创建智能验证系统

今天学什么

今天我们探索两种循环魔法:

  1. while循环 → 当条件满足时重复执行
  2. for循环 → 精确控制次数的循环
  3. 破解无限循环诅咒的方法
  4. 实战:创建倒计时器和数字金字塔

今天要学的内容


🔄 第一部分:while循环 - 条件循环

想象你吃饼干的情景:

let cookies = 5;  // 现有5块饼干

// while循环结构
while (cookies > 0) { // 条件:饼干>0
  console.log("吃掉一块饼干");
  cookies--;  // 每吃一块减少1,等效于 cookies = cookies - 1
}

console.log("饼干吃完啦!");

🔍 逐行解析:

  1. while:循环咒语起始词
  2. (cookies > 0):循环条件(布尔值)
  3. { }:需要重复执行的代码块

⚠️ 危险警告:无限循环诅咒

忘记改变条件变量会导致无限循环:

// 恐怖示例!
let i = 0;
while (i < 10) { 
  console.log("卡死浏览器");
  // 漏掉 i++ → 永远满足条件 → 崩溃!
}

📊 执行流程图:

           ┌────────────┐
           │ cookies>0? │
           └─────┬──────┘
    false         │         true
          ┌──────┴───────┐
          ▼              ▼
   "饼干吃完啦"    执行代码块
                    cookies--

🎯 第二部分:for循环 - 精确计数器

当你知道具体需要重复多少次时:

// 打印1到10数字
for (let i = 1; i <= 10; i++) {
  console.log(i); 
}

🔧 结构解剖(三部分):

for (初始化; 条件; 操作) { 
  // 重复执行的内容
}
  1. 初始化let i = 1 → 创建计数器(只在循环开始时执行一次)
  2. 条件i <= 10 → 每次循环前检查(true继续/false停止)
  3. 操作i++ → 每次循环结束后执行(通常修改计数器)

💡 生活案例:倒计时发射器

// 火箭发射倒计时
for (let count = 5; count >= 1; count--) {
  console.log(count + "...");
}
console.log("🚀 发射!");

🔄 第三部分:循环控制符 - break与continue

有时候需要中途改变循环:

🛑 break - 强制终止循环

// 找数字7游戏
for (let num = 1; num <= 10; num++) {
  if (num === 7) {
    console.log("找到7了!");
    break; // 立即退出循环
  }
  console.log("正在检查:" + num);
}

⏭️ continue - 跳过本次循环

// 打印20以内的单数
for (let n = 1; n <= 20; n++) {
  if (n % 2 === 0) {  // 如果是偶数
    continue; // 跳过本次代码
  }
  console.log(n + "是单数");
}

🏗️ 第四部分:实战练习 - 数字金字塔

用循环构建图案:

// 打印5层金字塔
for (let row = 1; row <= 5; row++) {
  
  // 打印空格(使金字塔居中)
  let space = "";
  for (let s = 5 - row; s > 0; s--) {
    space += " ";
  }
  
  // 打印星号
  let star = "";
  for (let st = 1; st <= row*2-1; st++) {
    star += "*";
  }
  
  console.log(space + star);
}

📐 输出结果:

    *
   ***
  *****
 *******
*********

🧠 设计思路:

  1. 外层循环:控制金字塔行数(row从1到5)
  2. 内层循环1:生成每行前的空格(数量=5-当前行数)
  3. 内层循环2:生成星号(数量=行数*2-1)

明天学什么

第十课将进入数据宝库:

  1. 认识数组(Array) → 存放多个值的魔法口袋
  2. 学习存取数组元素的方法
  3. 使用数组的常用魔法(长度、增删、查找)
  4. 实战:学生成绩管理系统

成长秘诀

"循环不是简单的重复,而是用坚持的力量在数字世界雕刻时光"