一篇文章帶你了解JavaScript While 循環
迴圈可以執行一個程式碼區塊,只要指定條件為真,迴圈就可以執行程式碼區塊。
一、While循環
while只要指定條件的值為真,迴圈就會執行指定語句。
while迴圈的語法:
while (condition) {
statement
// 只要条件为真,就执行代码
}
- 1.
- 2.
- 3.
- 4.
例:
<!DOCTYPE html>
<html>
<title>项目</title>
<body>
<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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
首先,在循環開始之前設定一個變數(var n = 0;)。
然後,定義循環運行的條件。只要變數小於5,迴圈就會繼續,每次執行迴圈時,變數會增加一個(n ++) 一旦變數不小於5,條件為false,迴圈就會結束。
注意:
如果要使用帶有條件的變量,請在循環之前對其進行初始化,然後在循環內對其進行遞增。如果忘記增加變量,循環將永遠不會結束。這將使您的瀏覽器崩潰。
二、無限循環
無限循環顧名思義,是一個循環,將永遠保持運作。
如果不小心造成無限循環,可能會導致瀏覽器或電腦崩潰。重要的是要意識到無限循環,以便您可以避免它們。
當while語句的條件設為true時,會發生一個常見的無限迴圈。
while (true) {
statement
// 永远执行代码
}
- 1.
- 2.
- 3.
- 4.
無限迴圈將永遠運行,但可以使用break關鍵字終止程式。
三、Do ... While循環
該do...while循環是while循環另外一種形式。在檢查條件是否為真之前,此循環將執行一次程式碼區塊,然後只要條件為真,它將重複該循環。
該do...while循環的語法如下:
do {
statement
// 要执行的语句
}
while (condition);
- 1.
- 2.
- 3.
- 4.
- 5.
例
<!DOCTYPE html>
<html>
<title>项目</title>
<body>
<h1>JavaScript do...while</h1>
<p>只要n小于5,就遍历一段代码:</p>
<script>
var n = 0;
do {
document.write("<br>数字: " + n);
n++;
}
while (n < 5);
</script>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
不要忘記增加條件中使用的變量,否則循環將永遠不會結束。
注意:即使條件為false,這個迴圈總是至少執行一次,因為程式碼區塊是在條件測試之前執行的。
例
var n = 5;
do {
document.write("<br>数字是 " + n);
n++;
}
while (n < 3); // false
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
四、循環對比
1.while和do ... while迴圈之間的區別
while循環不同於do…while循環以重要的方式使用while循環,在每次循環迭代開始時測試要計算的條件,因此如果條件表達式的計算結果為false,則永遠不會執行循環。
另一方面,使用do ... while循環,即使條件表達式的計算結果為false,該循環也將始終執行一次,因為與while循環不同,條件是在循環只回執行末尾而不是在開始時計算的。 (參考百度)。
2. For和While循環對比
for循環使用循環從fruits數組中獲取水果名稱。
例:
var fruits = ['strawberry', 'Mango', 'Banana', 'pineapple'];
var txt = '';
for (var i = 0; i < fruits.length; i++) {
txt += fruits[i] + '<br>';
}
- 1.
- 2.
- 3.
- 4.
- 5.
while循環使用循環從fruits數組中獲取水果名稱。
例 :
var fruits = ['strawberry', 'Mango', 'Banana', 'pineapple'];
var txt = '';
var i = 0;
while (i < fruits.length) {
txt += fruits[i] + '<br>';
i++;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
將發現while迴圈與for迴圈非常相似,只是省略了初始化和最終表達式。
五、總結
本文基於JavaScript基礎。主要介紹了While循環的基礎應用,以及其中另外一種do ... while循環,同時介紹了while和do ... while循環之間的區別。和For和While迴圈分別的優缺點進行了詳細的講解。
程式碼很簡單。希望能夠幫助你更好的學習。