循环语句
2025-02-17
概述
循环语句用于重复执行某段代码。JavaScript 提供了多种循环结构：
- for 循环
- while 循环
- do...while 循环
- for...of 循环
循环的基本概念
| 组成部分 | 说明 |
|---|---|
| 初始化 | 设置循环的初始值 |
| 条件判断 | 决定是否继续循环 |
| 更新表达式 | 在每次循环后更新变量 |
for 循环
基本语法
for (初始化; 条件判断; 更新表达式) {
// 循环体代码
}示例：绘制圆形
// 在画布上绘制 100 个随机位置的圆
for (var i=0;i<100;i++) {
ctx.beginPath();
ctx.fileStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH),random(HEIGHT),random(50),0,Math.PI*2);
ctx.fill()
}
// 说明：
// - random() 返回 0 到参数值之间的随机数
// - WIDTH/HEIGHT 是画布的宽度和高度遍历数组示例
var cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
var info = "My cats are called ";
var para = document.querySelector("p");
for (var i = 0; i < cats.length; i++) {
info += cats[i] + ", ";
}
para.textContent = info;控制语句
| 语句 | 作用 | 示例 |
|---|---|---|
| break | 终止循环 | if(条件) break; |
| continue | 跳过本次循环 | if(条件) continue; |
while 循环语句
基本语法
// 初始化
let i = 0;
while (exit-condition) {
// 循环体代码
i++; // 更新表达式
}示例
var i = 0;
while (i < cats.length) {
if (i === cats.length - 1) {
info += "and " + cats[i];
} else {
info += cats[i] + ", ";
}
i++;
}do...while 循环
基本语法
// 初始化
let i = 0;
do {
// 循环体代码
i++; // 更新表达式
} while (exit-condition)示例
var i = 0;
do {
if (i === cats.length - 1) {
info += "and " + cats[i];
} else {
info += cats[i] + ", ";
}
i++;
} while (i < cats.length);循环的选择
| 循环类型 | 适用场景 |
|---|---|
| for | 已知循环次数 |
| while | 不确定循环次数 |
| do...while | 至少执行一次的循环 |
| for...of | 遍历可迭代对象 |
注意：
- 避免死循环
- 注意循环条件和更新表达式
- 选择合适的循环类型