JavaScript For 循环

软件技术NINI

于 2024-08-14 00:00:00 发布

阅读量384

点赞数 6

分类专栏： js 文章标签： javascript 前端服务器

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

版权

js 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

循环可多次执行代码块。

JavaScript 循环

假如您需要运行代码多次，且每次使用不同的值，那么循环（loop）相当方便使用。

通常我们会遇到使用数组的例子：

不需要这样写：

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

这样写:

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

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

结果：

不同类型的循环

JavaScript 支持不同类型的循环：

for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块

For 循环

for 循环是在您希望创建循环时经常使用的工具。

for 循环的语法如下：

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。

语句 2 定义运行循环（代码块）的条件。

语句 3 会在循环（代码块）每次被执行后执行

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

<body>
    <p id="demo"></p>
    <script>
        var text="";
        var i;
        for (i=0;i<5;i++){
            text+="晚上好"+i+"<br>";
        }
        document.getElementById("demo").innerHTML=text;
    </script>
</body>
</html>

结果：

从上面的代码中，您可以了解到：

语句 1 在循环开始之前设置了一个变量（var i = 0）。

语句 2 定义运行循环的条件（i 必须小于 5）。

语句 3 会在代码块每次执行之后对值进行递增（i++）。

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

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

</html>

结果：

而且您还可以省略语句 1（比如在循环开始前设置好值）

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var cars = ["BMW", "Volvo", "porsche", "Ford"];
        var i = 2;
        var len = cars.length;
        var text = "";

        for (; i < len; i++) {
            text += cars[i] + "<br>";
        }

        document.getElementById("demo").innerHTML = text;
    </script>

</body>

</html>

结果：

语句 2

通常语句 2 用于计算初始变量的条件。

但情况并不总是这样，JavaScript 不会在意。语句 2 也是可选的。

如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。

如果省略语句 2，那么必须在循环中提供一个 break。否则循环永远不会结束。请在下一章阅读更多关于 break 的内容。

语句 3

通常语句 3 会递增初始变量的值。

但情况并不总是这样，JavaScript 不会在意。语句 3 也是可选的。

语句 3 可做任何事情，比如负递增（i--），正递增（i = i + 15），或者任何其他事情。

语句 3 也可被省略（比如当您在循环内递增值时）：

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var cars = ["BMW", "Volvo", "porsche", "Ford"];

        var i = 0;
        var len = cars.length;
        var text = "";

        for (; i < len;) {
            text += cars[i] + "<br>";
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>

</body>

</html>

结果：

For/In 循环

JavaScript for/in 语句遍历对象的属性：

<!DOCTYPE html>
<html>

<body>

    <h1>JavaScript 循环</h1>

    <p>for/in 语句循环遍历对象的属性。</p>

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

    <script>
        var txt = "";
        var person = { fname: "Bill", lname: "Gates", age: 62 };
        var x;
        for (x in person) {
            txt += person[x] + " ";
        }
        document.getElementById("demo").innerHTML = txt;
    </script>

</body>

</html>
//Bill Gates 62