← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达
← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达

循环语句 - 程序的重复机器

循环的力量:从重复到简洁

想象一下,如果我们要打印数字1到10:

没有循环的情况:

加载代码编辑器...

用了循环:

加载代码编辑器...

这就是循环的威力:用3行代码代替10行代码!如果要打印1到1000,没有循环需要写1000行,用循环还是3行!循环就是编程中的"重复机器",让程序能够自动执行重复的任务。

for 循环 - 已知次数的重复

for 循环就像是我们生活中知道要重复多少次的任务,非常适合已知重复次数的情况。

for 循环的语法结构

for 循环的基本结构如下:

加载代码编辑器...

结构说明:

  • for:关键字(keyword),表示"循环",就像中文的"重复做"
  • 初始值:开始循环前的准备工作,通常声明一个计数器变量(如 let i = 1)
  • 条件:继续循环的条件,就像"什么时候停下来"
  • 更新:每次循环后做什么,通常更新计数器
  • {}:大括号,包围要重复执行的代码

直观理解:for 循环的执行过程

让我们用一个简单的例子来理解 for 循环是如何一步一步执行的:

加载代码编辑器...

for 循环的完整执行过程:

第1步:初始值设置

  • let i = 1:用 let 声明一个新变量 i,并设置为起始值 1
  • 这个变量 i 将作为我们的"计数器",用来跟踪循环执行到第几次

第2步:开始循环 每次循环都会按照以下顺序执行:

  1. 检查条件:i <= 3 是否为 true?

    • 如果 true:继续执行循环体内的代码
    • 如果 false:跳出循环,执行后面的代码
  2. 执行循环体:运行 {} 中的代码

    • console.log("第" + i + "次循环")
  3. 执行更新:i = i + 1 (让 i 增加 1)

    • 更新完成后,回到第1步重新检查条件

具体执行过程分解:

第1次循环:

  • 检查条件:1 <= 3 → true ✓
  • 执行:console.log("第1次循环")
  • 更新:i = i + 1 → i 变成 2

第2次循环:

  • 检查条件:2 <= 3 → true ✓
  • 执行:console.log("第2次循环")
  • 更新:i = i + 1 → i 变成 3

第3次循环:

  • 检查条件:3 <= 3 → true ✓
  • 执行:console.log("第3次循环")
  • 更新:i = i + 1 → i 变成 4

第4次尝试:

  • 检查条件:4 <= 3 → false ✗
  • 停止循环,执行后面的代码:console.log("循环结束")

关键理解:

  • 每次循环都先检查条件:条件为 true 才执行循环体
  • 执行完循环体后才更新变量:不是在循环过程中更新
  • 更新完成后立刻检查下一次条件:形成循环

强化理解的例子

例子1:倒计时

加载代码编辑器...

例子2:乘法表

加载代码编辑器...

例子3:累加求和

加载代码编辑器...

代码解释:

  • let total = 0:声明一个变量 total 作为"累加器",用来存储累加的结果
  • total = total + i:这是关键的一步!把当前的数字 i 加到 total 的现有值上
  • total 的作用:就像一个储蓄罐,每次把新的数字"存"进去,最终得到所有数字的总和

total 的变化过程:

  • 开始:total = 0
  • 第1次:total = 0 + 1 = 1
  • 第2次:total = 1 + 2 = 3
  • 第3次:total = 3 + 3 = 6
  • 第4次:total = 6 + 4 = 10
  • ...
  • 最后:total = 4950 + 100 = 5050

这种"累加器"模式在编程中非常常用,学会了可以解决很多求和问题!

for 循环的常见模式

模式1:从1开始计数

加载代码编辑器...

模式2:从0开始计数

加载代码编辑器...

💡 重要提示:后面我们在学到数组的时候就知道0开始的循环是常见的,因为数组也是从索引0开始计数的。这种模式可以帮助我们更好地理解和操作数组数据。

模式3:倒计时

加载代码编辑器...

模式4:步进为2(只输出偶数)

加载代码编辑器...

关键理解:

  • 初始值:i = 2 从第一个偶数开始
  • 更新:i = i + 2 每次增加2,跳过奇数
  • 步进:这就是"步进"的概念!可以控制每次循环增加的数量

应用场景:

  • 只处理偶数或奇数
  • 每隔N个元素处理一次
  • 跳过某些特定的情况

你可以改变步进的数字来实现不同效果,比如 i = i + 3 就会输出2, 5, 8, 11...

while 循环 - 条件性的重复

while 循环就像是我们生活中不确定要重复多少次,但知道什么时候停下来的任务,非常适合不确定重复次数但有明确结束条件的情况。

while 循环的语法结构

while 循环的基本结构如下:

加载代码编辑器...

结构说明:

  • while:关键字(keyword),表示"当...的时候",就像中文的"只要条件满足就继续"
  • 条件:一个结果为 true 或 false 的判断,就像"什么时候停下来"
  • {}:大括号,包围要重复执行的代码
  • 执行逻辑:只要条件为 true,就重复执行大括号中的代码

例子1:数字累加

让我们用一个简单的例子来理解 while 循环是如何工作的:

加载代码编辑器...

代码解释:

  • 初始状态:total = 0,number = 0,还没有开始累加
  • 条件:total <= 20 - 只要总和不超过20,就继续累加
  • 循环体:先增加number,再将新的number累加到total
  • 自动停止:当total超过20时,条件变成 false,循环自动停止

while 循环 vs for 循环

for 循环适用于:

  • 知道确切的重复次数(比如:写10遍课文)
  • 有明确的开始和结束

while 循环适用于:

  • 不知道要重复多少次,但知道停止条件
  • 需要根据某个条件来决定是否继续

强化理解的例子

例子1:平方累加

加载代码编辑器...

代码解释:

  • 初始状态:squareSum = 0,n = 0,还没有开始累加平方数
  • 条件:squareSum <= 100 - 只要平方总和不超过100,就继续累加
  • 循环体:先增加n,计算n的平方,然后累加到squareSum
  • 自动停止:当平方总和超过100时,条件变成 false,循环自动停止

循环选择指南

什么时候使用 for 循环?

  • ✅ 知道确切次数:执行10次、100次
  • ✅ 需要计数器:需要知道当前是第几次
  • ✅ 遍历范围:从1到100,从A到Z
加载代码编辑器...

什么时候使用 while 循环?

  • ✅ 不确定次数:直到满足某个条件为止
  • ✅ 条件控制:根据状态决定是否继续
  • ✅ 需要提前判断:在执行前检查条件

总结

今天我们深入学习了循环的基础概念,这是编程中最重要的核心技能之一!

📚 核心知识点

1. for 循环 - 确定次数的重复

  • 语法结构:for (初始值; 条件; 更新) { 循环体 }
  • 适用场景:知道确切重复次数(如:打印1-100)
  • 执行顺序:初始值 → 检查条件 → 执行循环体 → 更新 → 重复
  • 常见模式:从1开始、从0开始、倒计时、自定义步进

2. while 循环 - 条件性的重复

  • 语法结构:while (条件) { 循环体 }
  • 适用场景:不确定次数但有明确停止条件
  • 关键特点:每次执行前都检查条件
  • 注意事项:记得在循环体内更新条件变量

🎯 重要编程技巧

选择正确的循环类型

  • 已知次数 → 用 for 循环(语法结构清晰,推荐使用)
  • 未知次数 → 用 while 循环(灵活,适合条件控制)

关键编程模式

  • 累加器模式:用变量累积结果(如计算1到100的总和)
  • 计数器变量:声明变量(如 let i = 1)作为循环计数器来控制循环进程
  • 步进控制:设置不同的步长来跳过某些数值(如只输出偶数)

🚀 编程思维升级

从手动到自动化

  • 之前:重复写相似代码
  • 现在:让循环自动处理重复任务
  • 思考:"这个任务是否可以自动化?"

效率意识

  • 1行循环代码 vs 1000行重复代码
  • 学会用循环批量处理数据
  • 理解"代码简洁性"的价值

逻辑分析能力

  • 识别重复模式
  • 分析循环的终止条件
  • 预测循环的执行结果
  • 调试循环逻辑错误

恭喜!你已经掌握了编程的核心武器之一——循环!

循环让程序拥有了自动化处理重复任务的能力,这是编程从"简单工具"进化为"智能助手"的关键一步。现在你可以:

  • 解放双手:不再需要手动重复写代码
  • 提升效率:用几行代码处理成千上万次操作
  • 解决实际问题:处理现实世界中的批量数据
Previous lesson
Previous
逻辑运算符 - 简化复杂条件判断
Next
循环进阶 - break、continue与循环控制
Next lesson