闪电编程入门课-第二课

第2课：JavaScript编程进阶

闪电编程，助你闪电入门！⚡️⚡️⚡️

本节课的大纲：

• 第一课复习回顾
• JavaScript流程控制-循环
• JavaScript数据容器-数组
• JavaScript函数
• JavaScript面向对象

本节课学完后能收获什么：

• 能够使用循环，指挥计算机快速完成大量重复操作
• 能使用数组，存储和使用更多的数据
• 理解编程思想，能够使用函数封装起复杂的操作
• 理解面向对象，能够用对象对生活万物进行编程建模

课前准备：

在线代码编辑环境：闪电编程班练习区

第一节课程回顾： 闪电编程入门课-第一课

---

第一章：爱你3000次——JavaScript中的循环

1.1 什么是循环？为什么要用循环？

想象一下，你正在写一封情书，要一遍遍写下"爱你3000次"，每次修改数字。

爱你 1 次
爱你 2 次
爱你 3 次
······
爱你 999 次
······
爱你 3000 次

如果有3000次这样的重复，难道要手动写3000行吗？

当然不是！这时候，循环就该出场了。

for(let i=1; i<=3000; i++){
  console.log(`爱你 ${i} 次`);
}

循环是什么？

循环是编程中的一种控制结构，它允许我们重复执行一段代码，直到满足某个条件为止。

在编程中，当我们想让计算机重复执行某个任务时，我们不需要一遍又一遍地写同样的代码。

只需要告诉它： “重复做这件事N次”

或者： “一直做这件事，直到某个条件达成”。

这能节省大量时间，特别是在处理需要重复操作的任务时。

JavaScrip中最常用的是for循环和while循环。

1.2 for循环：明确知道重复次数

for循环是我们最常用的循环结构之一，特别适用于那些我们明确知道要重复多少次的场景 。

它的语法结构：

for (初始化; 条件判断; 每次循环后的操作) {`
      // 需要重复执行的代码
}

for循环三要素

• 初始化：let i=1（从第1个开始）
• 条件：i<5（到第5个为止）
• 循环操作：i++（每次加1）

翻译成大白话：

1. 初始化 (let i = 0): 这就像跑步前，你站在起跑线上，裁判给你发了一个号码牌，上面写着“0”，代表你跑了0圈。我们通常用一个变量 i（代表 index，索引）来作为计数器。
2. 条件判断 (i < 5): 这是循环继续下去的条件。裁判告诉你：“只要你跑的圈数小于5圈，你就得继续跑。”
3. 每次循环后的操作 (i++): 每跑完一圈，你号码牌上的数字就加1 (i++ 的意思就是 i = i + 1)。

我们来看一个具体的例子：

在控制台打印5次“你好，JavaScript！”。

for (let i = 0; i < 5; i++) {
  console.log("你好，JavaScript！当前是第 " + (i + 1) + " 次。");
}

这段代码的执行过程是：

• 第一次：i是0，小于5，打印消息，然后i变成1。
• 第二次：i是1，小于5，打印消息，然后i变成2。
• ...
• 第五次：i是4，小于5，打印消息，然后i变成5。
• 第六次：i是5，不再小于5，条件不成立，循环结束。

---

动手小练习1：一周打卡计划

场景: 你决定开始一个为期7天的学习计划，每天都需要在日记（控制台）中打卡一次。 任务: 使用for循环，在控制台输出从“学习打卡第1天”到“学习打卡第7天”的7行文字。

参考代码：

for (let i = 1; i <= 7; i++) {
  console.log("学习打卡第 " + i + " 天");
}

思考： 如果不知道要打卡多少天，只知道如果学会了就停下，该怎么写？

---

1.3 while循环：只知道停止的条件

while循环则适用于我们不知道具体要循环多少次，但知道在什么条件下应该停下来的场景 。

它的语法更简单：

while (条件判断) {
  // 需要重复执行的代码
}

翻译成大白话就是：“只要这个条件是真的，就一直做{}里面的事。”

来看一个模拟手机充电的例子：

let charge = 10; // 初始电量10%
while (charge < 100) {
  charge = charge + 10; // 每次充电10%
  console.log("当前电量: " + charge + "%");
}
console.log("充电完成!");

这个循环会一直执行，直到charge变量的值不再小于100。

警告：小心“死循环”！ while循环隐藏着一个初学者最容易犯的错误：死循环（Infinite Loop）。如果在上面的例子中忘记了写charge = charge + 10这行代码，那么charge的值将永远是10，charge < 100这个条件将永远成立，循环将永不停止，直到浏览器崩溃！

动手小练习2：升级游戏

场景: 你在玩一个游戏，模拟一个游戏角色的升级过程。 任务: 使用while循环模拟升级：角色从1级开始，每次循环升1级，直到升到5级为止（也就是说，当等级达到5时就停止）。每次升级，都打印出“当前等级：X”。

参考代码：

let level = 1;
while (level <= 5) {
  console.log("当前等级：" + level);
  level++; // 千万别忘了这句！
}
console.log("已达到最高等级！");

---

1.4 break和continue：循环的“暂停”与“跳过”

有时候在循环过程中，我们需要一些特殊的控制，break和continue就是循环中的两个“特权指令”。

• break（停止循环）：  立即跳出整个循环。比如，你计划跑10圈，但跑到第3圈时突然下大雨，你就可以用 break 停止跑步。
• continue（跳过本轮）：  立即结束当前这一轮循环，直接进入下一轮。比如，跑第5圈时你鞋带松了，你停下来系好鞋带（跳过这一圈的计时），然后继续跑第6圈。

示例：寻找幸运数字

假设我们要在一个长长的队伍里（1到20号）找到8号幸运儿，并给他发奖品，然后活动就结束了。

for (let i = 1; i <= 20; i++) {
  if (i === 8) {
    console.log("找到了！" + i + "号是幸运儿！发奖品！");
    break; // 发完奖品，活动结束，不用再找了
  }
  console.log("正在检查 " + i + " 号...");
}

示例：跳过不喜欢的楼层

假设一栋大楼有10层，但你不喜欢4层，所以电梯会跳过这一层。

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    console.log("电梯跳过4层。");
    continue; // 跳过本次循环的剩余部分，直接去检查下一层
  }
  console.log("电梯到达 " + i + " 层。");
}

章节练习：创建一个倒计时器

任务要求：

1. 使用for循环或while循环创建一个倒计时器
2. 从100开始倒数到0
3. 当倒数到66时，使用continue跳过输出并直接开始倒数
4. 当倒数到50时，使用break退出循环并输出"时间过半，立即行动！"

参考代码：

// 使用for循环的倒计时器
for (let i = 100; i >= 0; i--) {
  if (i === 66) {
    continue; // 跳过100的输出
  }
  if (i === 50) {
    console.log("时间过半，立即行动！");
    break; // 当倒数到50时退出循环
  }
  
  console.log(`剩余时间: ${i}秒`);
}

思考： 能用while循环写出来吗？

第二章：编程里的数字小抽屉——JavaScript数组

2.1 什么是数组？

想象你有一个专门放袜子的抽屉，里面有很多格子，每个格子都按顺序编号：0号，1号，2号……你可以把不同颜色的袜子放进去。这个带编号格子的抽屉，就是“数组”。

在JavaScript中， 数组（Array）就是一个可以按顺序存储多个值的“容器”或“列表”。这些值可以是数字、文字、甚至是其他更复杂的东西 。

生活类比：

• 播放列表： 你的音乐App里的播放列表就是一个数组，里面按顺序存放着一首首歌名。
• 购物清单： 你去超市前写的购物清单也是一个数组，上面列着要买的牛奶、鸡蛋、面包等。
• 队伍： 排队买票的人群也是一个数组，每个人都有一个从0开始的位置编号。

2.2 创建和访问数组

创建数组很简单，用方括号 [] 把所有元素括起来，元素之间用逗号 , 分隔。

// 创建一个存储水果名称的数组
let fruits = ["苹果", "香蕉", "橙子"];

// 创建一个存储分数的数组
let scores = [95, 88, 100, 76];

数组里的每个东西，我们称之为“元素”。每个元素都有一个自己的“门牌号”，叫做 索引（index） 。非常重要的一点是：索引是从 0 开始的！

我们可以通过 数组名[索引] 的方式来访问或修改特定元素。

• fruits[0] 会得到 "苹果"`
• fruits[1] 会得到 "香蕉"`
• 思考： 怎么样能得到 "橙子"？

console.log(fruits[1]);  // 输出:"香蕉"
fruits[1] = "葡萄"; // 直接修改数组中的元素，把"香蕉"换成"葡萄"
console.log(fruits); // 输出：["苹果", "葡萄", "橙子"]

如果想知道数组里有多少个元素，可以使用 数组.length 属性：

console.log(fruits.length);  // 输出：3

---

动手小练习1：我的周末计划

场景: 你正在规划你的周末活动。 任务:

1. 创建一个名为 weekendPlans 的数组，里面包含三项字符串活动：“看电影”，“写代码”，“逛公园”。
2. 打印出你的第一个活动（“看电影”）。
3. 你临时改变了主意，决定把第二个活动“写代码”改成“朋友聚会”。请修改数组，并打印出第二个活动。
4. 打印出修改后，你现在总共有几项活动。

参考代码：

  let weekendPlans = ["看电影", "写代码", "逛公园"];
  console.log("我的第一个活动是：" + weekendPlans[1]);
  console.log("我的第二个活动是：" + weekendPlans[2]);

  weekendPlans[2] = "朋友聚会";
  console.log("修改后的第二个活动是：" + weekendPlans[2]);

  console.log("我总共有 " + weekendPlans.length + " 项活动。");

---

2.3 数组的操作：添加和删除

数组是动态的，我们可以随时往里面添加或删除元素 。最常用的两个方法是 push 和 pop。

• push()：  在数组的末尾添加一个或多个元素。就像在购物清单最后再添一项 。
• pop()：  移除并返回数组的最后一个元素。就像划掉清单上的最后一项。

我们通过 数组名.方法名() 的方式来使用数组的这两个方法。

代码示例：

• push(): 在数组末尾添加一个元素

  let fruits = ["苹果", "香蕉"];
  
  fruits.push("草莓");
  console.log(fruits); // 输出: ["苹果", "香蕉", "草莓"]
  

• pop(): 从数组末尾移除一个元素

  let fruits = ["苹果", "香蕉", "草莓"];
  
  fruits.pop();
  console.log(fruits); // 输出: ["苹果", "香蕉"]
  

2.4 遍历数组：循环与数组的完美结合

当我们需要对数组里的每一个元素都做同样的操作时（比如打印出购物清单上的每一项），就可以把上一章学的for循环和数组结合起来，这叫遍历数组 。

let shoppingList = ["牛奶", "鸡蛋", "面包", "苹果"];

for (let i = 0; i < shoppingList.length; i++) {
  console.log("我需要购买：" + shoppingList[i]);
}

这段代码中，i 从0开始，一直到 shoppingList.length - 1，正好对应了数组的每一个索引。

---

动手小练习2：自动点名器

场景: 你是班长，需要点名班上的所有同学。 任务:

1. 创建一个名为 students 的数组，并预设几位同学的名字，例如 ["小明", "小红", "小刚"]。
2. 使用pop( )方法，移除数组中最后一个同学。
3. 使用push( )方法两次，为数组末尾添加两位同学“小八”、“乌萨奇”。
4. 使用 for 循环遍历这个数组。 在循环中，为每个学生使用console.log( ) 打印点名信息，例如“乌萨奇，到！！！”。

参考代码：

let students = ["小明", "小红", "小刚"];

students.pop()
students.push("小八")
students.push("乌萨奇")
for (let i = 0; i < students.length; i++) {
  console.log(students[i] + "，到！！！");
}

---

本章大练习：一周心情记录

场景: 你想开发一个简单的小工具，用来记录和分析你一周的心情。

任务:

1. 创建一个名为 moods 的空数组，用来记录一周7天的心情。
2. 使用 push() 方法，向 moods 数组中依次添加7个代表心情的字符串，例如：“开心”, “平静”, “有点累”, “开心”, “激动”, “平静”, “开心”。
3. 统计好心情天数：
   • 初始化一个计数器变量 happyDays 为0。
   • 使用 for 循环遍历 moods 数组。
   • 在循环内部， 首先使用console.log（）打印 “我今天的心情是：xx”；再使用if判断检查当前心情是否是“开心”。如果是，就让 happyDays 加1。
4. 循环结束后，打印出这样的总结：“本周我总共有 X 天心情是开心的！要继续保持哦！”

参考代码：

let moods = [];

// 记录一周心情
moods.push("开心");
moods.push("平静");
moods.push("有点累");
moods.push("开心");
moods.push("激动");
moods.push("平静");
moods.push("开心");



// 统计好心情天数
let happyDays = 0;
for (let i = 0; i < moods.length; i++) {
    console.log("我今天的心情是：" + moods[i]);
  if (moods[i] === "开心") {
    happyDays++; // happyDays = happyDays + 1
  }
}

console.log("--------------------");
console.log("本周我总共有 " + happyDays + " 天心情是开心的！要继续保持哦！");

---

第三章：神奇工具锤——JavaScript中的函数

3.1 什么是函数？

我们已经学会了用循环来重复单行或少数几行代码。但如果我们需要重复的是一个复杂的操作流程呢？

想象一下，你每天早上都要做一杯果汁。步骤是：

1.拿出水果，2.清洗水果，3.切水果，4.放入榨汁机，5.加水，6.启动榨汁机。

每天都重复想一遍这个流程是不是很麻烦？如果榨汁机上有一个“一键制作果汁”的按钮，你只要按一下，它就自动完成所有步骤，那该多好。

在JavaScript里，函数（Function） 就是这个“按钮”。它允许我们把一个或多个操作步骤打包（封装）起来，并给它起一个名字。以后，无论何时何地，只要我们想执行这个流程，只需要呼叫它的名字即可，而无需关心里面具体的实现细节。这大大提高了代码的复用性和可读性。

例如，我们想计算圆的面积 S = πr²，如果直接写 3.14 * r * r 多处使用，不但麻烦，而且如果要改用更精确的 π 值要改很多地方。使用函数，我们可以这样做：

//定义函数
function areaOfCircle(r) {
  return 3.14 * r * r;
}

//使用函数
let s1 = areaOfCircle(12.34);
let s2 = areaOfCircle(9.08);

在编程中，函数（Function）就是一段可以被重复调用，用来完成特定任务的代码块 。

为什么要用函数？

1. 减少重复：  同样的代码不用写很多遍。
2. 提高可读性：  把复杂的功能封装起来，让主代码更清晰。
3. 便于维护：  只需要修改函数本身，所有调用它的地方都会更新。

3.2 定义和调用函数

定义一个函数，就像是在为我们的“按钮”设计操作图纸，告诉它具体要做什么。

语法是：

function 函数名() { // 要执行的代码块 }

// 定义一个名为 showGreeting 的函数
function showGreeting() {
  console.log("--------------------");
  console.log("大家好，欢迎学习函数！");
  console.log("--------------------");
}

这里，我们只是定义了函数，就像设计好了图纸，但榨汁机还没开始工作。代码执行到这里时，什么都不会发生。

要让函数真正运行起来，我们需要调用（Call) 它。调用函数的语法非常简单，直接写出它的名字，后面跟上一对圆括号()。

// 调用函数
showGreeting();

3.3 参数与返回值：让函数更强大

刚才的“一键制作果汁”按钮虽然方便，但它只能制作一种固定口味的果汁。如果我们今天想喝草莓汁，明天想喝香蕉汁，怎么办？我们需要一种方式，在按下按钮的时候，告诉它我们今天想用什么“原料”。

这个“原料”，在函数里就叫做参数（Parameter） 。参数是函数接收外部信息的一扇窗户。我们在定义函数时在圆括号里声明参数，就像给机器预留了投料口。

// 定义一个带参数的函数，name 就是参数
function greetUser(name) {
  console.log("你好, " + name + "! 欢迎来到这里。");
}

在调用这个函数时，我们需要在圆括号里提供具体的值（称为实参 Argument），这个值就会被传递给函数内部的name参数。

greetUser("张三"); // 打印 "你好, 张三! 欢迎来到这里。"
greetUser("莉莉"); // 打印 "你好, 莉莉! 欢迎来到这里。"

现在我们的函数变得灵活多了！

接下来，一个功能完备的机器不仅要能接收原料，还应该能产出“成品”。榨汁机产出的是果汁，计算器函数产出的是计算结果。函数产出的这个“成品”，就叫做返回值（Return Value） 。我们使用return关键字来指定函数的返回值。

示例：

// 定义一个计算两个数之和的函数
function add(num1, num2) {
  let sum = num1 + num2;
  return sum; // 将计算结果 sum 作为返回值
}

当函数执行到return语句时，它会立刻结束，并把return后面的值“吐”出来。我们可以用一个变量来接收这个返回值。

示例：

let result = add(5, 3); // 调用add函数，并将返回值8存入result变量
console.log(result); // 打印 8

let anotherResult = add(100, 200);
console.log(anotherResult); // 打印 300

区分：console.log()只是在控制台“显示”一个值，它本身并没有产出任何东西。而return是真正地“交出”一个值，这个值可以被程序的其他部分继续使用、计算或存储。

案例：手动实现加法函数

// 1. 定义一个计算器函数，接收两个数字作为参数
function add(num1, num2) {
  let sum = num1 + num2;
  return sum; // 返回计算结果
}

// 2. 调用函数，并用一个变量接收返回的结果
let result = add(5, 3);
console.log("5 + 3 的结果是: " + result); // 输出: 5 + 3 的结果是: 8

在这个例子里，num1和num2是形参（形式上的参数，像食谱里的“适量盐”），

而调用时传入的5和3是实参（实际的参数，像你真的放了一勺盐） 。

---

动手小练习：年龄计算器

场景: 请编写一个名为calculateAge的函数。这个函数应该：

1. 接收一个参数：birthYear（出生年份）。
2. 在函数内部，用当前年份（为简化，我们初始化为2024年）减去出生年份，计算出年龄。
3. return这个计算出的年龄。
4. 调用这个函数，传入你自己的出生年份，并将返回的年龄打印到控制台。

参考代码：

function calculateAge(birthYear) {
  let currentYear = 2024;
  let age = currentYear - birthYear;
  return age;
}

let myAge = calculateAge(1998);
console.log("我的年龄大约是: " + myAge + "岁。");

第四章：万物皆可建模——JavaScript中的对象

4.1 超越数组：为什么需要对象？

我们已经学习了数组，它可以很好地存储一个有序的列表，比如 ["苹果", "香蕉", "橙子"]。但如果我想描述一个更复杂的东西，比如一只猫，怎么办？

一只猫有名字、有年龄、有颜色，还会喵喵叫。如果用数组来表示，可能是这样的：["咪咪", 2, "橘色"]。但问题来了，2是年龄还是体重？"橘色"是毛色还是眼睛的颜色？数组只关心顺序，不关心每个元素的含义。

为了解决这个问题，JavaScript提供了另一种强大的数据结构—— 对象（Object）。

对象允许我们用键值对（Key-Value Pair） 的方式来存储和组织数据，它描述的是一个事物的各方面属性。

生活类比：

• 个人简历： 一份简历就是一个对象。它有“姓名”、“年龄”、“教育背景”等 键（Key） ，每个键后面都对应着具体的 值（Value） ，如“张三”、“25岁”、“XX大学”。
• 手机通讯录里的联系人： 每个联系人都是一个对象，包含“姓名”、“电话号码”、“邮箱”等属性。

4.2 创建和使用对象

对象使用花括号 {} 来创建，里面包含一系列的键值对。键和值之间用冒号 : 分隔，每对之间用逗号 , 分隔。

{ key1: value1, key2: value2,... }

• 键（Key） ：就是我们说的“标签”，它是一个字符串，用来描述这个值的含义。
• 值（Value） ：就是具体的信息，可以是任何数据类型（数字、字符串、数组，甚至另一个对象）。

// 创建一个描述猫的对象
let cat = {
  name: "咪咪",
  age: 2,
  color: "橘色",
  isCute: true
};

这里，name、age、color、isCute 就是 键（属性名） ，

而 "咪咪"、2、"橘色"、true 就是 值（属性值）。

如何访问对象的属性呢？主要有两种方式：

1. 点表示法 (Dot Notation): 对象名.属性名

   console.log(cat.name); // 输出: 咪咪
   console.log(cat.age);  // 输出: 2
   

2. 方括号表示法 (Bracket Notation): 对象名['属性名']

   console.log(cat['color']); // 输出: 橘色
   

点表示法更简洁常用，但在某些特殊情况下（比如属性名包含空格或是一个变量时），必须使用方括号表示法。

我们也可以随时修改或添加对象的属性：

// 修改属性
cat.age = 3; 
console.log(cat.age); // 输出: 3

// 添加新属性
cat.owner = "小明";
console.log(cat.owner); // 输出: 小明

动手小练习：创建我最喜欢的书本对象

场景：

1. 创建一个名为 myFavoriteBook 的对象。代表你最喜欢的一本书。
2. 它有三个属性（键值对）：title（书名，字符串），author（作者，字符串），和 pageCount（页数，数字）。
3. 在控制台打印出这本书的作者。
4. 为这个对象添加一个新的属性 isRead，并将其值设置为 true（布尔值，表示你已经读过）。

参考答案：

let myFavoriteBook = {
  title: '三体',
  author: '刘慈欣',
  pageCount: 900
};

console.log(myFavoriteBook.author);

myFavoriteBook.isRead = true;
console.log(myFavoriteBook);

---

4.3 对象的“行为”：方法

对象不仅可以有属性（描述它是什么），还可以有 方法（Method） （描述它能做什么）。方法其实就是存放在对象属性里的一个函数。

let cat = {
  name: "咪咪",
  age: 3,
  color: "橘色",
  
  // 这是一个方法
  meow: function() {
    console.log("喵~ 我是" + this.name);
  }
};

// 调用对象的方法
cat.meow(); // 输出: 喵~ 我是咪咪

这里的 this 关键字很特别，它指向了调用这个方法的对象本身，也就是 cat 对象。这样，方法内部就可以访问到对象自己的其他属性了。

---

4.4 数组与对象的结合：管理复杂数据

在真实世界中，我们常常需要管理一个列表，而列表中的每一项都是一个复杂的实体。这时，就是数组和对象大显身手的时候了！我们可以创建一个对象的数组 。

示例：一个班级的学生名册

let students = [
  { name: "张三", score: 95, city: "北京" },
  { name: "李四", score: 88, city: "上海" },
  { name: "王五", score: 92, city: "广州" }
];

// 访问第一个学生的姓名
console.log(students.name); // 输出: 张三

// 遍历所有学生，并打印他们的信息
for (let i = 0; i < students.length; i++) {
  let student = students[i];
  console.log(student.name + " 同学，来自 " + student.city + "，考了 " + student.score + " 分。");
}

对象+数组 这种数据结构非常非常常用，它能清晰地组织大量复杂的信息。

---

课后练习：我的线上书架

场景: 你想用代码来管理你的电子书架。

任务:

1. 创建一个名为 bookshelf 的数组。
2. 创建三个不同的对象，每个对象代表一本书。每本书对象都应该包含以下属性：
   • title (书名，字符串)
   • author (作者，字符串)
   • pages (页数，数字)
3. 使用 push() 方法，将这三本书的对象都添加到 bookshelf 数组中。
4. 写一个“图书推荐”程序：
   • 使用 for 循环遍历 bookshelf 数组。
   • 在循环内部，使用 if 语句判断，如果一本书的页数少于300页，就在控制台打印推荐语：“推荐阅读：《书名》，作者：作者，这本书比较薄，只有XX页。”

参考代码：

// 1 & 2. 创建书本对象和书架数组
let book1 = { title: "JavaScript高级程序设计", author: "Nicholas C. Zakas", pages: 862 };
let book2 = { title: "你不知道的JavaScript", author: "Kyle Simpson", pages: 276 };
let book3 = { title: "代码整洁之道", author: "Robert C. Martin", pages: 464 };
let book4 = { title: "小王子", author: "安托万·德·圣-埃克苏佩里", pages: 96 };


let bookshelf = [];
bookshelf.push(book1);
bookshelf.push(book2);
bookshelf.push(book3);
bookshelf.push(book4);


// 4. 图书推荐程序
console.log("--- 轻量阅读推荐 ---");
for (let i = 0; i < bookshelf.length; i++) {
  let book = bookshelf[i];
  if (book.pages < 300) {
    console.log("推荐阅读：《" + book.title + "》，作者：" + book.author + "，这本书比较薄，只有" + book.pages + "页。");
  }
}

---

第五章：课程总结与展望

总结：

今天学到的JS核心概念和语法：

概念 (Concept)	核心用途 (Purpose)	基础语法示例 (Basic Syntax Example)	通俗类比 (Analogy)
for 循环	精确控制次数的重复	for (let i = 0; i < 10; i++) {... }	健身教练喊口令做10次动作
while 循环	当条件满足时持续重复	while (condition) {... }	只要手机没充满就一直充电
数组 (Array)	按顺序存储一列表的数据	let arr = [10, 'apple', true];	万能收纳盒 / 购物清单
函数 (Function)	封装可复用的代码块	function myFunc(param) { return...; }	榨汁机上的“一键启动”按钮
对象 (Object)	描述一个事物的多个属性	let obj = { name: 'Tom', age: 10 };	个人信息登记卡 / 蓝图

我们这节课做了大量的练习，为什么呢？ 因为编程的学习，本质就是不断练习、不断试错的过程，这是最快的提升编程能力的方式。

从代码到创意：p5.js 在等你

现在，你已经手握一套编程工具箱，下一节课我们将进入 p5.js 创意编程世界。

在 p5.js 中，你今天学到的一切都会派上用场：

• 你会用对象来表示一个圆（包含 x, y 坐标、颜色、大小等属性）。
• 你会用数组来存放成百上千个这样的圆。
• 你会用循环来同时更新和绘制所有这些圆。
• 你会用判断来检查鼠标是否点击到了某个圆。
• 你会用函数（如 setup() 和 draw()）来组织你的整个动画逻辑。

编程之旅才刚刚开始。带着这些新技能进入p5.js的奇妙世界，去创造属于你自己的计算机艺术作品吧！祝大家学习愉快！