JavaScript 中的循环（Loops） – JavaScript 完全手册（2018版）

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

注：本文为 《 JavaScript 完全手册（2018版） 》第21节，你可以查看该手册的完整目录。

JavaScript提供了许多迭代循环的方法。本节通过一个小例子和主要属性解释现代 JavaScript 中的所有各种循环方法。

for

const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
  console.log(list[i]) //value
  console.log(i) //index
}

• 您可以使用 break 中断 for 循环
• 您可以使用 continue 快速进入到 for 循环的下一次迭代

forEach

在ES5中引入。给定一个数组，您可以使用 list.forEach() 迭代其属性：

const list = ['a', 'b', 'c']
list.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
})
//index is optional
list.forEach(item => console.log(item))

不幸的是，你无法中断 forEach 循环。

do…while

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

可以通过 break 中断 do...while 循环：

do {
  if (something) break
} while (true)

你可以使用 continue 跳转到下一个迭代：

do {
  if (something) continue
  //do something else
} while (true)

while

const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
}

您可以使用 break 中断 while 循环：

while (true) {
  if (something) break
}

你可以使用 continue 跳转到下一个迭代：

while (true) {
  if (something) continue
  //do something else
}

while 与 do...while 的区别在于 do...while 至少执行一次循环。

for…in

迭代对象所有可枚举属性。

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

for…of

ES2015 中引入了 for...of 循环，它结合了 forEach 的简洁性，并且 for...of 循环具有可以中断循环特性：

// 迭代值
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}
//使用 `entries()`,获取索引
for (const [index, value] of ['a', 'b', 'c'].entries()) {
  console.log(index) //index
  console.log(value) //value
}

注意使用 const 。这个循环在每次迭代都创建了一个新的作用域，所以我们可以安全的使用它替代 let 。

for…in vs for…of

和 for...in 不同的是：

for...of
for...in

如果你觉得本文对你有帮助，那就请分享给更多的朋友

关注「前端干货精选」加星星，每天都能获取前端干货