While 循環和 for 循環。第 5 部分 JavaScript 課程從初學者到高級，共 10 篇博文

已發表: 2021-10-29

這是 JavaScript 博客文章系列的第 5 部分，它將帶您從初學者到高級。 在本系列結束時，您將了解開始使用 JavaScript 編碼所需的所有基礎知識。 事不宜遲，讓我們開始第五個教程。

While 循環和 for 循環 - 目錄：

控制結構（續）
While 循環
對於循環

本教程假定您已遵循該系列中的第 4 篇教程，無論是在設置方面還是在知識方面。我們將繼續我們在第 4 個教程中的設置，因此如果您因某種原因關閉它，您可以查看上一個教程以獲取完整的分步說明。結果，我們將打開 Google Chrome，更具體地說，打開代碼片段部分以編寫和執行我們的代碼。如果你準備好了，那麼你就可以學習本教程了。

控制結構（續）

在前面的教程中，我們已經看到使用 if、else if 和 else 來控制我們的代碼流。很高興我們現在可以更好地控制我們的代碼，但是如果您注意到，我們只能執行一次所有內容。例如，如果你想說“你好，那裡！” 十次，你將需要編寫 10 行不同的代碼來表達完全相同的內容。難道沒有更好的方法來實現這一目標嗎？你真的需要在代碼中重複自己這麼多次嗎？答案是否定的，一點也不。

作為程序員，您希望您的代碼是 DRY。 DRY 在這裡代表不要重複自己。是的，如果當時有意義，您可能偶爾會重複代碼的某些部分，但作為一般目標，您應該以擁有 DRY 代碼為目標。這樣，大多數時候您將擁有更簡潔的代碼，並且出錯的可能性更小。

為了不在代碼中重複自己，我們將使用循環。更具體地說是“while 循環”和“for 循環”。讓我們從 while 循環及其全部內容開始。

While 循環

While 循環遵循一個簡單的邏輯。它如下所示：

在條件為真時執行括號內的給定代碼。

也就是說，我們還應該小心使用 while 循環編寫的代碼，因為如果條件永遠不會變為 false，則括號內的代碼將永遠運行，除非執行停止。這就是為什麼我們要實現某種改變來觸發為什麼循環停止。讓我們看一個例子。

let hungry = true;
while (hungry) {
    alert("Eat food");
    hungry = false;
}

在上面的示例中，我們將執行告訴我們只吃一次的警報代碼。這是因為一開始我們將飢餓設置為true，所以我們將開始執行while循環內的代碼。但是在執行代碼時，一行代碼將飢餓狀態設置為 false。因此，在第一次執行之後，我們現在將飢餓狀態設置為 false，在此我們知道 while 代碼將不會再次執行。現在讓我們看另一個代碼被多次執行的例子。

let targetNumber = 10;
let currentNumber = 0;
while (currentNumber < targetNumber) {
    alert("Hello User!");
    currentNumber++;
}

你認為這段代碼會發生什麼？是否要向用戶顯示任何警報？如果是這樣，我們將向用戶顯示多少警報？

如果您猜到我們總共會提醒用戶 10 次，那麼您猜對了！如果沒有再想一想，看看你這次是否得到它。我們在這段代碼中所做的是從 currentNumber 開始，以跟踪我們向用戶顯示警報的次數。每次我們向用戶顯示警報時，我們也會將它加一。如果您記得的話，++ 符號用於將給定數字加一。一開始我們還沒有向用戶顯示任何警報，所以我們從零開始，一直持續到顯示數字為 10。

這裡需要注意的一點是，因為我們檢查的是小於 10 的數字，所以噹噹前數字達到 10 時，括號內的代碼不會被執行，因為它不再滿足小於 targetNumber 的條件。

儘管我們在每個循環結束時將數字增加了 1，但沒有規則說您只能在 while 循環內增加或減少它。這是使用 while 循環的主要優點。它們用於您不一定知道要運行代碼多少次的地方。例如，您可以創建一個遊戲，並且可以讓玩家留在遊戲中，只要他們不失去遊戲。在此遊戲會話期間，用戶可以在不確定的時間段內獲得積分或鬆散積分，當他們低於某個點（例如零）時，您可以結束遊戲。

有時，您可能還希望在 while 循環中至少運行一次括號內的代碼。例如，想像一個場景，您首先吃點零食，然後他們決定您是否餓了。你知道你想吃點東西，但你不一定知道很久。在這種情況下，我們可以使用一種稱為“do while 循環”的 while 循環。

let reallyHungry = false;
do {
    alert("Eat some food.");
} while (reallyHungry);

在這種情況下，即使我們不是真的餓了，我們還是先吃點東西，然後再決定是否多吃。這是我們可以用 do while 循環做的事情。請注意，因為我們沒有一種機制來告訴計算機我們什麼時候吃飽了，如果我們把 realHungry 變成 true，這段代碼會一直運行下去。這就是為什麼在我們的代碼塊中實現某種停止機制仍然是必須的。這可以是任何東西，可以是給飢餓一個級別，以便我們可以增加它，或者在我們的代碼中將它設置為“真”。

While 循環特別適用於我們不知道必須運行代碼多少次的情況。但是很多時候我們確實知道我們應該執行一段代碼的確切次數。對於那些時候，我們通常會使用“For Loops”。

對於循環

For 循環與 while 循環非常相似，但它們具有某些特性，使它們在許多情況下更受歡迎。 For 循環引入了您必須從一開始就設置的某些邊界，這些邊界可以使您的代碼更安全地運行。通過 for 循環，我們可以準確地告訴計算機我們想要運行一段代碼多少次。這樣我們就知道我們的代碼不會變成一個想永遠運行的無限循環。

// greet the user 5 times, or 5 users once!
for (let numberGreeted = 0; numberGreeted < 5; numberGreeted++){
    alert("Hello User!");
}

在上面的代碼中，我們向用戶打招呼 5 次。如果您仔細查看 for 循環，您會發現它幾乎是一個專門的 while 循環，更明確且執行起來更安全。例如，使用 while 循環，我們可以使用以下代碼實現完全相同的輸出：

let numberGreeted = 0;
while (numberGreeted < 5) {
    alert("Hello User!");
    numberGreeted++;
}

如您所見，使用 for 循環，我們幾乎將代碼的某些部分放入定義 for 循環條件的括號內。這樣我們就知道我們要使用的變量肯定存在，我們知道我們正在檢查的值是遞增的，並且我們知道執行將在到達目標數之前停止。

我們已經看到，我們可以從一個在 for 循環中使用的數字開始並將其加一。但是如果你想增加 5 怎麼辦？或者如果你真的需要減一怎麼辦？我們也可以用 for 循環來實現嗎？嗯，是的，我們可以。在定義 for 循環時，只要您以受控的方式從初始條件開始並以另一個條件結束，我們就有了一個正常運行的 for 循環。例如，我們可以創建一個從 5 開始的倒計時：

for (let countDown = 5; countDown > 0; countDown--){
    alert(countDown + "!");
}

請注意，要使遞減數字起作用，我們首先需要從大數字開始。當我們開始執行此代碼時，首先會發生的一件事是我們將為我們創建一個 countDown 變量，並且該變量的值將設置為數字 5。下一步是檢查提供的條件變量。在初始循環迭代中創建變量後，我們放置的迭代規則將在每次迭代結束時應用。

在最後一個示例中，我們將“countDown —”設置為“每次迭代結束時會發生什麼變化？”。在這種情況下，我們正在遞減第一個。在開始每次新的迭代之前，我們設置的條件也會被檢查。我們在上一個示例中設置的條件是：

“countDown > 0”，這意味著只要 countDown 變量大於 0，這個 for 循環就會繼續運行我們提供的代碼。

我們也可以在正或負方向上增加一個以上的數字。例如，我們可以從一個小數字開始，然後將其提高到我們想要的速率：

for (let someVariable = 0; someVariable < 15; someVariable = someVariable + 5){
    alert(someVariable);
}

運行此代碼將導致警告用戶：0、5 和 10。

這些是 for 循環的主要特徵。 您剛剛看到了兩種主要的循環類型，即 while 循環和 for 循環。 它們在一般編程和 JavaScript 中都非常常用。 我們將根據需要使用這些循環，因此了解它們的基礎知識很重要。 如果您認為自己對這些主題有些熟悉，在下一個教程中，我們將看到 JavaScript 中的另一個主要概念。

作者：羅伯特·惠特尼
JavaScript 專家和指導 IT 部門的講師。他的主要目標是通過教其他人如何在編碼時有效合作來提高團隊生產力。
查看所有帖子

10 篇博文中從初級到高級的 JavaScript 課程：

如何開始用 JavaScript 編碼？
JavaScript 基礎
JavaScript 中的變量和不同的數據類型
片段和控制結構
While 循環和 for 循環
Java 數組
JavaScript 函數
JavaScript 對象
JavaScript 方法等
JavaScript 課程總結