循环语句

概述

循环语句用于重复执行某段代码。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	遍历可迭代对象

注意：
避免死循环
注意循环条件和更新表达式
选择合适的循环类型