一篇文章帶你了解 JavaScript While 循環(huán)
循環(huán)可以執(zhí)行一個代碼塊,只要指定條件為真,循環(huán)就可以執(zhí)行代碼塊。
一、While循環(huán)
while只要指定條件的值為真,循環(huán)就會執(zhí)行指定語句。
while循環(huán)的語法:
while (condition) {
statement
// 只要條件為真,就執(zhí)行代碼
}
例:
<!DOCTYPE html>
<html>
<title>項(xiàng)目</title>
<body style="background-color: aqua;">
<h1>JavaScript while 語句</h1>
<p>只要n小于5,就遍歷一段代碼:</p>
<script>
var n = 0;
while (n < 5) {
document.write("<br>The number is " + n);
n++;
}
</script>
</body>
</html>
首先,在循環(huán)開始之前設(shè)置一個變量(var n = 0;)。
然后,定義循環(huán)運(yùn)行的條件。只要變量小于5,循環(huán)就會繼續(xù),每次執(zhí)行循環(huán)時,變量將增加一個(n ++) 一旦變量不小于5,條件為false,循環(huán)將結(jié)束。
注意:
如果要使用帶有條件的變量,請在循環(huán)之前對其進(jìn)行初始化,然后在循環(huán)內(nèi)對其進(jìn)行遞增。如果忘記增加變量,循環(huán)將永遠(yuǎn)不會結(jié)束。這將使您的瀏覽器崩潰。
二、無限循環(huán)
無限循環(huán)顧名思義,是一個循環(huán),將永遠(yuǎn)保持運(yùn)行。
如果不小心造成無限循環(huán),可能會導(dǎo)致瀏覽器或計算機(jī)崩潰。重要的是要意識到無限循環(huán),以便您可以避免它們。
當(dāng)while語句的條件設(shè)置為true時,會發(fā)生一個常見的無限循環(huán)。
while (true) {
statement
// 永遠(yuǎn)執(zhí)行代碼
}
無限循環(huán)將永遠(yuǎn)運(yùn)行,但是可以使用break關(guān)鍵字終止程序。
三、Do ... While循環(huán)
該do...while循環(huán)是while循環(huán)另外一種形式。在檢查條件是否為真之前,此循環(huán)將執(zhí)行一次代碼塊,然后只要條件為真,它將重復(fù)該循環(huán)。
該do...while循環(huán)的語法如下:
do {
statement
// 要執(zhí)行的語句
}
while (condition);
例
<!DOCTYPE html>
<html>
<title>項(xiàng)目</title>
<body style="background-color: aqua;">
<h1>JavaScript do...while</h1>
<p>只要n小于5,就遍歷一段代碼:</p>
<script>
var n = 0;
do {
document.write("<br>數(shù)字: " + n);
n++;
}
while (n < 5);
</script>
</body>
</html>
不要忘記增加條件中使用的變量,否則循環(huán)將永遠(yuǎn)不會結(jié)束。
注意:即使條件為false,這個循環(huán)也總是至少執(zhí)行一次,因?yàn)榇a塊是在條件測試之前執(zhí)行的。
例
var n = 5;
do {
document.write("<br>數(shù)字是 " + n);
n++;
}
while (n < 3); // false
四、循環(huán)對比
1.while和do ... while循環(huán)之間的區(qū)別
while循環(huán)不同于do…while循環(huán)以一種重要的方式使用while循環(huán),在每次循環(huán)迭代開始時測試要計算的條件,因此如果條件表達(dá)式的計算結(jié)果為false,則將永遠(yuǎn)不會執(zhí)行循環(huán)。
另一方面,使用do ... while循環(huán),即使條件表達(dá)式的計算結(jié)果為false,該循環(huán)也將始終執(zhí)行一次,因?yàn)榕cwhile循環(huán)不同,條件是在循環(huán)只回執(zhí)行末尾而不是在開始時計算的。(參考百度)。
2. For和While循環(huán)對比
for循環(huán)使用循環(huán)從fruits數(shù)組中獲取水果名稱。
例:
var fruits = ['strawberry', 'Mango', 'Banana', 'pineapple'];
var txt = '';
for (var i = 0; i < fruits.length; i++) {
txt += fruits[i] + '<br>';
}
while循環(huán)使用循環(huán)從fruits數(shù)組中獲取水果名稱。
例 :
var fruits = ['strawberry', 'Mango', 'Banana', 'pineapple'];
var txt = '';
var i = 0;
while (i < fruits.length) {
txt += fruits[i] + '<br>';
i++;
}
將發(fā)現(xiàn)while循環(huán)與for循環(huán)非常相似,只是省略了初始化和最終表達(dá)式。
五、總結(jié)
本文基于JavaScript基礎(chǔ)。主要介紹了While循環(huán)的基礎(chǔ)應(yīng)用,以及其中另外一種do ... while循環(huán),同時介紹了while和do ... while循環(huán)之間的區(qū)別。和For和While循環(huán)分別的優(yōu)缺點(diǎn)進(jìn)行了詳細(xì)的講解。
代碼很簡單。希望能夠幫助你更好的學(xué)習(xí)。