【JavaScript】JavaScript 程序流程控制 ⑦ ( do-while 循环概念 | do-while 循环语法结构 )

韩曙亮

发布于 2024-03-28 10:06:17

600

发布于 2024-03-28 10:06:17

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、while 循环

1、while 循环概念

JavaScript 中的 do-while 循环是 while 循环的变体 , 是一种后测试循环 , 该循环的循环体至少执行一次 , 然后再检查 " 条件表达式 " 的布尔值结果 , 以决定是否继续循环 ;

如果 " 条件表达式 " 为 true , 则执行循环体 ;
如果 " 条件表达式 " 为 false, 则不执行循环体 , 退出循环 , 继续执行循环后面的代码 ;

do-while 循环与 while 循环的区别是 :

do-while 循环先执行一次循环体 , 至少执行一次 ;
while 循环判断 " 条件表达式 " 决定是否执行循环体 , 如果条件不满足则一次都不会执行 ;

2、do-while 循环语法结构

do-while 循环语法结构 :

do {  
  // 循环体代码
} while (条件表达式); // 条件：当此条件为真时，循环体会继续执行

执行后 , 不管条件表达式的结果是否为 true , 都先执行一次 " 循环体代码 " ,

然后再判定 " 条件表达式 " , 决定是否继续执行 " 循环体代码 " ;

二、do-while 循环代码示例

1、打印 1-5 数字

代码示例 :

let i = 1;  
  
do {  
  console.log(i);  
  i++;  
} while (i <= 5);

在上述 do-while 循环中 , 先执行循环体代码 , 打印变量 i 的值 , 并将 i 的值增加 1 ;

然后 , 它会检查 i 是否小于或等于 5 ,

如果是 , 条件表达式为 true , 再次执行循环体代码 ;
如果不是 , 如 : 当 i 的值变为 6 时 , 条件表达式变为 false , 循环结束 , 执行后续代码 ;

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // do-while 循环

        let i = 1;

        do {
            console.log(i);
            i++;
        } while (i <= 5);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、打印 1-10 累加和

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // do-while 循环

        let i = 1;
        let sum = 0;

        do {
            sum += i;
            i++;
        } while (i <= 10);

        console.log(sum);
    </script>
</head>

<body>
</body>

</html>

执行结果 :