【forof的用法与区别】在JavaScript中，`for...of` 是一种用于遍历可迭代对象（如数组、Map、Set、字符串等）的循环结构。它与传统的 `for...in` 循环有明显的区别，尤其是在处理不同数据类型时的表现。本文将对 `for...of` 的用法进行总结，并通过表格对比其与其他循环方式的区别。
一、`for...of` 的基本用法
`for...of` 用于遍历可迭代对象中的每个元素。它的语法如下：
```javascript
for (const element of iterable) {
// 处理每个元素
}
```
- `iterable`：可以是数组、字符串、Map、Set、NodeList 等。
- `element`：表示当前遍历到的元素。
示例：
```javascript
const arr = [1, 2, 3];
for (const num of arr) {
console.log(num); // 输出 1, 2, 3
}
const str = "hello";
for (const char of str) {
console.log(char); // 输出 h, e, l, l, o
}
```
二、`for...of` 与 `for...in` 的区别
| 特性 | `for...in` | `for...of` |
| 遍历对象 | 对象的键名（属性名） | 可迭代对象的值 |
| 适用对象 | 所有对象（包括自定义对象） | 数组、Map、Set、字符串、NodeList 等可迭代对象 |
| 是否能获取索引 | 否（需手动使用 `Object.keys()`） | 是（可通过 `index` 获取） |
| 是否会遍历原型链上的属性 | 是 | 否 |
| 是否支持 `break` 和 `continue` | 是 | 是 |
示例对比：
```javascript
const obj = { a: 1, b: 2 };
for (let key in obj) {
console.log(key); // 输出 a, b
}
for (let value of Object.values(obj)) {
console.log(value); // 输出 1, 2
}
```
三、`for...of` 与 `forEach` 的区别
| 特性 | `for...of` | `forEach` |
| 是否可以使用 `break` 和 `continue` | 是 | 否 |
| 是否适用于所有可迭代对象 | 是 | 仅适用于数组（或类似数组的对象） |
| 是否支持异步操作 | 是（配合 `await`） | 不支持直接异步 |
| 更适合哪种场景 | 需要中断循环时 | 简单遍历数组 |
示例对比：
```javascript
const arr = [1, 2, 3];
// for...of
for (const num of arr) {
if (num === 2) break;
console.log(num); // 输出 1
}
// forEach
arr.forEach(num => {
if (num === 2) return;
console.log(num); // 输出 1, 2, 3（不会中断）
});
```
四、`for...of` 的适用对象
| 对象类型 | 是否支持 `for...of` |
| 数组（Array） | ✅ |
| 字符串（String） | ✅ |
| Map | ✅ |
| Set | ✅ |
| NodeList（DOM节点集合） | ✅ |
| 自定义可迭代对象（实现 `[Symbol.iterator]`） | ✅ |
| 普通对象（Object） | ❌（除非手动实现迭代器） |
五、小结
`for...of` 是一种更直观、更安全的遍历方式，尤其适用于数组、字符串、Map、Set 等可迭代对象。它避免了 `for...in` 中可能遍历到原型链属性的问题，并且支持 `break` 和 `continue` 控制循环流程。相比 `forEach`，`for...of` 更加灵活，适合需要提前终止循环的场景。
| 项目 | 内容 |
| 标题 | `for...of` 的用法与区别 |
| 主要用途 | 遍历可迭代对象（如数组、字符串、Map、Set） |
| 与 `for...in` 的区别 | 遍历的是键名 vs 值；是否遍历原型链 |
| 与 `forEach` 的区别 | 支持 `break` 和 `continue`；适用于更多对象类型 |
| 适用对象 | 数组、字符串、Map、Set、NodeList 等 |
| 不适用对象 | 普通对象（除非自定义迭代器） |
通过合理选择循环方式，可以提升代码的可读性和性能，同时避免不必要的错误。
