一篇文章帶你了解JavaScript for循環
作者：前端進階者
大家好，我是前端進階者。我們都知道，有了循環，就可以多次執行一段代碼。
一、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>
五、總結
本文基于JavaScript 基礎，介紹循環中 for 循環在實際項目的應用。通過循環語法講解，文字的說明能夠讓讀者更好的去理解 for 循環。
責任編輯：華軒
來源：
前端進階學習交流
