JavaScript的迴圈方式（1）

前端啟航發表於2018-10-19
JavaScript

JavaScript提供了許多通過LOOPS迭代的方法。本教程解釋了現代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))

複製程式碼

不過需要注意的是你無法擺脫這個迴圈。 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 迭代屬性名稱

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

相關文章