JS中的循环结构[for,while,do while]结构分析及实例讲解。流程控制语句[break和continue]分析及讲解

循环结构分析及示例

`for`循环

for循环是一种基于计数器的循环，允许自定义循环的初始化、条件和迭代步骤。

语法:

for (初始化表达式；测试表达式；更新表达式){

// 循环体

}

初始化表达式：在循环开始前执行一次，通常用于声明和初始化循环控制变量。

测试表达式：在每次迭代前执行，如果为true，则执行循环体；如果为false，则退出循环。

更新表达式：在每次迭代后执行，通常用于更新循环控制变量。

示例：打印1到10的整数。

for (var i = 1; i <= 10; i++) {
console.log(i);
}

在这个代码块中，var i = 1是初始化表达式，它将变量i初始化为1。i <= 10是测试表达式，只要i的值小于或等于10，循环就会继续执行。i++是更新表达式，每次循环迭代后i的值会增加1。

`while`循环

while循环会持续执行，只要其测试表达式的结果为true。

语法:

while (测试表达式) {
// 循环体
}

测试表达式：在每次迭代前进行测试，如果为true，则执行循环体；如果为false，则退出循环。

示例：打印1到10的整数

var j = 1; // 初始化
while (j <= 10) {
console.log(j);
j++; // 迭代（重要，否则会导致无限循环）
}

在这个代码块中，j被初始化为1，然后进入while循环。只要j小于或等于10，循环就会继续执行。每次迭代后，j的值会增加1，以确保最终能够退出循环。

`do...while`循环

do...while循环至少执行一次，之后每次迭代都会检查测试表达式。

语法:

do {
// 循环体
} while (测试表达式);

测试表达式：在每次迭代后进行测试，如果为true，则继续执行下一次迭代；如果为false，则退出循环。

示例：至少执行一次循环体。

var k = 1; // 初始化
do {
console.log(k);
k++; // 迭代（重要，否则会导致无限循环）
} while (k <= 10);

在这个例子中，循环体至少执行一次，然后检查k是否小于或等于10。如果是，循环继续执行；如果不是，循环退出。

控制流程语句：`break`和`continue`

break语句：用于立即退出循环。无论是for、while还是do...while循环，break都会立即终止循环的执行。
continue语句：用于跳过当前迭代的剩余部分，并立即开始下一次迭代。它只影响当前的迭代过程。

示例：使用break和continue。

for (var i = 1; i <= 10; i++) {
if (i === 5) {
break; // 当i等于5时，退出循环
}
console.log(i); // 打印1到4和6到10的数字
}

for (var i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // 跳过偶数
}
console.log(i); // 只打印奇数
}

在第一个示例中，当i等于5时，break语句被执行，导致循环立即退出。在第二个示例中，当i为偶数时，continue语句被执行，导致跳过当前迭代的console.log(i)，只打印奇数。

综合实例源码

circulation.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//for循环打印1-10for(var a=1; a<=10;a++){console.log(a);}//while循环打印11-20var b = 10;while(b>=10 && b<=20){console.log(b);b=b+1; //b++   }//do-while循环打印20-30var c = 20;do{if(c>30){break;}else{console.log(c);c++; //c=c+1}}while(c>20 && c<=100)//for循环打印0-100中的奇数for(var i=100;i>=0;i--){if(i%2!=0){console.log(i);}else{console.log('----'+"偶数:"+i+'----');continue;}}//while循环打印0-100中的偶数var w = 0;while(w<=100){if(w%2==0){console.log('这是while循环中的偶数'+w);}else{w++;continue;}w++;}//do while循环打印奇数及偶数d = 0do{if(d%2==0){console.log('这是偶数'+d);}else if(d%2!=0){console.log('这是奇数'+d);}d++;}while(d<=100)</script>
</body>
</html>

实例解析

1. `for`循环打印1-10

for(var a=1; a<=10; a++) {
console.log(a);
}

这个循环会打印从1到10的整数。a初始化为1，只要a小于或等于10，循环就会继续。每次迭代后，a增加1。

2. `while`循环打印11-20

var b = 10;

while(b>=10 && b<=20){

console.log(b);

b=b+1; //b++

}

这段代码首先定义了一个变量 b 并初始化为 10。接下来，它进入一个 while 循环，此循环的条件是 b 必须同时满足 >=10 和 <=20。在循环体中，执行以下操作：

使用 console.log(b); 打印当前的 b 值。
通过 b=b+1（等同于 b++）来增加 b 的值。

循环逻辑

当 b 初始化为 10 时，因为 10 >= 10 且 10 <= 20 成立，所以进入循环。
在每次循环中，打印当前的 b 值，然后 b 的值增加 1。
当 b 增加到 21 时，循环条件 21 <= 20 不再成立，所以循环结束。

3. `do...while`循环打印20-30

var c = 20;
do {
if(c > 30) {
break;
} else {
console.log(c);
c++; // 相当于 c=c+1
}
} while(c > 20 && c <= 100);

这个循环会打印从20到30的整数。c初始化为20，循环至少执行一次。如果c大于30，循环通过break语句退出。否则，打印c的值，然后c增加1。循环继续，只要c在20到100之间。

4. `for`循环打印0-100中的奇数

for(var i=100; i>=0; i--) {
if(i % 2 != 0) {
console.log(i);
} else {
console.log('----' + "偶数:" + i + '----');
continue;
}
}

for 循环逻辑

初始化：变量 i 初始化为 100。
条件：循环持续执行直到 i 降到 0 以下。
迭代：每次循环结束后，i 的值递减 1（i--）。

循环体内的条件判断

使用 if (i % 2 != 0) 检查 i 是否为奇数：
如果是奇数：使用 console.log(i); 直接打印该数值。
如果是偶数：
使用 console.log('----' + "偶数:" + i + '----'); 打印格式化的字符串，标明它是一个偶数。
执行 continue; 语句，即跳过本次循环的剩余部分，直接进入下一次迭代。

5. `while`循环打印0-100中的偶数

var w = 0;
while(w <= 100) {
if(w % 2 == 0) {
console.log('这是while循环中的偶数' + w);
} else {
w++;
continue;
}
w++;
}

while 循环逻辑

初始化：变量 w 初始化为 0。
条件：循环持续执行直到 w 超过 100。

循环体内的逻辑

使用 if (w % 2 == 0) 检查 w 是否为偶数：
如果是偶数：使用 console.log('这是while循环中的偶数' + w); 打印偶数，并附带一段文字说明，标明它是在 while 循环中被识别和打印的。
否则（即 w 是奇数时）：
首先增加 w 的值（w++），确保跳过奇数，因为 continue 语句将跳过循环的剩余部分，直接进入下一次迭代的条件判断。
在 if 语句之后，无论是打印了偶数还是遇到了奇数并执行了 continue，w 的值都会再次通过 w++ 递增，以确保下一次循环的进行。