7種你可能不知道的JavaScript循環變體

英文 | https://betterprogramming.pub/all-javascript-loops-f6424cabfcb6

翻譯 | web前端開發

每個程式員應該都了解循環，最有可能從while循環開始，最終進入for循環，甚至遞歸。了解這些概念非常有用，但是，有一些非正常的循環類型，例如，for ... of循環。

今天，就讓我們一起來看一下JavaScript中可用的正常和非正常循環。

1、while

許多開發人員在學習期間會遇到的第一個循環是while循環。這是一個非常簡單且最小的循環，如果特定測試傳回則将循環true。如果以該值false開頭，那麼它将根本不會循環。

示例如下：

let i = 0


// Log: 1 2 3
while (i < 3) {
  console.log(i)
  i++
}      

2、do while

do ... while循環結構，像while循環一樣，當測試傳回時，它将周遊代碼塊true。但是，與while循環不同的是，該循環将至少執行一次，然後在循環的末尾而不是在開始時進行檢查。

let i = 0


do {
  i += 1
  console.log(i)
} while (i < 5)
// Log: 1 2 3 4 5      

3、for

for循環是使用最廣泛的循環。它用于各種任務，例如，周遊數組或特定次數。與while循環不同，你不必自己更新測試值。

for(let i = 0; i < 10; i++){
  console.log(i)
}
// Log: 1 through 10      

4、 for … in

該循環對于周遊數組或另一個可疊代對象以及對該可疊代對象中的每個值進行操作。它會建立一個可以使用的項目變量，而不是索引變量。

let arr = ["Apple", "Pear", "Cucumber"]
for (let item in arr) {
  console.log(item)
}
// Log: Apple Pear Cucumber      

5、for … of

可以與for ... in循環相同的方式使用它，但是它的用法略有不同。

const arr = [3, 5, 7];
// Set arr.foo
arr.foo = 'hello';


// For ... in
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}


// For ... of
for (let i of arr) {
   console.log(i); // logs 3, 5, 7
}
// For ... of will not show 'foo'      

6、forEach

一些可疊代對象（例如數組）包含用于對其進行疊代的内置函數。forEach的功能，如map和filter，要求将通過在疊代每個項目執行的功能。

let arr = [1, 2, 3, 4]
arr.forEach((item, index) => {
  console.log(item)
})      

7、遞歸

周遊數組或設定次數的“最困難”方法是遞歸。遞歸是計算機科學中的一個主題，它松散地表示一個函數将自行調用，直到進行特定的疊代為止。起初很難了解這個概念，但是，我希望代碼片段可以幫助你了解。

function loop(loopsLeft){
  if(loopsLeft > 0){
    console.log(loopsLeft)
    loop(loopsLeft - 1)
  } else {
    return true 
  }
}


loop(5)      

結論

循環可以通過很多方式來完成。其中一些僅對特定任務有用，希望，我今天列舉的這些執行個體對你有用。

感謝你的閱讀，祝你有美好的一天。