web 前端 7 种你可能不知道的 JavaScript 循环变体

>>号外：关注“前端知音”公众号，回复“2021面试题”关键词，领取全套前端面试题文件。

每个程序员应该都了解循环，最有可能从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)

结论

循环可以通过很多方式来完成。其中一些仅对特定任务有用，希望，我今天列举的这些实例对你有用。

感谢你的阅读，祝你有美好的一天。

翻译：

betterprogramming.pub/all-javascript-loops-f6424cabfcb6

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「前端知音」加星标，提升前端技能

关注「前端知音」看更多干货