循环语句

目录

• 概述
• 循环的基本概念
• for 循环
  • 基本语法
  • 示例：绘制圆形
  • 遍历数组示例
  • 控制语句
• while 循环语句
  • 基本语法
  • 示例
• do…while 循环
  • 基本语法
  • 示例
• 循环的选择

---

概述

循环语句用于重复执行某段代码。JavaScript 提供了几种循环结构：

• for 循环
• while 循环
• do…while 循环
• for…of 循环

循环的基本概念

组成部分	说明
初始化	设置循环的初始值
条件判断	决定是否继续循环
更新表达式	在每次循环后更新变量

for 循环

基本语法

for (初始化; 条件判断; 更新表达式) {
    // 循环体代码
}

示例：绘制圆形

// 在画布上绘制 100 个随机位置的圆
for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, Math.PI * 2);
    ctx.fill();
}

// 说明：
// - random() 返回 0 到参数值之间的随机数
// - WIDTH/HEIGHT 是画布的宽度和高度

遍历数组示例

const cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
let info = "My cats are called ";
const para = document.querySelector("p");

for (let i = 0; i < cats.length; i++) {
    info += cats[i] + ", ";
}

para.textContent = info;

现代写法用 let 而不是 var 声明循环变量，避免变量提升带来的作用域问题。

控制语句

语句	作用	示例
break	终止循环	if(条件) break;
continue	跳过本次循环	if(条件) continue;

while 循环语句

基本语法

// 初始化
let i = 0;

while (exit-condition) {
    // 循环体代码
    i++;  // 更新表达式
}

示例

let 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)

示例

let 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	遍历可迭代对象

写循环时注意条件要有终止的时候，否则会陷入死循环。