Day 4: 循环结构

🎯 学习目标

理解循环的概念和作用
掌握 for、while、do-while 循环
学会使用 break 和 continue
掌握 for…of 和 for…in 循环
了解循环的最佳实践

💡 核心概念

什么是循环？

循环用于重复执行相同的代码块。就像：

"绕操场跑5圈"
"把名单上的人逐一通知"

为什么需要循环？

// 没有循环
console.log("第1次");
console.log("第2次");
console.log("第3次");
// ...重复100次？

// 有循环
for (let i = 1; i <= 100; i++) {
    console.log(`第${i}次`);
}

📝 for 循环

基本语法

for (初始化; 条件; 迭代) {
    // 循环体
}

// 示例：打印1-5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

执行顺序

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// 顺序：
// 1. i = 1 (初始化)
// 2. 检查 i <= 5 (条件)
// 3. 执行 console.log(i)
// 4. i++ (迭代)
// 5. 回到步骤2

🔄 while 循环

基本语法

while (条件) {
    // 循环体
}

// 示例
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

使用场景

当不知道循环次数时使用。

// 等待用户输入正确值
let input;
while (input !== "quit") {
    input = prompt("输入命令（quit退出）");
}

🔁 do-while 循环

do {
    // 循环体
} while (条件);

// 示例：至少执行一次
let input;
do {
    input = prompt("输入一个正数");
} while (input <= 0);

特点：循环体至少执行一次。

🎯 for…of 循环

用于遍历数组的值。

const fruits = ["苹果", "香蕉", "橙子"];

for (let fruit of fruits) {
    console.log(fruit);
}

// 输出：
// 苹果
// 香蕉
// 橙子

🔑 for…in 循环

用于遍历对象的键。

const person = {
    name: "张三",
    age: 25,
    city: "北京"
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// 输出：
// name: 张三
// age: 25
// city: 北京

注意：不要用 for…in 遍历数组！

⏹️ break 和 continue

break – 跳出循环

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;  // 跳出循环
    }
    console.log(i);  // 只打印 1,2,3,4
}

continue – 跳过本次

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;  // 跳过本次，继续下一次
    }
    console.log(i);  // 打印 1,2,4,5
}

🎮 实战示例

示例1：计算数组和

function sumArray(numbers) {
    let sum = 0;
    for (let num of numbers) {
        sum += num;
    }
    return sum;
}

console.log(sumArray([1, 2, 3, 4, 5]));  // 15

示例2：查找最大值

function findMax(numbers) {
    let max = numbers[0];
    for (let num of numbers) {
        if (num > max) {
            max = num;
        }
    }
    return max;
}

示例3：过滤数组

function filterPositive(numbers) {
    let result = [];
    for (let num of numbers) {
        if (num > 0) {
            result.push(num);
        }
    }
    return result;
}

console.log(filterPositive([-1, 2, -3, 4, 0]));  // [2, 4]

示例4：嵌套循环（乘法表）

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

// 输出：
// 1×1=1 
// 1×2=2 2×2=4 
// 1×3=3 2×3=6 3×3=9 
// ...

示例5：数组查找

function findIndex(array, target) {
    for (let i = 0; i < array.length; i++) {
        if (array[i] === target) {
            return i;  // 找到返回索引
        }
    }
    return -1;  // 没找到
}

示例6：对象遍历

function printObjectProperties(obj) {
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {  // 检查是否是自身属性
            console.log(`${key}: ${obj[key]}`);
        }
    }
}

printObjectProperties({
    name: "张三",
    age: 25,
    city: "北京"
});

✍️ 练习任务

练习1：计算阶乘

function factorial(n) {
    let result = 1;
    for (let i = 2; i <= n; i++) {
        result *= i;
    }
    return result;
}

console.log(factorial(5));  // 120
console.log(factorial(10)); // 3628800

练习2：反转数组

function reverseArray(arr) {
    let reversed = [];
    for (let i = arr.length - 1; i >= 0; i--) {
        reversed.push(arr[i]);
    }
    return reversed;
}

console.log(reverseArray([1, 2, 3, 4, 5]));  // [5, 4, 3, 2, 1]

练习3：统计字符出现次数

function countCharacters(str) {
    let count = {};
    for (let char of str) {
        count[char] = (count[char] || 0) + 1;
    }
    return count;
}

console.log(countCharacters("hello"));
// {h: 1, e: 1, l: 2, o: 1}

练习4：生成斐波那契数列

function fibonacci(n) {
    let sequence = [0, 1];
    for (let i = 2; i < n; i++) {
        sequence[i] = sequence[i-1] + sequence[i-2];
    }
    return sequence.slice(0, n);
}

console.log(fibonacci(10));
// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

🎓 今日挑战

项目：猜数字游戏

function guessNumber() {
    const target = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;
    
    while (true) {
        let guess = parseInt(prompt("猜一个1-100的数字"));
        attempts++;
        
        if (guess === target) {
            alert(`恭喜！你用了${attempts}次猜对了！`);
            break;
        } else if (guess < target) {
            alert("太小了！");
        } else {
            alert("太大了！");
        }
    }
}

扩展功能：

限制最多猜10次
显示历史猜测记录
给出范围提示

⚠️ 常见错误

1. 无限循环

// ❌ 忘记迭代
let i = 0;
while (i < 10) {
    console.log(i);
    // 忘记 i++
}

// ✅ 正确
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

2. 循环条件错误

// ❌ 应该是 <=
for (let i = 0; i < 10; i++) {
    console.log(i);  // 只打印到9
}

// ✅ 包含10
for (let i = 0; i <= 10; i++) {
    console.log(i);  // 打印到10
}

3. 混淆 for…of 和 for…in

const arr = [10, 20, 30];

// ❌ 错误：for...in 遍历索引
for (let i in arr) {
    console.log(i);  // "0", "1", "2"
}

// ✅ 正确：for...of 遍历值
for (let num of arr) {
    console.log(num);  // 10, 20, 30
}

💡 最佳实践

1. 优先使用 for…of

// ✅ 更清晰
for (let item of array) {
    console.log(item);
}

// ❌ 传统方式
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

2. 避免深层嵌套

// ❌ 难读
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        for (let k = 0; k < 10; k++) {
            // ...
        }
    }
}

// ✅ 提取函数
function processItem(item) {
    // 处理逻辑
}

for (let item of items) {
    processItem(item);
}

3. 使用数组方法替代循环

// 传统方式
let doubled = [];
for (let num of numbers) {
    doubled.push(num * 2);
}

// 现代方式
let doubled = numbers.map(num => num * 2);

📚 循环应用场景

1. 数据处理

// 处理用户列表
users.forEach(user => {
    user.fullName = `${user.firstName} ${user.lastName}`;
});

2. 搜索和查找

// 查找特定元素
const found = products.find(p => p.id === targetId);

3. 数据转换

// 转换数据格式
const formatted = data.map(item => ({
    id: item.id,
    name: item.name.toUpperCase()
}));

4. 累计计算

// 计算总价
const total = cartItems.reduce((sum, item) => {
    return sum + item.price * item.quantity;
}, 0);

学习时间: 2026-03-07 13:30
难度: ⭐⭐⭐☆☆
预计用时: 2-3 小时
关键词: 循环, for, while, break, continue
相关标签: #03-控制流