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