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

作者：前端進階者 2021-06-22 10:12:37

本文基于JavaScript基礎。主要介紹了While循環的基礎應用，以及其中另外一種do ... while循環，同時介紹了while和do ... while循環之間的區別。和For和While循環分別的優缺點進行了詳細的講解。

循環可以執行一個代碼塊，只要指定條件為真，循環就可以執行代碼塊。

一、While循環

while只要指定條件的值為真，循環就會執行指定語句。

while循環的語法

while (condition) { 
statement 
   // 只要條件為真，就執行代碼 
}

例：

<!DOCTYPE html> 
<html> 
<title>項目</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>

首先，在循環開始之前設置一個變量(var n = 0;)。

然后，定義循環運行的條件。只要變量小于5，循環就會繼續，每次執行循環時，變量將增加一個(n ++) 一旦變量不小于5，條件為false，循環將結束。

注意：

如果要使用帶有條件的變量，請在循環之前對其進行初始化，然后在循環內對其進行遞增。如果忘記增加變量，循環將永遠不會結束。這將使您的瀏覽器崩潰。

二、無限循環

無限循環顧名思義，是一個循環，將永遠保持運行。

如果不小心造成無限循環，可能會導致瀏覽器或計算機崩潰。重要的是要意識到無限循環，以便您可以避免它們。

當while語句的條件設置為true時，會發生一個常見的無限循環。

while (true) { 
    statement 
  // 永遠執行代碼

無限循環將永遠運行，但是可以使用break關鍵字終止程序。

三、Do ... While循環

該do...while循環是while循環另外一種形式。在檢查條件是否為真之前，此循環將執行一次代碼塊，然后只要條件為真，它將重復該循環。

該do...while循環的語法如下：

do { 
   statement 
  // 要執行的語句 
} 
while (condition);

例

<!DOCTYPE html> 
<html> 
<title>項目</title> 
 
<body style="background-color: aqua;"> 
<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>

不要忘記增加條件中使用的變量，否則循環將永遠不會結束。

注意：即使條件為false，這個循環也總是至少執行一次，因為代碼塊是在條件測試之前執行的。

例

var n = 5; 
do { 
  document.write("<br>數字是 " + n); 
  n++; 
} 
while (n < 3);  // false

四、循環對比

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>'; 
}

while循環使用循環從fruits數組中獲取水果名稱。

例 :

var fruits = ['strawberry', 'Mango', 'Banana', 'pineapple']; 
var txt = ''; 
var i = 0; 
 
while (i < fruits.length) { 
   txt += fruits[i] + '<br>'; 
   i++; 
}

將發現while循環與for循環非常相似，只是省略了初始化和最終表達式。

五、總結

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

責任編輯：姜華來源：前端進階學習交流

JavaScript 前端 While 循環