当前位置：主页 > 查看内容

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

发布时间：2021-05-07 00:00| 有 位朋友查看

简介：大家好，我是前端进阶者。我们都知道，有了循环，就可以多次执行一段代码。 一、JavaScript 循环 循环是方便的，如果你想重复地运行同一个代码，每次使用不同的值。 通常情况下，这是与数组一起工作: text+=cars[0]+ br ; text+=cars[1]+ br ; text+=cars[2]……

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

一、JavaScript 循环

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

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

  1. text += cars[0] + "<br>"; 
  2. text += cars[1] + "<br>"; 
  3. text += cars[2] + "<br>"; 
  4. text += cars[3] + "<br>"; 
  5. text += cars[4] + "<br>"; 
  6. text += cars[5] + "<br>"; 
  7.  
  8. 可以写成这样: 
  9.  
  10. for (i = 0; i < cars.length; i++) { 
  11.     text += cars[i] + "<br>"; 
  12. } 

例：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.     <head> 
  4.         <meta charset="UTF-8"> 
  5.         <title>项目</title> 
  6.     </head> 
  7.     <body style="background-color: aqua;"> 
  8.  
  9.         <h1>JavaScript 循环</h1> 
  10.  
  11.         <p id="demo"></p> 
  12.  
  13.         <script> 
  14.             var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"]; 
  15.             var text = ""; 
  16.             var i; 
  17.             for (i = 0; i < cars.length; i++) { 
  18.                 text += cars[i] + "<br>"; 
  19.             } 
  20.             document.getElementById("demo").innerHTML = text; 
  21. </script> 
  22.  
  23.     </body> 
  24. </html> 

二、不同种类的循环

JavaScript 支持不同类型的循环:

for - 多次循环一段代码。

for/in - 通过对象的属性循环。

三、For 循环

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

语法:

  1. for (statement 1; statement 2; statement 3) { 
  2.    code block to be executed 
  3. } 

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

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

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

  1. for (i = 0; i < 5; i++) { 
  2.    text += "The number is " + i + "<br>"; 
  3. } 

完整代码:

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <h1>JavaScript Loops</h1> 
  10.  
  11. <p id="demo"></p> 
  12.  
  13. <script> 
  14. var text = ""; 
  15. var i; 
  16. for (i = 0; i < 5; i++) { 
  17. text += "The number is " + i + "<br>"; 
  18. } 
  19. document.getElementById("demo").innerHTML = text; 
  20. </script> 
  21.  
  22. </body> 
  23. </html> 

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

1. 语句 1

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

  1. for (i = 0; i < 5; i++) { 
  2.    text += "The number is " + i + "<br>"; 
  3. } 

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

  1. <script> 
  2.    var cars = ["BMW", "Volvo", "Saab", "Ford"]; 
  3.    var i = 2; 
  4.    var len = cars.length; 
  5.    var text = ""; 
  6.  
  7.    for (; i < len; i++) { 
  8.        text += cars[i] + "<br>"; 
  9.   } 
  10.  
  11.    document.getElementById("demo").innerHTML = text; 
  12. </script> 

2. 语句 2

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

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

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

3. 语句 3

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

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

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

  1. <script> 
  2.    var cars = ["BMW", "Volvo", "Saab", "Ford"]; 
  3.  
  4.    var i = 0; 
  5.    var len = cars.length; 
  6.    var text = ""; 
  7.  
  8.    for (; i < len; ) { 
  9.        text += cars[i] + "<br>"; 
  10.        i++; 
  11.   } 
  12.    document.getElementById("demo").innerHTML = text; 
  13. </script> 

四、For/In 循环

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

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>项目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"> 
  8.  
  9.     <h1>JavaScript 循环</h1> 
  10.  
  11.     <p>for/in 语句通过对象的属性循环.</p> 
  12.  
  13.     <p id="demo"></p> 
  14.  
  15.     <script> 
  16.       var txt = ""; 
  17.       var person = { 
  18.         fname: "John", 
  19.         lname: "Doe", 
  20.         age: 25 
  21.       }; 
  22.       var x; 
  23.       for (x in person) { 
  24.         txt += person[x] + " "; 
  25.       } 
  26.       document.getElementById("demo").innerHTML = txt; 
  27. </script> 
  28.  
  29.   </body> 
  30. </html> 

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

五、总结

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

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

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/VQ8yiZvA_TMPh0Uu8u_jjg
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：如何通过Serverless提高Java微服务治理效率？ 下一篇：10个解放双手实用在线工具，有些代码真的不用手写

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐