JavaScript的幾種循環方式

JavaScript提供了許多經過LOOPS迭代的方法。本教程解釋了現代JAVASCRIPT中各類各樣的循環可能性

目錄：

• for
• forEach
• do...while
• while
• for...in
• for...of
• for...in vs for...of

介紹

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))

不過須要注意的是你沒法擺脫這個循環。

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中斷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
}

與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循環，它結合了forEach的簡潔性和破解能力：

//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using `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 迭代屬性名稱