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

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

[[385565]]

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

一、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>"

例:

  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 

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

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

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

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

完整代码:

  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. document.getElementById("demo").innerHTML = text; 
  19. </script> 
  20.  
  21. </body> 
  22. </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>"

可以省略语句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 循环。

 

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

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

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2024-01-30 13:47:45

2021-06-22 10:12:37

JavaScript 前端While 循环

2021-08-13 15:09:47

JavaScriptWhile循环

2021-01-29 18:41:16

JavaScript函数语法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2023-07-30 15:18:54

JavaScript属性

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-09 14:04:01

JavaScriptCookie数据

2021-06-24 09:05:08

JavaScript日期前端

2023-06-06 15:45:40

JavaScript数组

2021-05-07 14:17:01

JavaScript元素网页

2021-11-26 11:10:07

JavaScript 节点导航

2021-04-20 11:20:24

Java开发运算符

2023-06-01 17:10:12

HTMLJavaScript

2023-07-25 16:06:57

JavaScript对象

2023-07-14 14:56:47

JavaScriptwindow
点赞
收藏

51CTO技术栈公众号