在 JavaScript 中，`for...of` 循环是一种非常实用的遍历结构，尤其在处理数组、Map、Set、字符串等可迭代对象时表现得非常灵活。虽然它与传统的 `for...in` 循环在语法上有些相似，但它们在使用场景和功能上有明显的区别。本文将详细讲解 `for...of` 的基本用法，并对比它与 `for...in` 的不同之处。
一、什么是 `for...of`？
`for...of` 是 ES6（ECMAScript 2015）引入的一种新的循环结构，用于遍历可迭代对象（Iterable）。所谓“可迭代对象”，是指实现了 `Symbol.iterator` 方法的对象，比如：
- 数组（Array）
- 字符串（String）
- Map
- Set
- NodeList（DOM 节点列表）
它的基本语法如下：
```javascript
for (const element of iterable) {
// 循环体
}
```
其中，`iterable` 是一个可迭代对象，`element` 是每次循环中取出的元素。
二、`for...of` 的基本用法
1. 遍历数组
```javascript
const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
console.log(fruit);
}
```
输出结果为：
```
apple
banana
orange
```
2. 遍历字符串
```javascript
const str = 'hello';
for (const char of str) {
console.log(char);
}
```
输出结果为：
```
h
e
l
l
o
```
3. 遍历 Map 和 Set
```javascript
const map = new Map([
['name', 'Alice'],
['age', 25]
]);
for (const [key, value] of map) {
console.log(key + ': ' + value);
}
const set = new Set([1, 2, 3]);
for (const num of set) {
console.log(num);
}
```
三、`for...of` 与 `for...in` 的区别
虽然 `for...in` 和 `for...of` 都可以用来遍历对象或集合，但它们的使用方式和适用范围有明显差异：
| 特性 | `for...in` | `for...of` |
|------|------------|-------------|
| 遍历对象类型 | 遍历对象的键名（property names） | 遍历对象的值或元素 |
| 适用对象 | 所有可枚举属性的对象（如普通对象、Array 等） | 可迭代对象（如 Array、Map、Set 等） |
| 是否包含原型链属性 | 是（会遍历继承来的属性） | 否（只遍历自身可迭代的元素） |
| 是否支持索引访问 | 不直接支持（需要通过 `obj[key]`） | 直接获取元素值 |
示例对比：
```javascript
const arr = ['a', 'b', 'c'];
// for...in
for (let index in arr) {
console.log(index);// 输出: 0, 1, 2
console.log(arr[index]); // 输出: a, b, c
}
// for...of
for (let item of arr) {
console.log(item); // 输出: a, b, c
}
```
四、注意事项
- `for...of` 不能用于普通的对象（Object），除非该对象实现了 `Symbol.iterator`。
- 如果你想要遍历对象的键、值或键值对，可以结合 `Object.keys()`、`Object.values()` 或 `Object.entries()` 使用。
例如：
```javascript
const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
console.log(key);// 输出: a, b
}
for (const [key, value] of Object.entries(obj)) {
console.log(key + ': ' + value); // 输出: a: 1, b: 2
}
```
五、总结
`for...of` 是一种简洁且强大的遍历方式，特别适合处理数组、字符串、Map、Set 等可迭代对象。相比 `for...in`，它更安全、更直观，避免了不必要的原型链污染问题。掌握 `for...of` 的用法，能让你在实际开发中更加高效地处理数据结构。
如果你正在学习 JavaScript，建议多加练习 `for...of` 在不同数据类型中的应用，以便更好地理解其优势和适用场景。
