在 JavaScript 中使用 While 和 Do While 循環

本文最初是為 DigitalOcean 編寫的 .

自動化是使技術或系統自動運行的技術；在編程中，我們使用循環 自動化重複的任務。循環是編程語言最有用的特性之一，在本文中我們將了解while 和 do...while JavaScript 中的循環。

while 和 do...while JavaScript 中的語句類似於條件語句，它們是在指定條件導致 true 時執行的代碼塊 .不像 if 語句，只計算一次，循環將運行多次，直到條件不再計算為 true .

您將遇到的另一種常見循環類型是 for 語句，執行一定次數。 while 和 do...while 循環是基於條件的，因此無需事先知道循環將運行多少次。

While

在 JavaScript 中，一個 while statement 是一個循環，只要指定條件的計算結果為 true 就會執行 .語法與 if 非常相似 聲明，如下所示。

while (condition) {
  // execute code as long as condition is true
}

while statement 是在 JavaScript 中構造的最簡單的循環。

例如，我們假設我們有一個有人口限制的水族館。對於循環的每次迭代，我們將添加一條魚。一旦水族館有 10 魚，將達到種群限制，程序將停止添加更多魚。

如果沒有循環，我們可能不得不寫：

// Start off with 0 fish
let fish = 0;

fish++
}

// Set population limit of aquarium to 10
const populationLimit = 10

// Start off with 0 fish
let fish = 0

// Initiate while loop to run until fish reaches population limit
while (fish < populationLimit) {
  // add one fish for each iteration
  fish++
  console.log(
    'The aquarium has room for ' + (populationLimit - fish) + ' more fish.'
  )
}

The aquarium has room for 9 more fish.
The aquarium has room for 8 more fish.
The aquarium has room for 7 more fish.
The aquarium has room for 6 more fish.
The aquarium has room for 5 more fish.
The aquarium has room for 4 more fish.
The aquarium has room for 3 more fish.
The aquarium has room for 2 more fish.
The aquarium has room for 1 more fish.
The aquarium has room for 0 more fish.

在我們的示例中，我們設置了 while 只要魚的數量少於水族館的人口限制，循環就會運行。對於每次迭代，將一條魚添加到水族箱中，直到所有 10 斑點被填滿。此時，循環將停止運行。

無限循環

無限循環 ，顧名思義，是一個將永遠運行的循環。如果您不小心在某個時候進行了無限循環，它可能會導致您的瀏覽器或計算機崩潰。了解無限循環很重要，因此您可以確保避免它們。

最簡單的無限循環示例就是簡單地設置 while 的條件 true 的語句 .下面是一個將永遠運行的代碼示例。沒有必要測試任何無限循環。

// Initiate an infinite loop
while (true) {
  // execute code forever
}

無限循環將永遠運行，但程序可以用 break 終止 關鍵詞。在下面的示例中，我們將添加一個 if while 的聲明 循環，當滿足該條件時，我們將使用 break 終止循環 .

// Set a condition to true
const iceCapsAreMelting = true
let polarBears = 5

// Initiate infinite loop
while (iceCapsAreMelting) {
  console.log(`There are ${polarBears} polar bears.`)
  polarBears--
  // Terminate infinite loop when following condition is true
  if (polarBears === 0) {
    console.log('There are no polar bears left.')
    break
  }
}

There are 5 polar bears.
There are 4 polar bears.
There are 3 polar bears.
There are 2 polar bears.
There are 1 polar bears.
There are no polar bears left.

請注意，這不一定是創建和終止循環的實用方法，而是 break 是一個需要注意的有用關鍵字。

Do...While

我們已經了解了 while 循環，只要指定條件為真，它就會執行一段代碼。在此基礎上構建的是 do...while 語句，與 while 非常相似 主要區別在於 do...while 循環總是會執行一次，即使條件永遠不會為真。

下面我們將演示do...while的語法 循環。

do {
  // execute code
} while (condition)

如您所見，do 循環的一部分首先出現，然後是 while (condition) .代碼塊將運行，然後條件將被測試為正常的 while 循環。

為了快速測試，我們可以將變量設置為 0 , 在 do 內遞增 ，並將我們的條件設置為 false .

// Set variable to 0
let x = 0

do {
  // Increment variable by 1
  x++
  console.log(x)
} while (false)

1

我們的輸出是 1 ，這意味著代碼塊在被不成功的 (false ) while 健康）狀況。否則，do...while 循環可用於與 while 相同的目的 循環。

結論

在本文中，我們了解了 while 循環，do...while 循環和無限循環。重複性任務的自動化是編程中極其重要的一部分，這些循環可以幫助您的程序更加高效和簡潔。要了解更多信息，請閱讀 Mozilla 開發者網絡上的 while 和 do...while 循環。