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

最新推荐文章于 2025-05-14 22:27:35 发布

Zeddm

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量2.1k

点赞数 48

分类专栏：前端三部曲文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/h1008685/article/details/137994406

版权

前端三部曲专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中的for、while和do...while三种循环结构，包括它们的语法、示例和控制流程语句break和continue的用法。通过实例演示了如何利用这些循环结构遍历数字序列并进行条件控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环结构分析及示例

`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-10
        for(var a=1; a<=10;a++){
            console.log(a);
        }

        //while循环打印11-20
        var b = 10;
        while(b>=10 && b<=20){
            console.log(b);
            b=b+1; //b++   
        }

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

        //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 = 0
        do{
            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++ 递增，以确保下一次循环的进行。