JS迴圈學習：while迴圈語句的使用（範例詳解）
迴圈就是重複做一件事，在編寫程式碼的過程中，我們經常會遇到一些需要反覆執行的操作，例如遍歷一些資料、重複輸出某個字串等，如果一行行的寫那就太麻煩了，對於這種重複的操作，我們應該選擇使用迴圈來完成。
迴圈的目的就是為了反覆執某段程式碼，使用迴圈可以減輕程式設計壓力，避免程式碼冗餘，提高開發效率，方便後期維護。while 迴圈是 JavaScript 中提供的最簡單的迴圈語句，下面我們來了解一下 while迴圈和do-while迴圈的使用。
一：while迴圈
while迴圈語句是一種當型迴圈語句，先對迴圈條件進行判斷，當條件滿足，則執行迴圈體，不滿足時則停止。
作用：反覆執行某一項操作，直到指定的條件不成立。
特點：先判斷表示式，當表示式結果為真時執行相應的語句。
1、JS while 迴圈語法
while(表示式){ //表示式為迴圈條件
// 要執行的程式碼
}語句解析：
先計算「表示式」的值，當值為真時， 執行迴圈體內的「PHP語句塊」；
說明：「表示式」的計算結果是布林型別（ TRUE 或 FALSE）的，如果是其他型別的值也會自動轉換為布林型別的值（因為PHP是弱語言型別，會根據變數的值，自動把變數轉換為正確的資料型別）。
「語句塊」就是由
{ }包圍的一個或多個語句的集合；如果語句塊中只有一個語句，也可以省略{ }。執行結束後，返回到表示式，再次計算表示式的值進行判斷，當表示式值為真，則繼續執行「語句塊」……這個過程會一直重複
直到表示式的值為假時才跳出迴圈，執行while 下面的語句。
while語句的流程圖如下所示：
通常「表示式」是使用比較運運算元或者邏輯運運算元計算後的值
範例程式碼如下：
<script>
var i = 1;
while( i <= 5) {
document.write(i+", ");
i++;
}
</script>
注意事項
在編寫回圈語句時，一定要確保條件表示式的結果能夠為假（即布林值 false），因為只要表示式的結果為 true，迴圈會一直持續下去，不會自動停止，對於這種無法自動停止的迴圈，我們通常將其稱為「無限迴圈」或「死迴圈」。
如果不小心造成無限迴圈，可能會導致瀏覽器或者計算機卡死。
如果表示式一直為真，迴圈條件一直成立，則while 迴圈會一直執行下去，永不結束，成為「死迴圈」
var i = 1;
while(i){
console.log(i);
}執行程式後，會一直輸出變數i的值，直到使用者強制關閉。
JS while 迴圈範例
【範例1】使用 while 迴圈計算 1~100 之間所有整數的和：
<script>
var i = 1;
var sum=0;
while(i<=100){
sum+=i;
i++;
}
console.log("1加到100的值為："+sum);
</script>輸出結果：
【範例2】找出 1900 年到 2020 年之間所有的閏年，並以每行 6 個進行輸出：
<script>
var i = 1900;
var count = 0; //計數閏年的個數
while (i <= 2020) {
//判斷是否是閏年
if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
document.write(i + " ");
count++;
if (count % 6 == 0) {
document.write("<br/>");
}
}
i++;
}
</script>
2、JS while 迴圈巢狀結構
while迴圈 也可以實現巢狀的效果，即 while 迴圈裡面巢狀一個或多個 while 迴圈。
語法格式：
while(條件1){
// 條件1成立執行的程式碼
while(條件2){
// 條件2成立執行的程式碼
......
}
}總結：巢狀就是包含的意思，所謂while迴圈巢狀，就是一個while裡面巢狀一個while的寫法，每個while和之前的基礎語法是相同的。
這裡，我們定義了兩個 while 迴圈的巢狀，當然，我們可以巢狀任意多個的 while 迴圈。
理解while迴圈執行流程
當內部迴圈執行完成之後，再執行下一次外部迴圈的條件判斷。
範例1：使用迴圈巢狀，列印計數器
<script type="text/javascript">
var i = 0;
while(i < 2){
console.log("i =", i);
var j = 0;
while(j < 2){
console.log("\tj =", j);
j += 1;
}
i++;
}
console.log("Over");
</script>
首先，我們定義了一個最外層的 while 迴圈巢狀，計數器 變數 i 從 0 開始，結束條件是 i < 2，每次執行一次迴圈將 i 的值加 1，並列印當前 i 的值。
在最外層迴圈的裡面，同時又定義了一個內部迴圈，計數器變數 j 從 0 開始，結束條件是 i < 2，每次執行一次迴圈將 j 的值加 1，並列印當前 j 的值。
while迴圈巢狀總結
JavaScript 的 while 迴圈也可以實現巢狀的效果，即 while 迴圈裡面巢狀一個或多個 while 迴圈。
範例2：
<script>
/*
1. 迴圈列印3次媳婦，我錯了
2. 刷碗
3. 上面是一套懲罰，這一套懲罰重複執行3天----一套懲罰要重複執行---放到一個while迴圈裡面
*/
var j = 0
while(j < 3){
var i = 0
while(i < 3){
document.write('媳婦，我錯了<br>')
i += 1;
}
document.write('刷碗<br>')
document.write('一套懲罰就結束了!!!!!!!!!!!!<br>')
j += 1;
}
</script>
二：do-while迴圈
除了while迴圈，還有一種 do-while 迴圈。
do-while迴圈語句是一種「直到型」迴圈語句，它是先在執行了一次迴圈體中的「語句塊」之後，然後再對迴圈條件進行判斷，如果為真則繼續迴圈，如果為假，則終止迴圈。
因此：不論表示式的結果，do-while迴圈語句至少會執行一次「語句塊」。
do-while迴圈語句的特點：先執行迴圈體，然後判斷迴圈條件是否成立。
1、JS do-while 迴圈語法
do{
語句塊;
}while(表示式);//表示式為迴圈條件語句解析：
先執行一次迴圈體中的「語句塊」，然後判斷「表示式」的值，當「表示式」的值為真時，返回重新執行迴圈體中的語句塊……這個過程會一直重複
直到表示式的值為假時，跳出迴圈，此時迴圈結束，執行後面的語句。
說明：
和while迴圈一樣，do-while迴圈中「表示式」的計算結果一定是布林型的 TRUE 或 FALSE，如果是其他型別的值也會自動轉換為布林型別的值。
do-while語句最後的分號
;是無法省略的（一定要有），它是do while迴圈語法的一部分。
do-while迴圈語句的流程圖如下所示：
JS do-while 迴圈範例
【範例1】使用 do-while 輸出1~5數位：
<script>
var i = 1;
do {
document.write(i+", ");
i++;
}while( i <= 5);
</script>
【範例2】使用 while 迴圈計算 1~100 之間所有整數的和：
<script>
var i = 1;
var sum=0;
do{
sum+=i;
i++;
}while(i<=100);
console.log("1 + 2 + 3 + ... + 98 + 99 + 100 = "+sum);
</script>
【範例3】找出 1900 年到 2020 年之間所有的閏年
<script>
var i = 1900;
var count = 0; //計數閏年的個數
do {
//判斷是否是閏年
if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
console.log(i);
}
i++;
}while (i <= 2020);
</script>
2、JS do-while 迴圈巢狀結構
do while迴圈 也可以實現巢狀的效果，即 do while 迴圈裡面巢狀一個或多個 do while 迴圈。這種寫法就類似於 while 迴圈 的巢狀。
語法：
do{
// 語句塊1;
do{
// 語句塊2;
do{
// 語句塊2;
......
}while(條件3);
}while(條件2);
}while(條件1);這裡，我們定義了三個 do while 迴圈的巢狀，當然，我們可以巢狀任意多個的 do while 迴圈。
案例：使用迴圈巢狀，列印計數器
<script type="text/javascript">
var i = 0;
do{
console.log("i =", i);
var j = 0;
do{
console.log("\tj =", j);
j += 1;
}while(j < 2);
i++;
}while(i < 2);
console.log("Over");
</script>
首先，我們定義了一個最外層的 do while 迴圈巢狀，計數器 變數 i 從 0 開始，結束條件是 i < 2，每次執行一次迴圈將 i 的值加 1，並列印當前 i 的值。
在最外層迴圈的裡面，同時又定義了一個內部迴圈，計數器變數 j 從 0 開始，結束條件是 i < 2，每次執行一次迴圈將 j 的值加 1，並列印當前 j 的值。
do while迴圈巢狀總結
JavaScript 的 do while 迴圈也可以實現巢狀的效果，即 do while 迴圈裡面巢狀一個或多個 do while 迴圈。
【推薦學習：】
以上就是JS迴圈學習：while迴圈語句的使用（範例詳解）的詳細內容，更多請關注TW511.COM其它相關文章！
