前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一篇文章带你了解JavaScript for循环

一篇文章带你了解JavaScript for循环

作者头像
前端进阶者
发布2021-03-19 14:29:22
4130
发布2021-03-19 14:29:22
举报
文章被收录于专栏:前端进阶交流

明朝驿使发,一夜絮征袍。

大家好,我是前端进阶者。我们都知道,有了循环,就可以多次执行一段代码。

一、JavaScript 循环

循环是方便的,如果你想重复地运行同一个代码,每次使用不同的值。

通常情况下,这是与数组一起工作:

代码语言:javascript
复制
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

可以写成这样:

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

例:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <h1>JavaScript 循环</h1>

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

        <script>
            var cars = ["BMW", "Volvo", "Saab", "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 支持不同类型的循环:

  1. for - 多次循环一段代码。
  2. for/in - 通过对象的属性循环。

三、For 循环

for循环通常是你想创建循环时使用的工具。

语法:

代码语言:javascript
复制
for (statement 1; statement 2; statement 3) {
   code block to be executed
}

语句1:循环(代码块)开始之前执行。

语句2:定义了运行循环的条件(代码块)。

语句3:循环(代码块)被执行后每次执行。

代码语言:javascript
复制
for (i = 0; i < 5; i++) {
   text += "The number is " + i + "<br>";
}

完整代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目</title>
</head>
<body style="background-color: aqua;">

<h1>JavaScript Loops</h1>

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

<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

语句1在循环开始前设置变量 (var i = 0),语句2定义了循环运行的条件 (i 必须小于 5),语句3增加值(i++) 每次循环中的代码块都已被执行。

1. 语句 1

通常,您将使用语句1初始化循环中使用的变量 (i = 0)。语句1是可选的,可以在语句1中初始化多个值(逗号分隔)。

代码语言:javascript
复制
for (i = 0; i < 5; i++) {
   text += "The number is " + i + "<br>";
}

可以省略语句1(如在循环开始之前设置值)。

代码语言:javascript
复制
 <script>
   var cars = ["BMW", "Volvo", "Saab", "Ford"];
   var i = 2;
   var len = cars.length;
   var text = "";

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

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

经常使用语句2来判断初始变量的条件。

这是情况并非总是如此,JavaScript不在乎。语句2也是可选的.如果语句2返回true,则循环将重新启动,如果返回false,则循环将结束。

如果省略语句2,则必须在循环中提供一个中断。否则循环永远不会结束。这将使你的浏览器崩溃。

3. 语句 3

经常语句3增加初始变量的值.这是情况并非总是如此,JavaScript不在乎,并声明3是可选的。

声明3可以做任何事情,如负增量(i--),正增量(i = i + 15),或任何其他。

语句3也可以省略(例如当你在循环中增加你的值)。

代码语言:javascript
复制
 <script>
   var cars = ["BMW", "Volvo", "Saab", "Ford"];

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

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

四、For/In 循环

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

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>项目</title>
  </head>
  <body style="background-color: aqua;">

    <h1>JavaScript 循环</h1>

    <p>for/in 语句通过对象的属性循环.</p>

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

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

  </body>
</html>

五、总结

本文基于JavaScript 基础。介循环中for循环在实际项目的应用。通过 循环语法讲解,文字的说明。不同种类的循环能够让读者更好的去理解for 循环。

希望能够帮助读者更好的学习。

------------------- End -------------------

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端进阶学习交流 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、JavaScript 循环
  • 二、不同种类的循环
  • 三、For 循环
    • 1. 语句 1
      • 2. 语句 2
        • 3. 语句 3
        • 四、For/In 循环
        • 五、总结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档