Day 7: 数组和循环

🎯 学习目标

理解数组的概念和用途
掌握 for 循环和 while 循环的使用
学会用数组存储和操作多个数据

💡 核心概念

什么是数组？

数组是一种可以存储多个值的变量。想象一下：

变量 = 一个盒子，只能放一个东西
数组 = 一排有编号的盒子，可以放多个东西

// 变量 - 只能存一个名字
let name = "张三";

// 数组 - 可以存多个名字
let names = ["张三", "李四", "王五"];

为什么需要数组？

批量处理: 一次性存储和操作多个相关数据
简化代码: 避免创建大量重复的变量
数据结构: 是其他复杂数据结构的基础

什么是循环？

循环是重复执行代码的结构。当需要：

遍历数组的每个元素
重复执行某段代码多次
处理类似的数据

📝 基本语法

数组的创建和访问

// 创建数组
let fruits = ["苹果", "香蕉", "橙子"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["文字", 123, true, null];

// 访问数组元素（索引从 0 开始）
console.log(fruits[0]);  // "苹果" - 第一个元素
console.log(fruits[1]);  // "香蕉" - 第二个元素
console.log(fruits[2]);  // "橙子" - 第三个元素

// 修改数组元素
fruits[0] = "葡萄";
console.log(fruits);  // ["葡萄", "香蕉", "橙子"]

// 获取数组长度
console.log(fruits.length);  // 3

for 循环

// 基本语法
for (初始化; 条件; 更新) {
    // 循环体 - 要重复执行的代码
}

// 示例 1: 打印数字 1-5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// 输出: 1, 2, 3, 4, 5

// 示例 2: 遍历数组
let colors = ["红", "黄", "蓝"];
for (let i = 0; i < colors.length; i++) {
    console.log(`颜色 ${i}: ${colors[i]}`);
}
// 输出: 颜色 0: 红, 颜色 1: 黄, 颜色 2: 蓝

while 循环

// 基本语法
while (条件) {
    // 循环体
}

// 示例: 倒计时
let countdown = 5;
while (countdown > 0) {
    console.log(countdown);
    countdown--;
}
// 输出: 5, 4, 3, 2, 1

for…of 循环（遍历数组）

let animals = ["猫", "狗", "鸟"];

for (let animal of animals) {
    console.log("动物: " + animal);
}
// 输出: 动物: 猫, 动物: 狗, 动物: 鸟

🎮 示例代码

示例 1: 计算数组中数字的总和

let scores = [85, 92, 78, 95, 88];
let sum = 0;

// 使用 for 循环求和
for (let i = 0; i < scores.length; i++) {
    sum += scores[i];
    console.log(`第 ${i+1} 门课成绩: ${scores[i]}`);
}

console.log("总分: " + sum);
console.log("平均分: " + (sum / scores.length));

输出:

第 1 门课成绩: 85
第 2 门课成绩: 92
第 3 门课成绩: 78
第 4 门课成绩: 95
第 5 门课成绩: 88
总分: 438
平均分: 87.6

示例 2: 找出数组中的最大值

let numbers = [23, 45, 12, 67, 34, 89, 5];
let max = numbers[0];  // 假设第一个是最大的

for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
        console.log(`发现更大的数字: ${numbers[i]}`);
    }
}

console.log("最大值是: " + max);

示例 3: 筛选数组中的偶数

let allNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = [];

for (let num of allNumbers) {
    if (num % 2 === 0) {  // 判断是否是偶数
        evenNumbers.push(num);
    }
}

console.log("所有数字: " + allNumbers);
console.log("偶数: " + evenNumbers);

示例 4: 创建一个待办事项列表

// 初始待办列表
let todos = ["写作业", "买菜", "打扫房间"];

// 添加新任务
todos.push("锻炼身体");
todos.push("阅读 30 分钟");

console.log("=== 我的待办事项 ===");

// 显示所有任务
for (let i = 0; i < todos.length; i++) {
    console.log(`${i + 1}. ${todos[i]}`);
}

// 标记完成
console.log("\n完成第 2 个任务: " + todos[1]);
todos.splice(1, 1);  // 删除第 2 个任务

console.log("\n=== 更新后的待办事项 ===");
for (let todo of todos) {
    console.log("• " + todo);
}

输出:

=== 我的待办事项 ===
1. 写作业
2. 买菜
3. 打扫房间
4. 锻炼身体
5. 阅读 30 分钟

完成第 2 个任务: 买菜

=== 更新后的待办事项 ===
• 写作业
• 打扫房间
• 锻炼身体
• 阅读 30 分钟

示例 5: 嵌套循环（乘法表）

console.log("=== 9x9 乘法表 ===");

for (let i = 1; i <= 9; i++) {
    let line = "";
    for (let j = 1; j <= i; j++) {
        line += `${j}×${i}=${i*j} `;
    }
    console.log(line);
}

输出:

=== 9x9 乘法表 ===
1×1=1 
1×2=2 2×2=4 
1×3=3 2×3=6 3×3=9 
1×4=4 2×4=8 3×4=12 4×4=16 
1×5=5 2×5=10 3×5=15 4×5=20 5×5=25 
1×6=6 2×6=12 3×6=18 4×6=24 5×6=30 6×6=36 
1×7=7 2×7=14 3×7=21 4×7=28 5×7=35 6×7=42 7×7=49 
1×8=8 2×8=16 3×8=24 4×8=32 5×8=40 6×8=48 7×8=56 8×8=64 
1×9=9 2×9=18 3×9=27 4×9=36 5×9=45 6×9=54 7×9=63 8×9=72 9×9=81

✍️ 练习任务

练习 1: 基础练习

任务: 创建一个存储一周温度的数组

要求:

定义数组 temperatures = [23, 25, 22, 26, 28, 30, 29]
用循环打印每天的气温
计算一周平均温度
找出最高温度和最低温度

提示:

使用 for 循环遍历数组
用变量保存最大值和最小值
平均温度 = 总和 / 数量

练习 2: 进阶练习

任务: 实现一个简单的购物车

场景:

let products = [
    {name: "苹果", price: 5},
    {name: "牛奶", price: 8},
    {name: "面包", price: 12}
];

let cart = ["苹果", "面包", "面包", "苹果"];

要求:

遍历购物车，打印每个商品
计算总价
统计每种商品的数量

练习 3: 实战应用

任务: 创建一个学生成绩管理系统

数据:

let students = [
    {name: "小明", scores: [85, 90, 88]},
    {name: "小红", scores: [92, 87, 95]},
    {name: "小刚", scores: [78, 85, 82]}
];

要求:

计算每个学生的平均分
找出总分最高的学生
统计所有学生的平均分
输出格式化的成绩单

输出示例:

=== 成绩单 ===
小明: 平均 87.7
小红: 平均 91.3
小刚: 平均 81.7

最高分: 小红 (总分 274)
班级平均分: 86.9

🎓 今日挑战

挑战任务: 设计一个简单的文字游戏

游戏规则:

电脑随机生成一个 1-100 的数字
玩家猜测数字，最多 10 次机会
每次提示"太大"或"太小"
记录每次猜测的历史

要求:

使用数组存储猜测历史
用循环控制游戏次数
显示猜测历史和建议
猜中或用完次数后显示结果

示例输出:

=== 猜数字游戏 ===
我已经想好了一个 1-100 的数字，你有 10 次机会！

第 1 次猜测 (50): 太大了！
第 2 次猜测 (25): 太小了！
第 3 次猜测 (37): 太小了！
...

猜测历史: [50, 25, 37, ...]
恭喜你！答案就是 42！

💡 常用数组方法

let nums = [1, 2, 3, 4, 5];

// 添加元素
nums.push(6);        // 末尾添加 -> [1,2,3,4,5,6]
nums.unshift(0);     // 开头添加 -> [0,1,2,3,4,5,6]

// 删除元素
nums.pop();          // 删除末尾 -> [0,1,2,3,4,5]
nums.shift();        // 删除开头 -> [1,2,3,4,5]

// 查找
nums.indexOf(3);     // 返回 3 的索引 (2)
nums.includes(4);    // true - 是否包含 4

// 数组变字符串
nums.join(", ");     // "1, 2, 3, 4, 5"
nums.toString();     // "1,2,3,4,5"

⚠️ 常见错误

错误 1: 数组索引越界

let arr = [1, 2, 3];
console.log(arr[5]);  // undefined - 没有索引 5

错误 2: 循环条件错误

// 错误: 忘记更新变量，变成死循环
let i = 0;
while (i < 5) {
    console.log(i);
    // 忘记 i++ - 会一直打印 0
}

// 正确
while (i < 5) {
    console.log(i);
    i++;  // 记得更新
}

错误 3: 混淆赋值和比较

// 错误: 应该用 === 而不是 =
for (let i = 0; i = 5; i++) {  // 死循环!
    // ...
}

// 正确
for (let i = 0; i < 5; i++) {
    // ...
}

🎯 调试技巧

1. 打印数组

let arr = [1, 2, 3];
console.log(arr);         // [1, 2, 3]
console.log(arr[0]);      // 1
console.log(arr.length);  // 3

2. 循环中的调试

for (let i = 0; i < 5; i++) {
    console.log(`第 ${i} 次循环`);  // 跟踪循环次数
    // 你的代码
}

3. 使用 debugger

let numbers = [1, 2, 3, 4, 5];
debugger;  // 程序会在这里暂停
for (let num of numbers) {
    console.log(num);
}

📚 延伸阅读

下一节: Day 8 – 对象
相关: Day 6 – 数组与对象（本节深入讲解）
进阶: forEach、map、filter 等高阶数组方法

学习时间: 2026-03-08
难度: ⭐⭐⭐☆☆
预计用时: 2-3 小时
关键词: 数组, 循环, for, while
相关标签: #02-变量与数据