循环流程可视化教学

什么是循环? 🤔

循环是编程中重复执行一段代码的核心结构,就像每天重复「起床→洗漱→吃饭→上学」的流程一样哦~ 一个完整的循环通常包含「初始化」「条件判断」「循环体执行」「更新变量」四个步骤,直到条件不满足时停止~

核心口诀:初始化→判断→执行→更新→再判断 🚀

循环流程可视化演示 🎬

案例1:1到5的数字累加(for循环)

// 循环结构:初始化→条件判断→执行→更新
let sum = 0; // 累加和初始化
for (let i = 1; i <= 5; i++) { // i=1(初始化); i<=5(条件); i++(更新)
    sum = sum + i; // 循环体:累加当前数字
}
console.log("累加和:", sum); // 最终结果:15 🎉
                        

循环执行步骤

步骤1

初始化
i=1, sum=0

步骤2

条件判断
i <= 5?

步骤3

循环体执行
sum = sum + i

步骤4

更新变量
i = i + 1

当前 i 值: 1
当前 sum 值: 0
循环次数: 0

准备开始循环啦~ 🥳

循环填数闯关小游戏 🎮

关卡 1 / 5

关卡1:填写循环参数,让循环输出 1、2、3、4、5(初始值:?,终止条件:?,步长:1) 🐰

运行结果:

点击「验证答案」查看结果哦~ 🐱

循环核心知识点总结 📖

循环的三个核心要素

  • 初始化:设置循环变量的初始值(如:let i = 1)
  • 条件判断:决定循环是否继续执行(如:i <= 5)
  • 更新变量:修改循环变量的值,避免无限循环(如:i++)

常见注意事项

  • 避免「无限循环」:确保循环变量会最终不满足条件 🚫
  • 步长设置合理:正数递增、负数递减(如:i-- 实现从5到1)
  • 循环体缩进:提高代码可读性,明确哪些代码属于循环内 📝

for循环的基本语法

for (初始化表达式; 条件表达式; 更新表达式) {
    // 循环体:需要重复执行的代码
}

// 示例
for (let i = 1; i <= 10; i++) {
    console.log("当前数字:", i);
}
                        

循环的应用场景

  • 批量处理数据(如:计算1到100的和) 🧮
  • 重复绘制图形(如:生成一个九宫格) 🎨
  • 遍历数组/列表(如:输出数组中所有元素) 📚
  • 实现游戏中的重复动作(如:敌人不断移动) 🎮