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

2024.08.17

迴圈可以執行一個程式碼區塊，只要指定條件為真，迴圈就可以執行程式碼區塊。

一、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);  // false1.
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迴圈分別的優缺點進行了詳細的講解。

程式碼很簡單。希望能夠幫助你更好的學習。

NEWS