一篇文章帶你了解JavaScript for循環

作者：前端進階者 2021-03-05 18:04:15

大家好，我是前端進階者。我們都知道，有了循環，就可以多次執行一段代碼。

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

例：

<!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 支持不同類型的循環:

for - 多次循環一段代碼。

for/in - 通過對象的屬性循環。

三、For 循環

for循環通常是你想創建循環時使用的工具。

語法:

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

語句1：循環(代碼塊)開始之前執行。

語句2：定義了運行循環的條件(代碼塊)。

語句3：循環(代碼塊)被執行后每次執行。

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

完整代碼:

<!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中初始化多個值(逗號分隔)。

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

可以省略語句1(如在循環開始之前設置值)。

<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也可以省略(例如當你在循環中增加你的值)。

<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 語句遍歷對象的屬性。

<!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>

for/in 語句通過對象的屬性循環.

五、總結

本文基于JavaScript 基礎。介循環中for循環在實際項目的應用。通過循環語法講解，文字的說明。不同種類的循環能夠讓讀者更好的去理解for 循環。

希望能夠幫助讀者更好的學習。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。

責任編輯：武曉燕來源：前端進階學習交流

JavaScript 循環代碼