JavaScript for…of 循环详解：语法、示例与最佳实践

.## 1. 介绍

在 JavaScript 中处理数据时，循环是必不可少的。为了按顺序处理数组、字符串等数据，JavaScript 提供了多种循环语法。其中，for…of 语句以其简洁而强大的特性脱颖而出。

本文将详细阐述 JavaScript 的 for…of 语句——从基础到进阶用法。我们将从适合初学者的示例开始，随后覆盖在中级和实际项目开发中常用的实用模式。阅读完本文后，你将能够自信地使用 for…of 语句，在编写循环时不再卡壳。

1 2. 什么是 JavaScript 的 for…of 语句？基本用法
2 3. 与其他循环语法的差异与比较
- 2.1 3.1 for…of 与 for…in 的区别
  - 2.1.1 示例：使用 for…in
- 2.2 3.2 for…of 与 forEach 的区别
  - 2.2.1 示例：使用 forEach
3 4. 实践示例与高级技巧
4 5. 注意事项与故障排除
5 6. 常见问题解答
6 7. 总结
- 6.1 7.1 for…of 语句的优势
7 8. 下一步学习什么
- 7.1 最终想法

2. 什么是 JavaScript 的 for…of 语句？基本用法

2.1 for…of 语句概述

JavaScript 的 for…of 语句是一种语法，能够以简洁直观的方式遍历可迭代对象。它旨在高效处理数组、字符串、Map、Set 等数据结构。

2.2 for…of 语句的基本语法

使用下面的语法即可按顺序处理可迭代对象的每个元素。

for (const element of arrayOrObject) {
  // 반복 처리
}

当你想轻松获取数组或字符串中的每个元素时，这种语法非常实用。

2.3 实用代码示例

示例 1：按顺序输出数组元素

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

输出：

Apple  
Banana  
Orange

示例 2：按顺序输出字符串的每个字符

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

输出：

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 支持的数据类型

for…of 语句可用于以下可迭代对象：

数组（Array）
字符串（String）
Map 对象
Set 对象
arguments 对象（函数参数的类数组对象）
NodeList 对象（HTML 元素集合）

注意： 不能直接对对象字面量使用它（我们将在后面解释解决办法）。

3. 与其他循环语法的差异与比较

3.1 for…of 与 for…in 的区别

Syntax	Purpose	Target	Key Features
for…of	Iterate over values	Iterable objects such as arrays, strings, Map, Set, etc.	Processes each element value in a clean and simple way
for…in	Iterate over property keys	Enumerable properties of an object	Retrieves only key names; may include prototype properties

示例：使用 for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

重要提示：
因为 for…in 也会枚举原型链上的属性，所以在遍历对象时需要格外小心。

3.2 for…of 与 forEach 的区别

Syntax	Key Features	Control Flow
for…of	Simple and works for many iterable structures	Supports break and continue
forEach	Array-only and requires a callback function	Does not support break or continue

示例：使用 forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

重要提示：
由于 forEach 不能提前终止循环，当控制流很重要时，推荐使用 for…of 语句。

4. 实践示例与高级技巧

4.1 过滤数组

下面的示例仅输出偶数。

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

输出：

2  
4

4.2 从 Map 中获取键和值

此示例演示如何使用 Map 对象获取键和值。

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

输出：

name: Taro  
age: 25

4.3 与异步处理相结合

下面的示例展示了如何使用 for…of 语句 处理异步操作。

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

在该示例中，每个 API 请求会按顺序执行，从而在保持执行顺序的同时获取数据。

5. 注意事项与故障排除

5.1 当对象出现错误时

for…of 语句 不能用于对象字面量。请改用 Object.entries()。

示例：使用 Object.entries() 进行处理

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

输出：

a 1  
b 2

通过这种方式，您可以高效地遍历对象的键和值。

5.2 性能考虑

for…of 语句 在大多数常规用例中提供足够的性能，但在处理大数据集时需格外小心。如有必要，可考虑使用基于索引的 for 循环或 while 循环。

示例：基于索引的 for 循环

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 添加错误处理

在将异步处理与 for…of 语句 结合使用时，请确保加入适当的错误处理机制。

示例：使用 try…catch 处理错误

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. 常见问题解答

问题 1：for…of 语句在所有浏览器中都能工作吗？

A1:
for…of 语句 是在 ES6（ECMAScript 2015） 中引入的。它在现代浏览器中受支持，但 Internet Explorer 不支持此语法。

支持的浏览器：

Google Chrome 38 及以上
Firefox 36 及以上
Safari 7.1 及以上
Edge 12 及以上

如果需要兼容旧版浏览器，请使用 Babel 将代码转译，或选择其他循环语法。

问题 2：在使用 for…of 时如何获取索引？

A2:
使用 for…of 时无法直接获取索引，但可以使用 entries() 方法同时获取索引和值。

示例：

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

输出：

0 Apple  
1 Banana  
2 Orange

问题 3：可以在对象字面量上使用 for…of 吗？

A3:
不能。for…of 语句 仅适用于可迭代对象。对象字面量不可迭代，但可以通过 Object.entries() 来遍历其键和值。

示例：

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

输出：

a 1  
b 2

问题 4：可以将 for…of 与异步操作一起使用吗？

A4:
可以。您可以将其与 async/await 结合使用。

示例：

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

问题 5：for…of 与 forEach 有何区别？

A5:
下表概括了两者的主要区别。

Feature	for…of statement	forEach method
Supported data	Iterable objects such as arrays, strings, Map, Set, etc.	Arrays only
Callback function	Not required	Required
break/continue	Supported	Not supported
Async processing	Can be used with async/await	Does not directly support async/await

7. 总结

在本文中，我们介绍了 JavaScript for…of 语句 的以下关键要点：

如何理解 基本语法和使用示例，并将其应用于数组和字符串的遍历
与其他循环语法（如 for…in 和 forEach）的 区别及最佳使用场景
包含 Map 与 Set 对象的 高级示例，以及与异步处理的结合使用
实用的 FAQ 部分，帮助解决常见疑问

7.1 for…of 语句的优势

简单且高度可读
对可迭代对象提供灵活支持
循环控制方便，支持 break 与 continue

8. 下一步学习什么

一旦你掌握了 for…of 语句，下一步学习以下特性是个好主意。

展开语法 (…)

一个用于展开和合并数组和对象的实用特性。

解构赋值

从数组和对象中轻松提取值的技巧。

Promise 和 async/await 的更多细节

学习编写异步代码的高效方法。

通过结合这些特性，你将能够构建更高级的 JavaScript 程序。

最终想法

本文提供了 JavaScript for…of 语句的完整指南，涵盖了从基础到实际开发中的实用用例。

下一步的示例行动：

在你自己的代码中实现 for…of 语句 并实验它。
尝试处理数组、Map 和 Set 以加深你的理解。
用更高级的 ES6 特性挑战自己，以提升你的技能。

Prev

2026-01-21
JavaScript Fetch API 指南：GET、POST、错误处理与真实案例
Next
記事がありません

JavaScript for…of 循环详解：语法、示例与最佳实践

2. 什么是 JavaScript 的 for…of 语句？基本用法

2.1 for…of 语句概述

2.2 for…of 语句的基本语法

2.3 实用代码示例

示例 1：按顺序输出数组元素

示例 2：按顺序输出字符串的每个字符

2.4 支持的数据类型

3. 与其他循环语法的差异与比较

3.1 for…of 与 for…in 的区别

示例：使用 for…in

3.2 for…of 与 forEach 的区别

示例：使用 forEach

4. 实践示例与高级技巧

4.1 过滤数组

4.2 从 Map 中获取键和值

4.3 与异步处理相结合

5. 注意事项与故障排除

5.1 当对象出现错误时

示例：使用 Object.entries() 进行处理

5.2 性能考虑

示例：基于索引的 for 循环

5.3 添加错误处理

示例：使用 try…catch 处理错误

6. 常见问题解答

问题 1：for…of 语句在所有浏览器中都能工作吗？

问题 2：在使用 for…of 时如何获取索引？

示例：

问题 3：可以在对象字面量上使用 for…of 吗？

示例：

问题 4：可以将 for…of 与异步操作一起使用吗？

示例：

问题 5：for…of 与 forEach 有何区别？

7. 总结

7.1 for…of 语句的优势

8. 下一步学习什么

最终想法

JavaScript Fetch API 指南：GET、POST、错误处理与真实案例