一篇文章帶你了解JavaScript for循環(huán)
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
大家好，我是前端進(jìn)階者。我們都知道，有了循環(huán)，就可以多次執(zhí)行一段代碼。
一、JavaScript 循環(huán)
循環(huán)是方便的，如果你想重復(fù)地運(yùn)行同一個(gè)代碼，每次使用不同的值。
通常情況下，這是與數(shù)組一起工作:
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>";}
例：
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><h1>JavaScript 循環(huán)</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>
二、不同種類的循環(huán)
JavaScript 支持不同類型的循環(huán):
for - 多次循環(huán)一段代碼。
for/in - 通過對(duì)象的屬性循環(huán)。
三、For 循環(huán)
for循環(huán)通常是你想創(chuàng)建循環(huán)時(shí)使用的工具。
語法:
for (statement 1; statement 2; statement 3) {code block to be executed}
語句1：循環(huán)（代碼塊）開始之前執(zhí)行。
語句2：定義了運(yùn)行循環(huán)的條件（代碼塊）。
語句3：循環(huán)（代碼塊）被執(zhí)行后每次執(zhí)行。
for (i = 0; i < 5; i++) {text += "The number is " + i + "<br>";}
完整代碼:
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</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在循環(huán)開始前設(shè)置變量 (var i = 0)，語句2定義了循環(huán)運(yùn)行的條件 (i 必須小于 5)，語句3增加值(i++) 每次循環(huán)中的代碼塊都已被執(zhí)行。
1. 語句 1
通常，您將使用語句1初始化循環(huán)中使用的變量 (i = 0)。語句1是可選的，可以在語句1中初始化多個(gè)值（逗號(hào)分隔）。
for (i = 0; i < 5; i++) {text += "The number is " + i + "<br>";}
可以省略語句1（如在循環(huán)開始之前設(shè)置值）。
<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
經(jīng)常使用語句2來判斷初始變量的條件。
這是情況并非總是如此，JavaScript不在乎。語句2也是可選的.如果語句2返回true，則循環(huán)將重新啟動(dòng)，如果返回false，則循環(huán)將結(jié)束。
如果省略語句2，則必須在循環(huán)中提供一個(gè)中斷。否則循環(huán)永遠(yuǎn)不會(huì)結(jié)束。這將使你的瀏覽器崩潰。
3. 語句 3
經(jīng)常語句3增加初始變量的值.這是情況并非總是如此，JavaScript不在乎，并聲明3是可選的。
聲明3可以做任何事情，如負(fù)增量（i--），正增量（i = i + 15），或任何其他。
語句3也可以省略（例如當(dāng)你在循環(huán)中增加你的值）。
<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 循環(huán)
JavaScript for/in 語句遍歷對(duì)象的屬性。
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><h1>JavaScript 循環(huán)</h1><p>for/in 語句通過對(duì)象的屬性循環(huán).</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>
五、總結(jié)
本文基于JavaScript 基礎(chǔ)。介循環(huán)中for循環(huán)在實(shí)際項(xiàng)目的應(yīng)用。通過 循環(huán)語法講解，文字的說明。不同種類的循環(huán)能夠讓讀者更好的去理解for 循環(huán)。
希望能夠幫助讀者更好的學(xué)習(xí)。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行