循環 for...of
循環 for...of 和 for...in 提供了便利的方法來迭代 JavaScript 中的數組元素和對象屬性。這兩種循環都用於遍歷，但適用於不同的情況。
循環 for...of
循環 for...of 用於遍歷可以迭代的對象（如數組、字符串、Set 和 Map）。它允許輕鬆地遍歷集合的元素。
語法：
for (let variable of iterable) {
// 每個元素將執行的代碼
}
例子：
JavaScript
let array = [1, 2, 3, 4, 5];
for (let value of array) {
console.log(value);
}
// 輸出: 1 2 3 4 5
數組的應用
循環 for...of 適用於遍歷數組元素，因為它提供對每個元素值的訪問：
JavaScript
let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
console.log(fruit);
}
// 輸出: apple banana cherry
字符串的應用
循環 for...of 也可以用於遍歷字符串中的字符：
JavaScript
let str = 'Hello';
for (let char of str) {
console.log(char);
}
// 輸出: H e l l o
9.2 循環 for...in
循環 for...in 用於遍歷對象的可枚舉屬性。它遍歷每個屬性的鍵。
語法：
for (let key in object {
// 每個元素將執行的代碼
}
例子：
JavaScript
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
console.log(key + ': ' + obj[key]);
}
// 輸出: a: 1 b: 2 c: 3
對象的應用
循環 for...in 適合遍歷對象的屬性，因為它提供對每個屬性鍵和值的訪問：
JavaScript
let user = {
name: 'John',
age: 30,
isAdmin: true
};
for (let key in user) {
console.log(key + ': ' + user[key]);
}
// 輸出: name: John age: 30 isAdmin: true
數組的應用
循環 for...in 可以用於遍歷數組的索引，但不推薦使用，因為它會遍歷所有可枚舉屬性，包括來自原型的屬性：
JavaScript
let array = ['apple', 'banana', 'cherry'];
for (let index in array) {
console.log(index + ': ' + array[index]);
}
// 輸出: 0: apple 1: banana 2: cherry
9.3 循環 for...of 和 for...in 的比較
比較循環 for...of 和 for...in：
| 描述 | for...of | for...in |
|---|---|---|
| 應用 | 可迭代對象（數組、字符串、Set、Map） | 對象 |
| 特性 | 迭代值 | 迭代鍵 |
| 在數組中的使用 | for (let value of array) { ... } |
for (let index in array) { ... } |
| 在對象中的使用 | for (let value of Object.values(obj)) { ... } |
for (let key in obj) { ... } |
GO TO FULL VERSION