JavaScript - While 迴圈

你好，未來的編程超級巨星！今天，我們要一起探索令人興奮的 JavaScript while 迴圈的世界。作為你親切友善的鄰居電腦老師，我將帶領你透過大量的範例和解釋來開展這次旅程。所以，拿起你的虛擬背包，讓我們一起踏上這次迴圈的冒險吧！

JavaScript - While Loop

JavaScript while 迴圈

while 迴圈就像一個堅持不懈的朋友，不斷地問："我們到了嗎？"直到你終於達到目的地。它是編程中的一個基本工具，讓我們能夠在指定的條件為真的情況下重複一段代碼。

基本語法

以下是最簡單形式的 while 迴圈：

while (condition) {
// 要執行的代碼
}

讓我們來解析一下：

while 關鍵字告訴 JavaScript 我們想要開始一個 while 迴圈。
condition 是一個布尔表達式，在每次迭代之前進行評估。
如果條件為真，花括號 {} 內的代碼將被執行。
這個過程會重複，直到條件變為假。

範例 1：計數到 5

讓我們從一個簡單的範例開始：

let count = 1;

while (count <= 5) {
console.log("計數是: " + count);
count++;
}

在這個範例中：

我們用值 1 初始化變量 count。
while 迴圈會繼續，只要 count 小於或等於 5。
在迴圈內部，我們將當前的計數輸出到控制台。
我們使用 ++ 運算符將 count 增加 1。
迴圈重複第 3-4 步，直到 count 變為 6，此時條件變為假，迴圈結束。

輸出：

計數是: 1
計數是: 2
計數是: 3
計數是: 4
計數是: 5

範例 2：數字總和

讓我們嘗試一些更實際的東西。我們將使用 while 迴圈來計算從 1 到 10 的數字總和：

let sum = 0;
let number = 1;

while (number <= 10) {
sum += number;
number++;
}

console.log("從 1 到 10 的數字總和是: " + sum);

在這個範例中：

我們將 sum 初始化為 0，number 初始化為 1。
迴圈會繼續，只要 number 小於或等於 10。
在每次迭代中，我們將當前的 number 加到 sum 上。
我們將 number 增加 1。
迴圈結束後，我們打印出最終的總和。

輸出：

從 1 到 10 的數字總和是: 55

JavaScript do...while 迴圈

現在，讓我們來認識一下 do...while 迴圈——這是 while 迴圈的稍微樂觀一些的表親。它就像說："我們至少做一次，然後再看我們是否想繼續。"

基本語法

以下是 do...while 迴圈的結構：

do {
// 要執行的代碼
} while (condition);

這裡的關鍵區別在於，代碼塊至少會執行一次，然後才會檢查條件。

範例 3：猜數遊戲

讓我們使用 do...while 迴圈來創建一個簡單的猜數遊戲：

let secretNumber = 7;
let guess;

do {
guess = prompt("猜一個介於 1 到 10 之間的數字：");
guess = Number(guess);

if (guess === secretNumber) {
console.log("恭喜！你猜對了！");
} else if (guess < secretNumber) {
console.log("太低了！再試一次。");
} else {
console.log("太高了！再試一次。");
}
} while (guess !== secretNumber);

在這個範例中：

我們設置一個 secretNumber 和初始化 guess。
迴圈會提示用戶猜一個數字，並將其轉換為數字類型。
我們檢查猜測是否正確、太低或太高，並提供反饋。
迴圈會繼續，只要猜測不等于秘數。
即使第一次就猜對了，迴圈身體至少會執行一次。

JavaScript while 與 for 迴圈的比較

現在我們已經探索了 while 迴圈，你可能會想："我應該何時使用 while 迴圈而不是 for 迴圈？" 這個問題問得好！讓我們來比較一下。

當使用 while 迴圈

while 迴圈通常在以下情況使用：

你事先不知道迴圈應該運行多少次。
迴圈的繼續取決於可能在運行過程中變化的條件。

當使用 for 迴圈

for 迴圈通常在以下情況首選：

你知道迴圈應該運行確切的次數。
你正在迭代一個已知長度的序列（如數組）。

範例 4：找到大於 1000 的第一個 2 的冪

讓我們使用 while 迴圈來找到大於 1000 的第一個 2 的冪：

let power = 0;
let result = 1;

while (result <= 1000) {
power++;
result = Math.pow(2, power);
}

console.log(`大於 1000 的第一個 2 的冪是 2^${power} = ${result}`);

在這種情況下，while 迴圈非常適合，因為我們事先不知道需要多少次迭代。

方法表

以下是我們討論過的方法的總結：

迴圈類型	語法	使用場景
while	`while (condition) { ... }`	當迭代次數未知時
do...while	`do { ... } while (condition);`	當你想要至少執行一次迴圈時
for	`for (init; condition; update) { ... }`	當迭代次數已知時

記住，選擇正確的迴圈就像為工作選擇正確的工具一樣。隨著練習，你將培養出一種直覺，知道在不同的情況下哪個最適合。

這就是你們的，我的編程學徒！我們已經一起完成了 JavaScript 中 while 迴圈的來龍去脈。記住，迴圈就像是編程遊樂場中的旋轉木馬——它們會不斷轉動，直到停止的時候。持續練習，很快你將成為編程宇宙中的迴圈大師！

Credits: Image by storyset