JavaScript 提供了許多迴圈的方法。本教程將解釋現代 JavaScript 中各種迴圈的可能性。
介紹
JavaScript 提供了許多迴圈的方法。本教程將以一個小例子和主要屬性來解釋每一種方法。
for
const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
console.log(list[i]) // 值
console.log(i) // 索引
}
- 你可以使用
break
中斷一個for
迴圈。 - 你可以使用
continue
快速跳到下一個迭代。
forEach
在 ES5 中引入了 forEach
。給定一個陣列,你可以使用 list.forEach()
來迭代其屬性。
const list = ['a', 'b', 'c']
list.forEach((item, index) => {
console.log(item) // 值
console.log(index) // 索引
})
// 索引是可選的
list.forEach(item => console.log(item))
不幸的是,你無法從這個迴圈中跳出。
do...while
const list = ['a', 'b', 'c']
let i = 0
do {
console.log(list[i]) // 值
console.log(i) // 索引
i = i + 1
} while (i < list.length)
你可以使用 break
中斷一個 while
迴圈。
do {
if (something) break
} while (true)
你可以使用 continue
跳到下一個迭代。
do {
if (something) continue
// 做其他事情
} while (true)
while
const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
console.log(list[i]) // 值
console.log(i) // 索引
i = i + 1
}
你可以使用 break
中斷一個 while
迴圈。
while (true) {
if (something) break
}
你可以使用 continue
跳到下一個迭代。
while (true) {
if (something) continue
// 做其他事情
}
與 do...while
不同的是,do...while
始終至少執行一次迴圈。
for...in
用於迭代對象的所有可枚舉屬性,返回屬性名稱。
for (let property in object) {
console.log(property) // 屬性名稱
console.log(object[property]) // 屬性值
}
for...of
ES6 引入了 for...of
迴圈,將 forEach
的簡潔性與中斷的能力相結合。
// 迭代值
for (const value of ['a', 'b', 'c']) {
console.log(value) // 值
}
// 使用 `entries()` 來獲取索引
for (const [index, value] of ['a', 'b', 'c'].entries()) {
console.log(index) // 索引
console.log(value) // 值
}
注意使用 const
。此迴圈在每次迭代中都建立一個新的作用域,因此我們可以安全地使用它來替代 let
。
for...in
vs for...of
for...in
的不同之處在於:
for...of
迭代屬性的值。for...in
迭代屬性的名稱。