for...of 循环用于遍历可迭代对象，如数组、字符串、map、set 等。1. 它通过简洁的语法 for (const element of iterable) 直接获取每个元素；2. 支持自定义可迭代对象，通过实现 symbol.iterator 方法；3. 与 for...in 不同，for...of 遍历值而非属性名；4. 可用于数据处理、异步操作、dom 操作等场景；5. 应避免在需要索引、非可迭代对象或性能极端敏感的情况下使用；6. 可用 break 中断循环，continue 跳过当前项，return 退出函数及循环。
for...of 循环是 JavaScript 中遍历可迭代对象（Iterable objects）的利器。它能让你轻松访问数组、字符串、Map、Set 等数据结构中的元素，而无需手动管理索引。
解决方案
for...of 循环的语法非常简洁：
for (const element of iterable) {
// 使用 element 做一些事情
}-
element：循环的每个迭代中，element会被赋值为可迭代对象中的下一个值。 -
iterable：你想要遍历的可迭代对象。
示例：遍历数组
const myArray = [1, 2, 3, 4, 5];
for (const number of myArray) {
console.log(number); // 输出 1, 2, 3, 4, 5
}示例：遍历字符串
const myString = "Hello";
for (const character of myString) {
console.log(character); // 输出 H, e, l, l, o
}示例：遍历 Map
Map 对象存储键值对。 for...of 循环会遍历 Map 中的每个键值对，以 [key, value] 的形式返回。
const myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 30);
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`); // 输出 name: Alice, age: 30
}示例：遍历 Set
Set 对象存储唯一的值。 for...of 循环会遍历 Set 中的每个值。
const mySet = new Set([1, 2, 3, 3, 4, 4, 5]); // Set 会自动去重
for (const number of mySet) {
console.log(number); // 输出 1, 2, 3, 4, 5
}与 for...in 的区别
for...of 和 for...in 经常被混淆，但它们用途不同。for...in 循环用于遍历对象的 属性名，而 for...of 循环用于遍历可迭代对象的 值。
const myObject = { a: 1, b: 2, c: 3 };
// for...in 遍历属性名
for (const key in myObject) {
console.log(key); // 输出 a, b, c
}
// 注意：for...of 不能直接遍历普通对象，因为普通对象不是可迭代的
// for (const value of myObject) { // 会报错
// console.log(value);
// }自定义可迭代对象
你可以通过实现 Symbol.iterator 方法来使自定义对象可迭代。 这个方法需要返回一个迭代器对象，该迭代器对象必须具有 next() 方法。 next() 方法返回一个包含 value 和 done 属性的对象。
const myIterable = {
data: [1, 2, 3],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.data.length) {
return { value: this.data[index++], done: false };
} else {
return { value: undefined, done: true };
}
},
};
},
};
for (const number of myIterable) {
console.log(number); // 输出 1, 2, 3
}for...of 循环的优势在于它的简洁性和易用性，它能够清晰地表达遍历可迭代对象的意图，避免了手动管理索引的繁琐。
for...of 循环可以用于哪些实际场景？
- 数据处理： 遍历数组或集合来执行数据转换、过滤或聚合操作。
-
异步操作： 结合
async/await遍历异步数据流，例如从服务器获取的数据。 - DOM 操作： 遍历 DOM 元素集合，例如为每个元素添加事件监听器。
- 状态管理： 遍历状态对象来更新 UI 或执行其他副作用。
在什么情况下应该避免使用 for...of 循环？
-
需要访问索引： 如果你需要访问当前元素的索引，
for...of循环不是最佳选择。可以使用传统的for循环或Array.prototype.forEach()方法。 -
非可迭代对象：
for...of循环只能用于可迭代对象。如果尝试遍历非可迭代对象，会抛出错误。 需要使用for...in(遍历键) 或Object.keys/values/entries(转换为数组再遍历)。 -
性能敏感场景： 在某些性能敏感的场景下，传统的
for循环可能比for...of循环略快。 但通常情况下，for...of循环的性能足够好，而且代码更易读。 性能优化应该基于实际测量，而不是盲目猜测。
如何提前中断 for...of 循环？
可以使用 break 语句提前中断 for...of 循环。 break 语句会立即退出循环，并将控制权转移到循环之后的代码。
const myArray = [1, 2, 3, 4, 5];
for (const number of myArray) {
if (number > 3) {
break; // 当 number 大于 3 时，退出循环
}
console.log(number); // 输出 1, 2, 3
}也可以使用 continue 语句跳过当前迭代，继续下一次迭代。 continue 语句会跳过循环体中剩余的代码，并立即开始下一次迭代。
const myArray = [1, 2, 3, 4, 5];
for (const number of myArray) {
if (number % 2 === 0) {
continue; // 当 number 是偶数时，跳过本次迭代
}
console.log(number); // 输出 1, 3, 5
}return 语句也可以用于提前退出循环，但 return 语句会退出整个函数，而不仅仅是循环。 因此，只有在循环位于函数内部，并且你想要同时退出循环和函数时，才应该使用 return 语句。
