/

JavaScript 迴圈

JavaScript 迴圈

JavaScript 提供了許多迴圈的方法。本教程將解釋現代 JavaScript 中各種迴圈的可能性。

介紹

JavaScript 提供了許多迴圈的方法。本教程將以一個小例子和主要屬性來解釋每一種方法。

for

1
2
3
4
5
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() 來迭代其屬性。

1
2
3
4
5
6
7
8
const list = ['a', 'b', 'c']
list.forEach((item, index) => {
 console.log(item) // 值
 console.log(index) // 索引
})

// 索引是可選的
list.forEach(item => console.log(item))

不幸的是，你無法從這個迴圈中跳出。

do...while

1
2
3
4
5
6
7
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 迴圈。

1
2
3
do {
 if (something) break
} while (true)

你可以使用 continue 跳到下一個迭代。

1
2
3
4
5
do {
 if (something) continue

 // 做其他事情
} while (true)

while

1
2
3
4
5
6
7
const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
 console.log(list[i]) // 值
 console.log(i) // 索引
 i = i + 1
}

你可以使用 break 中斷一個 while 迴圈。

1
2
3
while (true) {
 if (something) break
}

你可以使用 continue 跳到下一個迭代。

1
2
3
4
5
while (true) {
 if (something) continue

 // 做其他事情
}

與 do...while 不同的是，do...while 始終至少執行一次迴圈。

for...in

用於迭代對象的所有可枚舉屬性，返回屬性名稱。

1
2
3
4
for (let property in object) {
 console.log(property) // 屬性名稱
 console.log(object[property]) // 屬性值
}

for...of

ES6 引入了 for...of 迴圈，將 forEach 的簡潔性與中斷的能力相結合。

1
2
3
4
5
6
7
8
9
10
// 迭代值
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 迭代屬性的名稱。

tags: [“JavaScript”, “迴圈”, “forEach”, “for…in”, “for…of”]