JavaScript for循环完全指南
编程新手必学的重复执行神器 – 用通俗易懂的语言详细解析
循环是什么？为什么需要它？
想象一下你需要从1数到100，然后对每个数字做点什么事情。如果你一个个手动写，需要写100行代码！循环就是帮你自动完成这种重复工作的工具。
循环可视化演示
1
2
3
4
5
循环就像传送带一样，自动处理一组任务
在编程中，循环用于：
- 处理数组中的每个元素
- 重复执行某个操作指定次数
- 遍历对象的所有属性
- 读取文件或数据库的所有记录
for循环的基本结构
for循环是最常用的循环类型，它由三部分组成：
for (/* 初始化 */; /* 条件 */; /* 更新 */) {
// 要重复执行的代码
}
1. 初始化 (Initialization)
循环开始前执行一次，通常用于设置计数器变量
let i = 0; // 创建一个计数器，从0开始
2. 条件 (Condition)
每次循环前检查条件，如果为true则继续循环，false则停止
i < 5; // 当i小于5时继续循环
3. 更新 (Update)
每次循环结束后执行，通常用于更新计数器
i++ // 每次循环后i增加1
完整示例
for (let i = 0; i < 5; i++) {
console.log(“当前是第 “ + i + ” 次循环”);
}
输出结果：
当前是第 0 次循环
当前是第 1 次循环
当前是第 2 次循环
当前是第 3 次循环
当前是第 4 次循环
for循环的执行步骤
理解执行顺序非常重要：
- 执行初始化语句（只执行一次）
- 检查条件是否成立
- 如果条件成立，执行循环体内的代码
- 执行更新语句
- 回到步骤2
小贴士：循环次数怎么算？
循环次数 = (终值 – 初值) / 步长
例如：从0开始，小于5，每次增加1 → (5-0)/1 = 5次
循环控制语句
break – 紧急出口
当遇到break时，立即跳出整个循环
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 当i等于5时跳出循环
}
console.log(i);
}
// 输出: 0,1,2,3,4
continue – 跳过当前
跳过本次循环的剩余代码，直接进入下一次循环
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 跳过i=2这次循环
}
console.log(i);
}
// 输出: 0,1,3,4
循环的常见用途
1. 遍历数组
const fruits = [‘苹果’, ‘香蕉’, ‘橙子’];
for (let i = 0; i < fruits.length; i++) {
console.log(“水果: “ + fruits[i]);
}
2. 生成数字序列
// 生成1-100的偶数
for (let num = 2; num <= 100; num += 2) {
console.log(num);
}
3. 创建HTML元素列表
const names = [‘张三’, ‘李四’, ‘王五’];
let html = ‘<ul>’;
for (let i = 0; i < names.length; i++) {
html += ‘<li>’ + names[i] + ‘</li>’;
}
html += ‘</ul>’;
document.body.innerHTML = html;
for循环的亲戚们
for…in 循环
用于遍历对象的属性
const person = {
name: ‘小明’,
age: 20,
job: ‘学生’
};
for (let key in person) {
console.log(key + ‘: ‘ + person[key]);
}
注意：不推荐用于数组，因为会遍历所有可枚举属性
for…of 循环
用于遍历可迭代对象（数组、字符串等）
const colors = [‘红’, ‘绿’, ‘蓝’];
for (let color of colors) {
console.log(color);
}
更简洁，但不能直接访问索引
常见错误与注意事项
1. 无限循环
忘记更新计数器，导致循环永不停止：
for (let i = 0; i < 5; ) {
// 忘记写 i++
console.log(“卡住了!”);
}
// 浏览器会崩溃！
2. 循环条件错误
// 条件写反了，一次都不会执行
for (let i = 10; i < 5; i++) {
console.log(“不会执行”);
}
3. 计数器作用域问题
// 使用 var 会让计数器在循环外也能访问
for (var i = 0; i < 3; i++) {}
console.log(i); // 输出 3
// 改用 let 可以避免这个问题
for (let j = 0; j < 3; j++) {}
console.log(j); // 报错：j未定义
总结：循环四要素
- 起点：从哪里开始（初始化计数器）
- 终点：到哪里结束（循环条件）
- 步长：每次走多远（更新语句）
- 动作：每次循环做什么（循环体）
学习建议：多动手写循环代码，尝试不同的循环场景，遇到问题善用console.log()调试。
循环是编程的基础工具，掌握它你就打开了自动化处理数据的大门！