JavaScript While 循环

软件技术NINI

于 2024-08-15 10:15:59 发布

阅读量261

点赞数 8

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

本文链接：https://blog.csdn.net/2301_78133614/article/details/141214792

版权

js 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

只要条件为 true，循环能够一直执行代码块。

While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

实例

在下面的例子中，循环中的代码将运行，一遍又一遍，只要变量（i）小于 10：

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

<body>
    <p id="demo"></p>
    <script>
        var text = "";
        var i = 0;
        while (i < 10) {
            text += "<br>数字是" + i;
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
<!-- 
数字是0
数字是1
数字是2
数字是3
数字是4
数字是5
数字是6
数字是7
数字是8
数字是9 
-->

如果您忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

语法

do {
    要执行的代码块
}

while (条件);

实例

下面的例子使用了 do/while 循环。该循环会执行至少一次，即使条件为 false，因为代码块会在条件测试之前执行：

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

<body>
    <p id="demo"></p>
    <script>
        var text = "";
        var i = 0;
        do  {
            text += "<br>数字是" + i;
            i++;
        }
        while(i < 10);
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
<!-- 
数字是0
数字是1
数字是2
数字是3
数字是4
数字是5
数字是6
数字是7
数字是8
数字是9 
-->

不要忘记对条件中所用变量进行递增，否则循环永不会结束！

比较 For 与 While

如果您已经阅读了之前关于循环的章节，您会发现 while 循环与 for 循环相当类似，其中的语句 1 和语句 2 都可以省略。

本例中的循环使用 for 循环来提取 cars 数组中的汽车品牌：

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var cars = ["BMW", "Volvo", "porsche", "Ford"];
        var i = 0;
        var text = "";
        for (; cars[i];) {
            text += cars[i] + "<br>";
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>

</body>

</html>
<!-- 
BMW
Volvo
porsche
Ford
 -->

本例中的循环使用 while 循环来提取 cars 数组中的汽车品牌：

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var cars = ["BMW", "Volvo", "porsche", "Ford"];
        var i = 0;
        var text = "";
        while (cars[i]) {
            text += cars[i] + "<br>";
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>

</body>

</html>
<!-- 
BMW
Volvo
porsche
Ford
 -->