自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解JavaScript for循環(huán)

作者： 前端進(jìn)階者
開(kāi)發(fā) 前端
大家好，我是前端進(jìn)階者。我們都知道，有了循環(huán)，就可以多次執(zhí)行一段代碼。

[[385565]]

大家好，我是前端進(jìn)階者。我們都知道，有了循環(huán)，就可以多次執(zhí)行一段代碼。

一、JavaScript 循環(huán)

循環(huán)是方便的，如果你想重復(fù)地運(yùn)行同一個(gè)代碼，每次使用不同的值。

通常情況下，這是與數(shù)組一起工作:

  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>項(xiàng)目</title> 
  6.     </head> 
  7.     <body style="background-color: aqua;"> 
  8.  
  9.         <h1>JavaScript 循環(huán)</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> 

 

二、不同種類的循環(huán)

JavaScript 支持不同類型的循環(huán):

for - 多次循環(huán)一段代碼。

for/in - 通過(guò)對(duì)象的屬性循環(huán)。

三、For 循環(huán)

for循環(huán)通常是你想創(chuàng)建循環(huán)時(shí)使用的工具。

語(yǔ)法:

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

語(yǔ)句1：循環(huán)(代碼塊)開(kāi)始之前執(zhí)行。

語(yǔ)句2：定義了運(yùn)行循環(huán)的條件(代碼塊)。

語(yǔ)句3：循環(huán)(代碼塊)被執(zhí)行后每次執(zhí)行。

  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>項(xiàng)目</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> 

 

語(yǔ)句1在循環(huán)開(kāi)始前設(shè)置變量 (var i = 0)，語(yǔ)句2定義了循環(huán)運(yùn)行的條件 (i 必須小于 5)，語(yǔ)句3增加值(i++) 每次循環(huán)中的代碼塊都已被執(zhí)行。

1. 語(yǔ)句 1

通常，您將使用語(yǔ)句1初始化循環(huán)中使用的變量 (i = 0)。語(yǔ)句1是可選的，可以在語(yǔ)句1中初始化多個(gè)值(逗號(hào)分隔)。

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

可以省略語(yǔ)句1(如在循環(huán)開(kāi)始之前設(shè)置值)。

  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. 語(yǔ)句 2

經(jīng)常使用語(yǔ)句2來(lái)判斷初始變量的條件。

這是情況并非總是如此，JavaScript不在乎。語(yǔ)句2也是可選的.如果語(yǔ)句2返回true，則循環(huán)將重新啟動(dòng)，如果返回false，則循環(huán)將結(jié)束。

如果省略語(yǔ)句2，則必須在循環(huán)中提供一個(gè)中斷。否則循環(huán)永遠(yuǎn)不會(huì)結(jié)束。這將使你的瀏覽器崩潰。

3. 語(yǔ)句 3

經(jīng)常語(yǔ)句3增加初始變量的值.這是情況并非總是如此，JavaScript不在乎，并聲明3是可選的。

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

語(yǔ)句3也可以省略(例如當(dāng)你在循環(huán)中增加你的值)。

  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 循環(huán)

JavaScript for/in 語(yǔ)句遍歷對(duì)象的屬性。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>項(xiàng)目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"> 
  8.  
  9.     <h1>JavaScript 循環(huán)</h1> 
  10.  
  11.     <p>for/in 語(yǔ)句通過(guò)對(duì)象的屬性循環(huán).</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 語(yǔ)句通過(guò)對(duì)象的屬性循環(huán).

 

五、總結(jié)

本文基于JavaScript 基礎(chǔ)。介循環(huán)中for循環(huán)在實(shí)際項(xiàng)目的應(yīng)用。通過(guò) 循環(huán)語(yǔ)法講解，文字的說(shuō)明。不同種類的循環(huán)能夠讓讀者更好的去理解for 循環(huán)。

 

希望能夠幫助讀者更好的學(xué)習(xí)。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。 

 

責(zé)任編輯：武曉燕 來(lái)源： 前端進(jìn)階學(xué)習(xí)交流
JavaScript循環(huán)代碼
相關(guān)推薦

2024-01-30 13:47:45

2024-05-17 16:22:25

JavaScript

2024-08-16 15:44:53

JavaScriptWhile循環(huán)

2021-06-22 10:12:37

JavaScript 前端While 循環(huán)

2021-08-13 15:09:47

JavaScriptWhile循環(huán)

2023-07-30 15:18:54

JavaScript屬性

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2023-09-06 14:57:46

JavaScript編程語(yǔ)言

2024-04-19 14:23:52

SwitchJavaScript開(kāi)發(fā)

2021-05-18 08:30:42

JavaScript 前端JavaScript時(shí)

2020-11-10 10:48:10

JavaScript屬性對(duì)象

2021-01-29 18:41:16

JavaScript函數(shù)語(yǔ)法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2020-10-27 11:24:29

avaScript m

2021-07-02 10:00:50

JavaScriptObject 函數(shù)

2020-12-23 08:12:08

javascriptSVG腳本SVG元素

2022-01-21 11:28:59

window瀏覽器JavaScript
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)