JavaScript循環

JavaScript提供了許多遍歷循環的方法。本教程介紹了現代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
}
  • 您可以打斷for循環使用break
  • 您可以快進至下一個迭代for循環使用continue

每次

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

您可以打斷while循環使用break

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
}

您可以打斷while循環使用break

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

ES6介紹了for...of循環,結合了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...infor...of

與...的區別for...in是:

  • for...of 遍歷屬性值
  • for...in 迭代屬性名稱

免費下載我的JavaScript初學者手冊


更多js教程: