Question

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 迭代属性名